/* Najell's licensed futura-pt via Adobe Fonts — must be the first rule.
   Kit domains are managed in the Adobe Fonts web project. */
@import url("https://use.typekit.net/rlp7tha.css");

/* ============================================================
   NAJELL DASHBOARD THEME  —  save as: najell-theme.css
   (centra-dashboard root, served at orders.data.najell.com/najell-theme.css)

   Single source of truth for dashboard branding. Every token below is
   taken from Najell's official brand CSS (the Gamifiera theme on
   najell.com, received 9 Jul 2026) — do not invent new colors here;
   change the brand, then change this file.

   Usage on any page (all *.data.najell.com subdomains):
     <link rel="stylesheet" href="https://orders.data.najell.com/najell-theme.css">
   ...then use var(--njl-*) in the page's CSS, or rely on the base
   element styling below.

   FONT: futura-pt loads via the Adobe Fonts kit imported at the top of
   this file (rlp7tha). The stack still falls back to Century Gothic /
   Trebuchet if the kit is unreachable or the domain isn't in the kit.
   ============================================================ */

:root {
  /* ---- Brand core ---- */
  --njl-brand:        #9ad2cf;   /* Najell mint — identity, nav, buttons  */
  --njl-brand-dark:   #16514E;   /* dark teal — links/accents on light bg */
  --njl-brand-tint:   #E9F5F4;   /* light mint — soft highlights, badges  */
  --njl-brand-fill:   #d5edec;   /* mint fill — progress, selected rows   */

  /* ---- Ink & surfaces ---- */
  --njl-black:        #2a3645;   /* headers                                */
  --njl-ink:          #474747;   /* body text                              */
  --njl-muted:        #737373;   /* secondary text                         */
  --njl-line:         #c2c2c2;   /* strong borders                         */
  --njl-line-soft:    #e8e8e8;   /* soft borders, dividers                 */
  --njl-bg:           #f9f9f9;   /* page background                        */
  --njl-panel:        #ffffff;   /* cards                                  */
  --njl-dark-surface: #212121;   /* dark panels (config pages, side menus) */

  /* ---- Semantics (from the brand file — never mint) ---- */
  --njl-pos:          #438828;   /* good / online / success                */
  --njl-warn:         #b37c19;   --njl-warn-bg:  #fff4d0;
  --njl-neg:          #d7402e;   --njl-neg-bg:   #fcd2d0;
  --njl-info:         #16514E;   --njl-info-bg:  #E9F5F4;
  --njl-alert:        #D30000;   /* notification red                       */

  /* ---- Type & shape ---- */
  --njl-font: futura-pt, 'Futura PT', 'Century Gothic', 'Trebuchet MS', system-ui, sans-serif;
  --njl-radius:       4px;       /* brand rounding — controls, pills       */
  --njl-radius-lg:    8px;       /* cards                                  */
}

/* ---- Base element styling (opt-in by linking the sheet) ----
   Deliberately gentle: tokens first, opinions second. Pages keep their
   own layout CSS; this covers the shared visual language. */

body.njl {
  font-family: var(--njl-font);
  background: var(--njl-bg);
  color: var(--njl-ink);
}
body.njl h1, body.njl h2, body.njl h3 {
  color: var(--njl-black);
  font-family: var(--njl-font);
  letter-spacing: .01em;
}
body.njl a { color: var(--njl-brand-dark); }

body.njl .btn.primary, body.njl button.primary {
  background: var(--njl-brand);
  color: #ffffff;
  border: 1px solid var(--njl-brand);
}
body.njl .btn.primary:hover, body.njl button.primary:hover {
  background: var(--njl-brand-dark);
  border-color: var(--njl-brand-dark);
}

body.njl input, body.njl select, body.njl textarea {
  font-family: var(--njl-font);
  border-radius: var(--njl-radius);
}
body.njl input:focus, body.njl select:focus, body.njl textarea:focus {
  outline: none;
  border-color: var(--njl-brand);
  box-shadow: 0 0 0 3px var(--njl-brand-tint);
}

body.njl .card {
  background: var(--njl-panel);
  border: 1px solid var(--njl-line-soft);
  border-radius: var(--njl-radius-lg);
}

/* Status text helpers used across pages */
body.njl .pos  { color: var(--njl-pos); }
body.njl .warn { color: var(--njl-warn); }
body.njl .neg  { color: var(--njl-neg); }

/* NOTE ON CHARTS: chart series colors are DATA, not branding — network
   colors, platform colors and red/green deviations stay functional.
   Mint marks identity (nav, buttons, accents), never information. */