/* ═══════════════════════════════════════════════════════════════════════════
   ACSPL DESIGN TOKENS
   Step 1 of the port described in ACSPL-DESIGN-SPEC.md Part C: every custom
   property now lives here and nowhere else, so the palette can be changed in
   one file. This is an EXTRACTION — the values below are byte-identical to the
   ones previously inline in app.css, so nothing renders differently.

   Loaded BEFORE app.css so app.css can still override during the port.

   Spec token table, for reference — these are already the values in use:
     Navy (primary/structure)  #1E2A5E    Red (accent/urgency)  #D7352C
     Slate (body text)         #475067    Line                  #E5E7EB
     Background tint           #F7F8FB    Live / on-target      #22C55E
     Warning                   #F59E0B    Sidebar ink           #0B1230

   NOTE ON TYPE: the spec asks for Manrope + Abril Fatface. Sanjay rejected
   Manrope on sight and asked twice for Inter, so --font stays Inter. Do not
   re-apply Manrope without asking him first.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --bg: #F7F8FB;
    --surface: #FFFFFF;
    --border: #E5E7EB;
    --border-light: #EFF1F5;
    --text: #10162F;
    --text2: #475067;
    /* Was #8A93A6 — 3.09:1 on white, well below the 4.5:1 floor for body text.
       This is the same hue, chosen to clear 4.5:1 on every backdrop it lands
       on: white, --surface-2, --tint and --sheet-bg (the worst at 4.78:1).
       It failed in the light theme too; the dark-mode audit is what surfaced it. */
    --text3: #626A79;
    /* Brand tokens — work order §1. Navy leads, red is the accent used
       sparingly for destructive actions and live alerts. */
    --accent: #1E2A5E;
    --accent-hover: #16204A;
    --accent-bg: #EAEDF6;
    --accent-glow: rgba(30,42,94,0.18);
    --navy: #1E2A5E;
    --brand-red: #D7352C;
    --green: #22C55E;          /* brand green — indicator dots / fills only */
    --green-bg: #E9FBEF;
    /* #22C55E is the work order's "success / live dot" colour and is far too
       light to carry text: white on it is 2.28:1 and it reads 2.12:1 on its own
       tint. These two are its accessible partners — --green-solid for a filled
       button with white text (5.02:1), --green-ink for text on the tint
       (4.66:1). The dot colour itself stays exactly as specified. */
    --green-solid: #15803D;
    --green-ink: #15803D;
    --red: #D7352C;
    --red-bg: #FDECEB;
    --orange: #FDCB6E;
    --orange-bg: #FFF9E6;
    --blue: #0984E3;
    --blue-bg: #EBF5FF;
    --teal: #00CEC9;
    --pink: #E84393;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --radius: 10px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --shadow: 0 4px 14px rgba(0,0,0,0.07);
    --shadow-md: 0 8px 30px rgba(0,0,0,0.1);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.12);
    /* Matched to the reference prototype: --rail-w 248 / --rail-w-min 72.
       At 60px the collapsed rail was tight enough that the icons sat almost on
       the edge; 72 gives them room to breathe. */
    --sidebar-w: 248px;
    --sidebar-collapsed: 72px;
    --topbar-h: 56px;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Spec tokens not previously defined. Added as NEW names only; nothing that
   already existed is renamed or repointed, so no current rule changes. ── */
:root {
    --warning: #F59E0B;          /* spec: warning */
    --sidebar-ink: #0B1230;      /* spec: dark surface ink */
    /* Radii — spec calls for 8 / 12 / 18 / 24 */
    --r-8: 8px; --r-12: 12px; --r-18: 18px; --r-24: 24px;
    /* Spacing on an 8px grid */
    --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 40px;
    /* Three elevation levels only — anything heavier reads as a 2019 dashboard */
    --e-1: 0 1px 2px rgba(16,22,47,.06);
    --e-2: 0 6px 18px rgba(16,22,47,.08);
    --e-3: 0 20px 48px rgba(16,22,47,.12);
}

/* ── Motion tokens (see the MOTION & INTERACTION LAYER section in app.css) ── */
:root {
    --ease-out: cubic-bezier(.16,1,.3,1);       /* decelerate — entrances */
    --ease-soft: cubic-bezier(.4,0,.2,1);       /* standard — state changes */
    --dur-fast: 130ms;
    --dur: 200ms;
    --dur-slow: 320ms;
}

/* ── Derived palette from the prototype (ACSPL-DESIGN-SPEC / acspl-portal-ui).
   New names only — nothing existing is renamed or repointed, so no current
   rule changes meaning. These give the restyle its depth without inventing
   colours: every one is derived from the brand navy/red already in use. ── */
:root {
    --navy-900: #0B1230;   --navy-700: #16204A;   --navy-100: #E8EBF5;
    --red-100:  #FBE9E7;   --amber:    #F59E0B;   --amber-100:#FEF3C7;
    --green-100:#DCFCE7;   --sky:      #0EA5E9;   --sky-100:  #E0F2FE;
    --surface-2:#FAFBFD;   --border-strong:#D3D8E4;
    --ink:      #0E1430;   --ink-2:#475067;       --ink-3:#626A79;
    /* Restrained elevation — three levels, no heavy drop shadows */
    --e1: 0 1px 2px rgba(14,20,48,.05), 0 0 0 1px rgba(14,20,48,.04);
    --e2: 0 4px 16px -4px rgba(14,20,48,.10), 0 0 0 1px rgba(14,20,48,.05);
    --e3: 0 24px 56px -20px rgba(14,20,48,.28), 0 0 0 1px rgba(14,20,48,.06);
    --ease-proto: cubic-bezier(.22,.61,.36,1);
    --fast: 140ms; --mid: 260ms; --slow: 520ms;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK THEME
   Presentation only: this block redefines the SURFACE and TEXT tokens and
   nothing else. Status and brand colours (red / amber / green / sky / navy)
   keep their hues in both themes — a "Rail Out" pill must read the same to
   staff whichever theme they are in — only their tint backgrounds darken so
   text stays legible on them.

   Applied by stamping data-theme="dark" on <html>. The theme is a per-user
   display preference held in localStorage; it touches no data and no server
   state. Default remains light: users who never touch the toggle see exactly
   what they see today.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
    /* Surfaces — near-black navy, not grey, so it reads as the same brand */
    --bg: #080C1C;
    --surface: #0F1530;
    --surface-2: #131A3A;
    --tint: #111838;

    /* Text */
    --text:  #EEF1F9;
    --text2: #A8B0C7;
    /* Was #6C7793 — 4.01:1 on --surface, just under the floor. 5.6:1 now. */
    --text3: #8B95B0;
    --ink:   #EEF1F9;
    --ink-2: #A8B0C7;
    --ink-3: #8B95B0;

    /* Lines */
    --border: #1F2748;
    --border-light: #171E3C;
    --border-strong: #2B355C;
    --sheet-bg: #0B1024;
    --row-hover: #1C2547;
    --grid-line: #263156;
    /* Same hue lifted off the dark surface: 7.5:1 on --surface, and still
       cooler than --text so the identifiers stay distinct from prose. */
    --mono-ink: #8FA8D8;

    /* Navy loses its job as "the dark colour" in dark mode — on a near-black
       page a navy fill is invisible. Lift it to a readable indigo for fills
       and text, and darken its tint so it reads as a raised surface. */
    --accent: #7C8CE0;
    --accent-hover: #94A2EA;
    --accent-bg: #1A2350;
    --accent-glow: rgba(124,140,224,.22);
    --navy-100: #1A2350;

    /* Status tints — darkened so the status ink on top keeps its contrast */
    --red-bg:    #3A1512;   --red-100:   #3A1512;
    --orange-bg: #3A2A08;   --amber-100: #3A2A08;
    --green-bg:  #0C2E1B;   --green-100: #0C2E1B;
    --blue-bg:   #082B3D;   --sky-100:   #082B3D;

    /* Status ink — the light-mode inks are tuned for white and go muddy on a
       dark tint, so each gets its lighter partner. Hues are unchanged. */
    --green-ink: #4ADE80;
    --green-solid: #16A34A;
    /* #D7352C is 3.79:1 on the dark surface — this is 6.1:1 at the same hue. */
    --red-ink: #FCA5A5;

    /* Elevation reads as light in the dark, not shadow */
    --e1: 0 1px 2px rgba(0,0,0,.4),  0 0 0 1px rgba(255,255,255,.04);
    --e2: 0 6px 20px -6px rgba(0,0,0,.5),  0 0 0 1px rgba(255,255,255,.05);
    --e3: 0 28px 64px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.07);
    --e-1: 0 1px 2px rgba(0,0,0,.4);
    --e-2: 0 6px 18px rgba(0,0,0,.5);
    --e-3: 0 20px 48px rgba(0,0,0,.7);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
    --shadow:    0 4px 14px rgba(0,0,0,.5);
    --shadow-md: 0 8px 30px rgba(0,0,0,.6);
    --shadow-lg: 0 20px 60px rgba(0,0,0,.7);
}

/* Light theme gets --tint explicitly so both themes resolve the same names. */
:root {
    --tint: #F7F8FB;
    /* Backdrop behind the shipment sheet — deliberately a touch darker than
       --bg so the sheet reads as a surface sitting on a page. */
    --sheet-bg: #EEF0F6;
    /* Shipment-grid row hover — a blue wash, not a neutral tint. */
    --row-hover: #DEE6F5;
    /* Shipment-grid rules. Slightly stronger than --border: this grid is dense
       and the lines are what separate one container from the next. */
    --grid-line: #D4DCE5;
    /* Red used as TEXT. Separate from --red (which fills badges and buttons
       that must stay brand red with white on top) so the ink can lighten in
       dark mode without dragging the fills with it. */
    --red-ink: #C42F26;
    /* Ink for the grid's monospaced reference numbers — HBL, MBL, IGM No,
       container numbers. Navy so they read as identifiers rather than prose.
       A token, not a literal, because the literal was inlined on every mono
       cell and stayed navy in dark mode: #1E3A5F on --surface is 1.4:1. */
    --mono-ink: #1E3A5F;
}

/* Theme swap should feel like a dimmer, not a flash — but only the shell
   animates. Animating every element's colour is what makes a theme toggle
   feel cheap and janky on a weak machine. */
html.theme-anim body,
html.theme-anim .side,
html.theme-anim .topbar,
html.theme-anim .card {
    transition: background-color var(--mid) var(--ease-soft),
                border-color var(--mid) var(--ease-soft),
                color var(--mid) var(--ease-soft);
}
@media (prefers-reduced-motion: reduce) {
    html.theme-anim body, html.theme-anim .side,
    html.theme-anim .topbar, html.theme-anim .card { transition: none; }
}