/* =============================================================================
   Heliotec design tokens — single source of truth.

   Codifies the on-brand design system: ENERGY/VOLTAGE brand colours, the
   secondary palette, dark surfaces, text greys, the status set, and the
   spacing / radius / type scales. Reference these variables everywhere instead
   of hard-coding hex values.

   Decisions baked in:
     - voltage = brand-deck #4A52F2
     - status positive/warning = green #6CD474 / amber #F3A826 (from the
       original HTML prototype)
     - alert = ALARM #FF6A61 (brand)
   ============================================================================= */
:root {
  /* --- Typeface -------------------------------------------------------- */
  --ds-font: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;

  /* --- Type scale (size / weight) ------------------------------------- */
  --ds-fs-h1: 28px;       --ds-fw-h1: 600;
  --ds-fs-section: 22px;  --ds-fw-section: 600;
  --ds-fs-panel: 18px;    --ds-fw-panel: 600;
  --ds-fs-card: 17px;     --ds-fw-card: 600;
  --ds-fs-metric: 46px;   --ds-fw-metric: 700;
  --ds-fs-body: 15px;
  --ds-fs-secondary: 13px;
  --ds-fs-meta: 12px;
  --ds-fs-eyebrow: 11px;
  --ds-fs-micro: 10.5px;

  /* --- Brand ----------------------------------------------------------- */
  --ds-energy: #EAF672;
  --ds-voltage: #4A52F2;
  --ds-accent: var(--ds-energy);

  /* --- Secondary palette (brand deck) --------------------------------- */
  --ds-alarm: #FF6A61;
  --ds-data: #160F3A;
  --ds-tech: #5A5D5B;
  --ds-led: #6DD9FD;
  /* MINT is not in the brand deck. It was added when the charts needed a
     fourth categorical hue and nothing in the palette occupied mint/teal —
     every other candidate was either a status colour or a near-duplicate of
     LED. Carries the full tint ramp so it is a palette member, not a
     chart-only colour. */
  --ds-mint: #7FD7B6;
  --ds-cloud: #EDEDE3;
  --ds-concrete: #000000; /* brand black ("Ordinary black", RGB 0,0,0) */

  /* --- Secondary tint ramps (brand deck — lightening steps from each base) */
  --ds-alarm-1: #FF7971; --ds-alarm-2: #FF8891; --ds-alarm-3: #FF9790; --ds-alarm-4: #FFA6A0; --ds-alarm-5: #FFB5B0; --ds-alarm-6: #FFC3C0; --ds-alarm-7: #FFD2D0; --ds-alarm-8: #FFE1DF; --ds-alarm-9: #FFF0EF;
  --ds-data-1: #2D274E; --ds-data-2: #453F61; --ds-data-3: #5C5775; --ds-data-4: #736F89; --ds-data-5: #8B879D; --ds-data-6: #A29FB0; --ds-data-7: #B9B7C4; --ds-data-8: #D0CFD8; --ds-data-9: #E8E7EB;
  --ds-tech-1: #6B6D6B; --ds-tech-2: #7B7D7C; --ds-tech-3: #8C8E8C; --ds-tech-4: #9C9E9D; --ds-tech-5: #ADAEAD; --ds-tech-6: #BDBEBD; --ds-tech-7: #CDCECE; --ds-tech-8: #DEDFDE; --ds-tech-9: #EFEFEF;
  --ds-led-1: #7CDDFD; --ds-led-2: #8AE1FD; --ds-led-3: #99E4FE; --ds-led-4: #A7E8FE; --ds-led-5: #B6ECFE; --ds-led-6: #C5F0FE; --ds-led-7: #D3F4FE; --ds-led-8: #E2F7FF; --ds-led-9: #F0FBFF;
  --ds-mint-1: #8CDBBD; --ds-mint-2: #99DFC5; --ds-mint-3: #A5E3CC; --ds-mint-4: #B2E7D3; --ds-mint-5: #BFEBDB; --ds-mint-6: #CCEFE2; --ds-mint-7: #D9F3E9; --ds-mint-8: #E5F7F1; --ds-mint-9: #F2FBF8;

  /* --- Surfaces & lines ----------------------------------------------- */
  /* Page canvas — the HTML prototype's base (the brand's black is --ds-concrete). */
  --ds-bg: #0a0d1a;
  --ds-bg-card: #160F3A;        /* solid card surface */
  --ds-bg-card-hover: #2D274E;
  /* Card "glass" surface — the original HTML prototype's card colour
     (#131729 / hover #181D34), kept slightly translucent so the ambient glow
     adds subtle depth. NOTE: not a brand palette colour — sourced from the
     prototype to match its component look. */
  --ds-surface: rgba(19, 23, 41, 0.85);
  --ds-surface-hover: rgba(24, 29, 52, 0.9);
  /* Large card background — the prototype's summary/table card surface: the
     navy (rgb 19,23,41) graded from solid at the top to translucent (0.6) at
     the bottom so the ambient page glows show through. Off-brand on purpose
     (matches the original HTML prototype, not the brand DATA purple). */
  --ds-surface-card: linear-gradient(180deg, #131729 0%, rgba(19, 23, 41, 0.6) 100%);
  /* Opaque version of the card navy — for floating surfaces that must not show
     content through them (dropdown menus, popovers). Matches the card colour. */
  --ds-surface-card-solid: #131729;
  /* The portal header's surface. The tab rail reuses this so the two read as
     one piece of chrome — shared rather than copied, because two literals
     drift the first time one of them is touched. */
  --ds-topbar-bg: rgba(8, 10, 22, 0.85);
  /* 20px padding + a 32px logo + 20px padding + the 1px bottom border. Shared
     because the tab rail sizes itself as "viewport minus the header" and a
     magic number in two files drifts the moment the header's padding changes. */
  --ds-topbar-h: 73px;
  --ds-border: rgba(255, 255, 255, 0.08);
  --ds-border-strong: rgba(255, 255, 255, 0.15);

  /* --- Text ------------------------------------------------------------ */
  --ds-text: #EDEDE3;
  --ds-text-dim: #9C9E9D;
  --ds-text-muted: #6B6D6B;

  /* --- Status (resolved) ---------------------------------------------- */
  --ds-alert: var(--ds-alarm);        /* #FF6A61 — brand ALARM */
  --ds-alert-soft: var(--ds-alarm-2); /* #FF8891 */
  --ds-warning: #F3A826;       /* amber — from the HTML prototype */
  --ds-warning-soft: #F5B84E;
  --ds-positive: #6CD474;      /* green — from the HTML prototype */
  --ds-positive-soft: #82DC89;

  /* --- Categorical series (charts) ------------------------------------- *
     One base per series plus a six-step ramp. The base colours a category
     (an area on the equipment chart); the ramp shades that category's own
     members when you drill into it, which is what keeps a drilled view
     reading as one family instead of six unrelated colours.

     Rules:
       - The base is always step 3, so there are two lighter steps above it.
       - Never a status colour. --ds-alert / --ds-warning / --ds-positive mean
         "something is wrong/right" on the same screens, and a filled series in
         one of them reads as a problem rather than a category. The set this
         replaced used amber #f59e0b and rose #f43f5e and did exactly that.
       - Series 3 and 4 ARE --ds-led and --ds-mint, declared by reference so
         they cannot drift. Series 1 and 2 sit a step off --ds-energy and
         --ds-voltage: close enough to read as brand, far enough that a series
         is not confused with an interactive affordance drawn in the real
         accent. */
  --ds-series-1: #DADF6E;          /* a step down from --ds-energy  */
  --ds-series-2: #9298FF;          /* a step up from --ds-voltage   */
  --ds-series-3: var(--ds-led);
  --ds-series-4: var(--ds-mint);
  --ds-series-5: #9B7FE0;          /* the fifth area on a bigger site */
  /* Slots 6-9 come from the designer's ten-area study. Four of its ten ramps
     were already ours byte-for-byte and a fifth was a near-twin of series-5,
     so only these four were genuinely new.
     Its other two -- an orange #F2A65A and a gold #C9A227 -- are deliberately
     NOT here. Measured against --ds-warning #F3A826 they sit at dE 21 and
     dE 18, where every shipped series is dE 34 or further from any status
     colour. A filled band in either reads as a warning rather than a
     category, which is the exact fault that made this palette necessary. The
     wrap below covers a tenth area without them.
     Slot order maximises the gap between ADJACENT slots (min dE 37), because
     areas are stacked largest-first so neighbouring slots are neighbouring
     bands. */
  --ds-series-6: #E86A9E;          /* pink   */
  --ds-series-7: #5BC8C0;          /* teal   */
  --ds-series-8: #7A8CA8;          /* slate  */
  --ds-series-9: #B08BFF;          /* violet */

  --ds-series-1-1: #F2F4CB; --ds-series-1-2: #E8EBA5; --ds-series-1-3: #DADF6E; --ds-series-1-4: #C3C955; --ds-series-1-5: #A7AD44; --ds-series-1-6: #8B9038;
  --ds-series-2-1: #D8DCFF; --ds-series-2-2: #B4BAFF; --ds-series-2-3: #9298FF; --ds-series-2-4: #7178FF; --ds-series-2-5: #5A63FF; --ds-series-2-6: #464FE6;
  --ds-series-3-1: #B7EFFF; --ds-series-3-2: #8DE4FE; --ds-series-3-3: #6DD9FD; --ds-series-3-4: #45BFE6; --ds-series-3-5: #2FA3CB; --ds-series-3-6: #1F87AB;
  --ds-series-4-1: #C8EEDE; --ds-series-4-2: #A3E3CB; --ds-series-4-3: #7FD7B6; --ds-series-4-4: #5CCBA1; --ds-series-4-5: #3FBF8F; --ds-series-4-6: #33A87B;
  --ds-series-5-1: #DCD2F7; --ds-series-5-2: #C3B3F1; --ds-series-5-3: #9B7FE0; --ds-series-5-4: #8468CF; --ds-series-5-5: #6E53B8; --ds-series-5-6: #5A41A0;
  --ds-series-6-1: #FBC6DB; --ds-series-6-2: #F49CC0; --ds-series-6-3: #E86A9E; --ds-series-6-4: #CE5285; --ds-series-6-5: #AC406C; --ds-series-6-6: #8B3155;
  --ds-series-7-1: #B9EDE9; --ds-series-7-2: #8CE0D9; --ds-series-7-3: #5BC8C0; --ds-series-7-4: #43ABA4; --ds-series-7-5: #338C86; --ds-series-7-6: #27706B;
  --ds-series-8-1: #C3CEDD; --ds-series-8-2: #9FAFC5; --ds-series-8-3: #7A8CA8; --ds-series-8-4: #63748E; --ds-series-8-5: #4F5E75; --ds-series-8-6: #3E4A5D;
  --ds-series-9-1: #DCCBFF; --ds-series-9-2: #C4ABFF; --ds-series-9-3: #B08BFF; --ds-series-9-4: #9670E6; --ds-series-9-5: #7B57C4; --ds-series-9-6: #6244A0;

  /* --- Radii ----------------------------------------------------------- */
  --ds-radius-sm: 8px;
  --ds-radius-md: 10px;
  --ds-radius-lg: 14px;
  --ds-radius-xl: 16px;
  --ds-radius-pill: 999px;

  /* --- Spacing scale --------------------------------------------------- */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-6: 24px;
  --ds-space-7: 28px;
  --ds-space-10: 40px;

  /* --- Client portal legacy names ------------------------------------- *
     The dark portal base templates reference these names directly. Defined
     here so a base can drop its own inline :root and rely on this file.
     --voltage-blue intentionally reconciles to the brand VOLTAGE
     (#747AF4 -> #4A52F2); every other value matches the portal's current one. */
  --electric-yellow: var(--ds-energy);   /* #EAF672 */
  --voltage-blue: var(--ds-voltage);     /* #4A52F2 (brand reconciliation) */
  --text-white: #ffffff;
  --text-gray: #9e9c9b;
  --bg-box-gray: #15191b;
  --mid-gray: #464a4a;
  --black: #000000;
  --midnight-blue: #121b38;
  --green: var(--ds-positive);           /* #6CD474 — fixes sites.html .target-green */
  --dark-box: var(--bg-box-gray);        /* #15191B — fixes settings_baseline/org_overview */

  /* --- Admin light theme names ---------------------------------------- *
     The Django admin (heliotec_admin.css) uses a light surface set under
     these names. Held here too so admin can later reference this one file.
     Distinct names from the dark --ds-* set, so both coexist with no clash. */
  --heliotec-energy: var(--ds-energy);
  --heliotec-tech: #444b4a;
  --heliotec-metal: #9b9a99;
  --heliotec-concrete: #5b5d5b;
  --heliotec-cloud: #ecece3;
  --heliotec-glass: #f7f7ef;
  --heliotec-sky: #ccdfda;
  --bg-primary: #ffffff;
  --bg-secondary: #fafbfc;
  --border-light: #e5e7eb;
  --border-medium: #d1d5db;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
}