/* tokens.css — Design tokens for enroute.delivery
 * Single source of truth for brand colors, typography, spacing.
 * Imported before any page-specific CSS. */

:root {
  /* ===== Brand ============================================ */
  --brand:         #00AA3D;
  --brand-hover:   #009335;
  --brand-press:   #00782B;
  --brand-soft:    #E5F8EC;

  /* ===== Ink (neutrals) =================================== */
  --ink-900: #0A0D0B;
  --ink-800: #161A18;
  --ink-700: #232825;
  --ink-600: #333A35;
  --ink-500: #4A524D;
  --ink-400: #6B756F;
  --ink-300: #9AA39D;
  --ink-200: #C9D0CB;
  --ink-100: #E6EAE7;
  --ink-50:  #F4F6F4;

  /* ===== Surfaces ========================================= */
  --paper:   #FFFFFF;
  --canvas:  #FAFBF9;

  /* ===== Status =========================================== */
  --error:   #ff8a8e;        /* on dark */
  --error-on-light: #E5484D;

  /* ===== Type ============================================= */
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  /* Type scale — the design system's own (project/colors_and_type.css). The
     shell's copy (fields, hints, buttons, banners) runs at --text-sm; --text-md
     is the design's body default. Added 2026-08-31 so a stylesheet can name a
     body size without writing a pixel value. */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  /* NOT a scale step — a functional floor. iOS Safari zooms the viewport when a
     focused text control computes under 16px, and then stays zoomed and pans, so
     a touch device's form fields have to clear it whatever the type scale says.
     Named for the job rather than as a size so it cannot be reached for as
     "the 16px one" in body copy. */
  --text-field-touch: 16px;

  /* ===== Radii ============================================ */
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  16px;
  --r-pill: 9999px;

  /* ===== Spacing (4-px base) ============================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  22px;
  --space-6:  28px;
  --space-7:  36px;
  --space-8:  44px;
  --space-9:  48px;
  --space-10: 64px;

  /* ===== Motion =========================================== */
  --dur-fast: 80ms;
  --dur-base: 150ms;
  --dur-slow: 280ms;

  /* ===== Easing scale (front-end-framework SP1) =============
     The five canonical timing-function names (frontend-contract "Canonical
     tokens"). --ease-out KEEPS the value shell.css shipped since the V05
     port — the declaration moved here and the shell copy was deleted in the
     same change, so tokens.css stays the single app-wide source
     (test_css_token_single_source) with zero visual change. */
  --ease-linear:  linear;
  --ease-standard: ease;
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);

  /* ===== Z-index scale (front-end-framework SP1) ============
     The tree's existing rungs, named — every value is a rung that already
     exists, so no stacking relation changes by declaring these. The scale is
     non-decreasing, NOT strictly ascending: --z-toast ties --z-drawer today
     and the tie is preserved (renumbering would change stacking, which the
     spec forbids). Consumers migrate onto these names in SP1b; sub-rungs use
     calc() offsets and the remaining exceptions live in the z-index ledger
     (architecture §6). */
  --z-base:     0;
  --z-sticky:   25;
  --z-header:   30;
  --z-floating: 60;
  --z-popover:  65;
  --z-scrim:    70;
  --z-sheet:    75;
  --z-drawer:   90;
  --z-toast:    90;
  --z-skip-link: 100;
  --z-menu:     120;
  --z-drag:     200;
  --z-dialog:   1000;

  /* ========================================================
     DESIGN-SYSTEM TOKENS (Claude Design re-skin)
     Full --enroute-* scales + semantic aliases consumed by the
     .app-* and .chip component classes (components.css).
     Values reconciled against the canonical
     docs/design-system/project/colors_and_type.css and the
     wireframe export :root. Existing tokens above are kept;
     these are additive.
     ======================================================== */

  /* ----- Brand green ----- */
  --enroute-green-50:  #E5F8EC;
  --enroute-green-100: #BFEFD0;
  --enroute-green-200: #8AE2AB;
  --enroute-green-300: #4FD083;
  --enroute-green-400: #1FBE63;
  --enroute-green-500: #00AA3D;   /* PRIMARY */
  --enroute-green-600: #009335;
  --enroute-green-700: #00782B;
  --enroute-green-800: #005C21;
  --enroute-green-900: #003E16;

  /* ----- Ink (neutrals) ----- */
  --enroute-ink-50:  #F4F6F4;
  --enroute-ink-100: #E6EAE7;
  --enroute-ink-200: #C9D0CB;
  --enroute-ink-300: #9AA39D;
  --enroute-ink-400: #6B756F;
  --enroute-ink-500: #4A524D;
  --enroute-ink-600: #333A35;
  --enroute-ink-700: #232825;
  --enroute-ink-800: #161A18;
  --enroute-ink-900: #0A0D0B;     /* PRIMARY INK */

  /* ----- Accents: amber ----- */
  --enroute-amber-50:  #FEF6E5;
  --enroute-amber-100: #FCEDCB;
  --enroute-amber-200: #F7D88A;
  --enroute-amber-500: #F4A923;
  --enroute-amber-800: #6B4A0F;

  /* ----- Accents: cobalt ----- */
  --enroute-cobalt-50:  #EEF2FF;
  --enroute-cobalt-100: #DCE5FF;
  --enroute-cobalt-200: #B8C8FF;
  --enroute-cobalt-500: #2C5BFF;
  --enroute-cobalt-600: #1E45D1;
  --enroute-cobalt-700: #173399;
  --enroute-cobalt-800: #0F2266;

  /* ----- Accents: rose ----- */
  --enroute-rose-50:  #FCE9E9;
  --enroute-rose-100: #FCE4E4;
  --enroute-rose-200: #F5B7B7;
  --enroute-rose-400: #ED6F73;
  --enroute-rose-500: #E5484D;
  --enroute-rose-600: #C8323A;
  --enroute-rose-700: #8B1F26;

  /* ----- Accents: orange (#32 missing-file-identification) -----
     A true orange ramp for the MIDDLE missing-docs severity (2 docs missing),
     which sits between amber (1 / yellow) and rose (3+ / red). Amber and rose
     were already owned (gantry advisory / emergency + deleted), and the palette
     had no orange — so this is the dedicated mid tone the user approved
     (2026-06-22). 100 = light tint, 800 = dark ink (≈ 8:1 on the tint, AA). */
  --enroute-orange-100: #FCE3C7;
  --enroute-orange-800: #8A3D02;

  /* ----- Accents: teal -----
     GAP FIX: .chip.s-transit references these but the wireframe
     export never defines them. Values from colors_and_type.css. */
  --enroute-teal-500: #14B6A6;
  --enroute-teal-100: #CDF1ED;
  /* ledger-placement (#4): the readable text end of the teal ramp, needed by the
     `pricing request` work-queue chip. 6.70:1 on --enroute-teal-100 (AA large +
     AA normal); do not lighten without re-checking against that tint. */
  --enroute-teal-800: #0A5A52;

  /* ----- Accents: violet (transporter role) -----
     Internal (cobalt) and client (amber) role colours are tokenised;
     the transporter role pill colour was a duplicated literal. */
  --enroute-violet-100: #E6DDFF;
  --enroute-violet-700: #4A2E99;

  /* ----- Surfaces ----- */
  --bg-canvas: #FAFBF9;
  --bg-paper:  #FFFFFF;
  --bg-sunken: #F2F4F1;

  /* ----- Semantic: foreground ----- */
  --fg-1: var(--enroute-ink-900);  /* primary text */
  --fg-2: var(--enroute-ink-600);  /* secondary text */
  /* a11y-visual-03: tertiary text was ink-400 #6B756F — 4.77:1 on white paper
     but only 3.94:1 on the warm canvas --page-bg #E8EAE6, where page intros /
     dashboard meta render it directly. ink-500 #4A524D computes 8.06:1 on
     white and 6.66:1 on the canvas — the smallest palette step that clears
     AA 4.5:1 on BOTH surfaces. Darker = more contrast for every consumer, so
     no knock-on regressions. */
  --fg-3: var(--enroute-ink-500);  /* tertiary / labels */
  --fg-4: var(--enroute-ink-300);  /* disabled / hints */
  /* ----- Semantic: borders ----- */
  --border-1: rgba(10, 13, 11, 0.08);  /* hairline */
  --border-2: rgba(10, 13, 11, 0.14);  /* default */
  --border-3: rgba(10, 13, 11, 0.24);  /* strong */

  /* ----- Type (mono companion to --font-sans above) ----- */
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ----- Radii (design-system scale) ----- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  /* xl: hero surfaces (welcome modal dialog). Same value as the original
     --r-lg alias — added to the design-system scale so new work never
     reaches back for the legacy alias. */
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ----- Shadows ----- */
  --shadow-sm: 0 1px 2px rgba(10,13,11,0.06), 0 1px 1px rgba(10,13,11,0.04);
  --shadow-md: 0 6px 14px -4px rgba(10,13,11,0.10), 0 2px 4px rgba(10,13,11,0.04);
  /* De-facto card elevation, previously a literal repeated across the enr layer. */
  --shadow-card: 0 1px 1px rgba(10,13,11,0.03);
  /* xl: floating hero elevation (welcome modal dialog) — ink-900-derived like
     the rest of the ramp, one long soft layer + one tight contact layer. */
  --shadow-xl: 0 24px 56px -16px rgba(10,13,11,0.22), 0 8px 20px -10px rgba(10,13,11,0.10);

  /* ----- Focus ring (always brand-green) -----
     a11y-code-14 / a11y-visual-06: the previous single soft layer
     (0 0 0 3px rgba(0,170,61,0.35)) composites to #A6E1BB on white = 1.48:1 —
     far below the 3:1 non-text minimum (WCAG 1.4.11) — and ~10 light-surface
     controls rely on this ring ALONE. Now a 2px white separator + 2px solid
     green-700 ring: the box-shadow equivalent of `outline: 2px solid
     green-700; outline-offset: 2px`. Computed: green-700 #00782B on white
     5.64:1, on the warm canvas #E8EAE6 4.66:1; on dark ink-900 chrome the
     WHITE separator carries it at 19.5:1 — ≥3:1 on every surface, whichever
     layer contrasts. */
  --focus-ring: 0 0 0 2px var(--bg-paper), 0 0 0 4px var(--enroute-green-700);

  /* ----- Semantic: primary CTA fill (a11y-visual-02) -----
     The 13–14px/700 white CTA labels are "normal" text under WCAG (large-bold
     starts ≈18.7px), so AA needs ≥4.5:1. Computed: white on green-500 #00AA3D
     = 3.08:1 (fail), on green-600 #009335 = 4.02:1 (still fail), on green-700
     #00782B = 5.64:1 (pass). Hover steps DARKER to green-800 (8.23:1) so the
     hover state can never regress below the rest state. Consumed by
     .btn--primary, .hf-hbtn, .m-fab, .od-rail__btn--primary,
     .app-btn--primary, .skip-link, the active Select-Orders toggle and the
     login submit. */
  --cta-bg:       var(--enroute-green-700);
  --cta-bg-hover: var(--enroute-green-800);

  /* ----- Avatar chip (account-menu feat) -----
     The sidebar account avatar is an initials chip with the brand green→teal
     diagonal gradient. The white initials on this fill are decorative
     (aria-hidden); the accessible identity is the adjacent name text. Tokenised
     so the one gradient is reused, never a literal. */
  /* ----- Ink-surface foreground + the phone sheet's lift (price-book SP10) -----
     Two literals the price-book redesign carried in raw: white ink on the
     ink-900 / green-700 fills it uses for the active filter pill, the filter
     count badge and the toast, and the upward shadow under the ≤640 filter
     sheet (the only sheet that lifts from the bottom edge, so --shadow-md /
     --shadow-xl both cast the wrong way). White on ink-900 #0A0D0B is 19.5:1
     and on green-700 #00782B 5.64:1 — both clear AA for the 10.5–13px/700
     labels that consume it. Also 17.4:1 on --enroute-ink-800 #161A18. DO NOT
     use it on a tint: green-500 is 3.08:1 and fails AA.

     fuel-terms-book independently added an identical token as `--fg-on-dark`
     (same #FFFFFF, same role, same measurements) because the two redesigns were
     built in ignorance of each other; git merged both without a conflict since
     they sat on different lines. JJ ruled on 2026-08-26 that this spelling wins
     — it names the colour family it pairs with (--enroute-ink-*). */
  --fg-on-ink: #FFFFFF;
  --shadow-sheet: 0 -12px 40px rgba(10,13,11,0.28);

  --avatar-gradient: linear-gradient(135deg, var(--enroute-green-500), var(--enroute-teal-500));
  --avatar-fg: #FFFFFF;   /* initials colour; decorative (chip is aria-hidden) */

  /* ----- Emergency / urgent badge (#31 SP5) -----
     The dedicated "Urgent" marker (.od-emergency-badge) — a SIBLING of the
     status pill, never an s-* pill modifier (urgency and lifecycle are
     orthogonal). Rose (higher-severity) rather than amber, which is already
     owned by .od-doc__badge for gantry-mismatch advisories. rose-100 fill +
     rose-700 ink is the same pair as .od-doc__badge--deleted and clears AA on
     both the paper (--bg-1) and canvas (--bg-2) surfaces (rose-700 #8B1F26 on
     rose-100 #FCE4E4 ≈ 8.6:1). */
  --emergency-bg: var(--enroute-rose-100);
  --emergency-fg: var(--enroute-rose-700);
  /* finance-tracking: order-list per-row finance status dots. On = a filled
     green dot (paid / captured); off = a hollow muted ring (pending). */
  --fin-dot-on:  var(--enroute-green-600);
  --fin-dot-off: var(--enroute-ink-300);

  /* ----- Missing-document indicator (#32 missing-file-identification) -----
     The internal order-list "missing required documents" icon (.od-missing-docs),
     a SIBLING of the .st-pill, severity-graded by how many required docs the row
     is missing: 1 = warn (yellow/amber), 2 = mid (orange), 3+ = danger (red).
     Light tint + dark ink (the .od-emergency-badge / .od-doc__badge model) so the
     hue is distinguishable AND the glyph clears WCAG 1.4.11 (3:1, non-text
     graphic) on both --bg-1 (paper) and --bg-2 (canvas). The icon's PRESENCE,
     not its hue, carries the meaning (the tooltip names the docs) — colour is
     supplementary (spec §5 a11y). */
  --missing-docs-warn-bg: var(--enroute-amber-100);
  --missing-docs-warn-fg: var(--enroute-amber-800);
  --missing-docs-mid-bg: var(--enroute-orange-100);
  --missing-docs-mid-fg: var(--enroute-orange-800);
  --missing-docs-danger-bg: var(--enroute-rose-100);
  --missing-docs-danger-fg: var(--enroute-rose-700);

  /* ----- Draft order state (draft-orders, ADR 0046) -----
     The pre-placement "Draft" pill/chip — a muted, DASHED treatment reading as
     "provisional, not yet live", distinct from the neutral done bucket. ink-100
     fill + ink-700 ink clears AA (same neutral pair as .st-pill.s-invoiced); the
     dashed ink-300 border carries the "draft" meaning independent of hue (a11y:
     shape, not colour, is load-bearing). Reused by BOTH .st-pill.s-draft (order
     list) and .hf-chip.s-draft (calendar chip) so mobile.js needs no builder
     change — it is a modifier on the existing pill/chip, not a new sub-element. */
  --draft-bg: var(--enroute-ink-100);
  --draft-fg: var(--enroute-ink-700);
  --draft-border: var(--enroute-ink-300);

  /* ----- Generic hyperlink colour (F023) -----
     Brand-green link, NOT cobalt. Uses green-700 (--brand-press) rather than
     the green-500 brand fill because green-500 on a light surface fails AA for
     normal-size body text (~3:1); green-700 (#00782B) clears ~5.7:1. Scoped to
     generic in-content links only — status pills, nav and buttons keep their
     own colours. */
  --link:       var(--enroute-green-700);
  --link-hover: var(--enroute-green-800);
}

/* ::selection in brand. Platform review A4: no forced color — white-on-25%-green
   was 1.32:1 on light surfaces; the inherited ink stays legible. */
::selection { background: rgba(0,170,61,0.25); }

/* a11y-code-08 (WCAG 2.3.3): global reduced-motion kill-switch. The UI
   animates (drawer slides, scrim fades, FAB reveal, .seg/.odt transforms,
   flatpickr's calendar) with no prefers-reduced-motion handling anywhere.
   Durations collapse to 0.01ms instead of `none`/0 so transitionend /
   animationend events still fire and JS that waits on them keeps working.
   Lives in tokens.css because it is the one stylesheet EVERY page loads
   (app shell and login alike). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}