/* ============================================================
   HaulIQ — Midnight Signal
   Semantic design tokens. Single source of truth for the palette.

   Derived from the V1C landing concept: near-black canvas, bone
   text, acid-lime signal. Token names match the vocabulary the
   dashboard already uses (--bg / --surface / --text / --brand)
   so every page speaks the same language.

   Pages must consume these semantic tokens, never raw hex, so the
   whole site can be re-themed from this file alone.
   ============================================================ */

:root {
  /* ---- Canvas & surfaces ---------------------------------- */
  --bg:            #0E0F11;  /* page canvas                    */
  --surface:       #17181C;  /* cards, inputs, panels          */
  --surface-sunk:  #121317;  /* recessed areas, table stripes  */
  --surface-dark:  #08090A;  /* sidebars, hero & footer blocks */
  --surface-raise: #1E1F24;  /* hover state on a surface       */
  --sidebar-bg:    #08090A;  /* app chrome (dashboard)         */

  /* ---- Lines ---------------------------------------------- */
  --border:        #26272C;
  --border-strong: #34363C;

  /* ---- Type ----------------------------------------------- */
  --text:          #EFEDE7;  /* primary — 16.4:1 on --bg       */
  --text-muted:    #A8A59D;  /* secondary — 7.9:1              */
  --text-faint:    #918E86;  /* tertiary — 5.8:1, AA on every
                                surface incl. --brand-soft     */
  --text-invert:   #0E0F11;  /* on --brand or --text fills     */

  /* ---- Brand: acid lime ----------------------------------- */
  --brand:         #C3F53C;  /* 13.6:1 on --bg                 */
  --brand-hover:   #D2FF5E;
  --brand-press:   #AEE02B;
  --brand-soft:    #1F2A0C;  /* tinted fill / focus glow       */
  --brand-ink:     #4E6B0A;  /* lime legible on LIGHT ground   */
  /* Accent as TEXT. On the dark ground that is the lime itself;
     on paper the lime is ~1.3:1, so light mode swaps this for a
     deepened hue. Use --brand for fills, --brand-text for type. */
  --brand-text:    var(--brand);

  /* ---- Interaction washes ---------------------------------
     Lifted out of the pages so a hover doesn't paint white on
     white once the canvas flips.                              */
  --hover-wash:    rgba(255,255,255,.06);
  --nav-shadow:    0 10px 34px rgba(0,0,0,.46);
  --nav-shadow-lg: 0 14px 42px rgba(0,0,0,.62);

  /* ---- Status --------------------------------------------- */
  --ok:      #6FCF7F;  --ok-soft:      #0F2113;
  --warn:    #F0B44A;  --warn-soft:    #2A1F08;
  --danger:  #FF7060;  --danger-soft:  #2B1310;
  --info:    #5AC8E0;  --info-soft:    #0B2129;
  --neutral: #A8A59D;  --neutral-soft: #1C1D22;
  /* Type sitting ON a solid status fill. Not the same as --text-invert:
     the status hues are LIGHT on midnight (dark ink reads) but DARK on
     paper (light ink reads), so this one flips and --text-invert doesn't. */
  --on-status: var(--text-invert);

  /* ---- Radii ---------------------------------------------- */
  --r-sm:   6px;
  --r-md:  10px;
  --r-pill: 999px;

  /* ---- Elevation ------------------------------------------
     Dark UI reads depth from light, not shadow — these stay
     subtle and lean on the border tokens for definition.      */
  --shadow-1: 0 1px 2px rgba(0,0,0,.40);
  --shadow-2: 0 4px 14px rgba(0,0,0,.50);
  --shadow-brand: 0 6px 20px rgba(195,245,60,.14);

  /* ---- Spacing -------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px;

  /* ---- Typography ----------------------------------------- */
  --font-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-body:    'Archivo', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --ease: cubic-bezier(.4,0,.2,1);
}

/* Dark canvas needs light form controls and scrollbars, or the
   browser paints its default light chrome straight through. */
:root { color-scheme: dark; }

/* ============================================================
   DAYLIGHT — the light half of the switch.

   Same semantic names, warm-paper ground rather than a clinical
   white; the site's type is a bone/ink pairing and pure #FFF
   canvas makes it read cold. Only values move here, so any page
   built on tokens re-themes for free.

   The lime survives as the signal accent but only ever as a
   FILL. As type it drops to --brand-ink, the same hue carried to
   a weight that holds up on paper.
   ============================================================ */
[data-theme="light"] {
  --bg:            #F4F2EE;  /* warm paper                     */
  --surface:       #FFFFFF;  /* cards lift off the canvas      */
  --surface-sunk:  #EAE7E1;
  --surface-dark:  #E4E0D8;  /* deep blocks invert to the top  */
  --surface-raise: #EDEAE4;
  --sidebar-bg:    #FFFFFF;

  --border:        #D8D4CC;
  --border-strong: #BAB5AB;

  --text:          #16161A;  /* 15.8:1 on --bg                 */
  --text-muted:    #4B4A46;  /* 8.9:1                          */
  --text-faint:    #67655E;  /* 5.6:1                          */
  --text-invert:   #14180A;  /* stays dark — only sits on lime */

  --brand:         #C3F53C;  /* fills only                     */
  --brand-hover:   #B7EB26;
  --brand-press:   #A3D316;
  --brand-soft:    #EDF8CF;
  --brand-ink:     #3F5A08;
  --brand-text:    var(--brand-ink);  /* 7.4:1 on --bg         */

  --ok:      #1E7A32;  --ok-soft:      #E3F3E6;
  --warn:    #8A5A00;  --warn-soft:    #FAEFD8;
  --danger:  #B32A1C;  --danger-soft:  #FBE4E1;
  --info:    #0F6B80;  --info-soft:    #DFF1F6;
  --neutral: #4B4A46;  --neutral-soft: #EAE7E1;
  --on-status: #FFFFFF;  /* status hues are dark on paper */

  --shadow-1: 0 1px 2px rgba(22,22,26,.07);
  --shadow-2: 0 4px 14px rgba(22,22,26,.10);
  --shadow-brand: 0 6px 20px rgba(122,164,10,.26);

  --hover-wash:    rgba(22,22,26,.055);
  --nav-shadow:    0 10px 30px rgba(22,22,26,.10);
  --nav-shadow-lg: 0 14px 38px rgba(22,22,26,.15);

  color-scheme: light;
}

::selection { background: var(--brand); color: var(--text-invert); }