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