/* =============================================================================
   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;
  --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;

  /* --- 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;
  --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;

  /* --- 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;
}