/* ==========================================================================
   DriverLanding — Design Tokens
   Canonical source. Copy into each repo; do not fork values.

   Decisions this file implements:
     D1B  #0B1323 is the ground, #161E2E is the raised surface
     D2C  Roles on top of scales — components touch ONLY the role layer
     D3B  Radius 4 / 8 / 12 + pill
     D4B  Two named gradients, nothing else
     D7B  Palette applies to Home/Launchpad/Blueprint; the mechanics below
          (radius, motion, contrast rule) also apply to Core-Landing + Jobs
   ========================================================================== */

/* --------------------------------------------------------------------------
   LAYER 1 — RAW SCALES
   Four locked base colors. Every other value is a mix of them; nothing here
   was hand-picked. Do not add a hex to this file that is not a color-mix()
   of one of the four.
   -------------------------------------------------------------------------- */
:root {
  /* The four. These are the only literal hex values in the system. */
  --navy-500: #161E2E;
  --yellow-500: #F1B43D;
  --sky-500: #4CBFE3;
  --pale-yellow-500: #F6CC86;

  /* Navy scale */
  --navy-50: color-mix(in srgb, var(--navy-500) 10%, white);
  --navy-100: color-mix(in srgb, var(--navy-500) 22%, white);
  --navy-200: color-mix(in srgb, var(--navy-500) 38%, white);
  --navy-300: color-mix(in srgb, var(--navy-500) 55%, white);
  --navy-400: color-mix(in srgb, var(--navy-500) 72%, white);
  --navy-600: color-mix(in srgb, var(--navy-500) 92%, black);
  --navy-700: color-mix(in srgb, var(--navy-500) 85%, black);
  --navy-800: color-mix(in srgb, var(--navy-500) 65%, black);
  --navy-900: color-mix(in srgb, var(--navy-500) 45%, black);

  /* Sky scale */
  --sky-50: color-mix(in srgb, var(--sky-500) 10%, white);
  --sky-100: color-mix(in srgb, var(--sky-500) 22%, white);
  --sky-200: color-mix(in srgb, var(--sky-500) 38%, white);
  --sky-300: color-mix(in srgb, var(--sky-500) 55%, white);
  --sky-400: color-mix(in srgb, var(--sky-500) 72%, white);
  --sky-600: color-mix(in srgb, var(--sky-500) 92%, black);
  --sky-700: color-mix(in srgb, var(--sky-500) 85%, black);
  --sky-800: color-mix(in srgb, var(--sky-500) 65%, black);
  --sky-900: color-mix(in srgb, var(--sky-500) 45%, black);

  /* Yellow scale */
  --yellow-50: color-mix(in srgb, var(--yellow-500) 10%, white);
  --yellow-100: color-mix(in srgb, var(--yellow-500) 22%, white);
  --yellow-200: color-mix(in srgb, var(--yellow-500) 38%, white);
  --yellow-300: color-mix(in srgb, var(--yellow-500) 55%, white);
  --yellow-400: color-mix(in srgb, var(--yellow-500) 72%, white);
  --yellow-600: color-mix(in srgb, var(--yellow-500) 92%, black);
  --yellow-700: color-mix(in srgb, var(--yellow-500) 85%, black);
  --yellow-800: color-mix(in srgb, var(--yellow-500) 65%, black);
  --yellow-900: color-mix(in srgb, var(--yellow-500) 45%, black);

  /* Neutral scale — navy-biased on purpose. A pure grey (#334155, #303030,
     #888) reads as unconsidered next to this palette and visibly fights it.
     These replace every Tailwind slate value that leaked into launchpad.css. */
  --neutral-25: color-mix(in srgb, var(--navy-500) 4%, white);
  --neutral-50: color-mix(in srgb, var(--navy-500) 8%, white);
  --neutral-100: color-mix(in srgb, var(--navy-500) 14%, white);
  --neutral-200: color-mix(in srgb, var(--navy-500) 22%, white);
  --neutral-300: color-mix(in srgb, var(--navy-500) 35%, white);
  --neutral-400: color-mix(in srgb, var(--navy-500) 50%, white);
  --neutral-500: color-mix(in srgb, var(--navy-500) 65%, white);
  --neutral-600: color-mix(in srgb, var(--navy-500) 80%, white);
  --neutral-700: color-mix(in srgb, var(--navy-500) 92%, white);
  --neutral-900: var(--navy-500);

  /* Graphite scale — Blueprint's drafting board.
     Blueprint's identity is a drafting table: graph paper, bright blue rules,
     grey board. That grey is a real brand asset, so it gets one anchor literal
     (#303030, already the app's dominant surface) and a derived ladder — NOT
     five hand-picked greys (#2a2a2a, #333333, #3a3a3a, #404040) as it had.

     The value ladder is preserved exactly; what changes is --drafting-bias
     below, which mixes a little navy into every step so the board stops
     reading as pure neutral grey against the palette. Set it to 0% to get
     today's greys back precisely. */
  --graphite-500: #303030;
  --graphite-400: color-mix(in srgb, var(--graphite-500) 88%, black);    /* was #2A2A2A */
  --graphite-600: color-mix(in srgb, var(--graphite-500) 98.5%, white);  /* was #333333 */
  --graphite-700: color-mix(in srgb, var(--graphite-500) 95%, white);    /* was #3A3A3A */
  --graphite-800: color-mix(in srgb, var(--graphite-500) 92%, white);    /* was #404040 */
  --drafting-bias: 12%;

  /* Semantic — the only two colors in the system not derived from the four.
     Replaces #34d399 / #ef4444 (Tailwind) and #ffb4ab (Material). */
  --success-500: #4CAF7D;
  --danger-500: #E0553F;
  --success-surface: color-mix(in srgb, var(--success-500) 18%, var(--navy-500));
  --danger-surface: color-mix(in srgb, var(--danger-500) 18%, var(--navy-500));
}

/* --------------------------------------------------------------------------
   LAYER 2 — ROLE TOKENS  (D2C)
   This is the ONLY layer components are allowed to reference. If a component
   needs a color that is not here, the answer is a new role token, never a
   raw scale step and never a literal.

   D1B: the ground is #0B1323 (deeper than brand navy); the brand navy is the
   raised surface — the card/panel layer people actually look at.
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces, darkest to lightest. Five steps is the whole ladder — Home's
     Material export had seven and used two of them once each. */
  --surface-sunken: #060E1E;              /* wells, inset areas, code blocks */
  --surface-ground: #0B1323;              /* page background */
  --surface-panel: var(--navy-500);       /* sidebars and standing panels */
  --surface-raised: var(--navy-500);      /* cards, panels, nav — the brand navy */
  --surface-raised-high: #222A3B;         /* menus, popovers, hover on raised */
  --surface-elevated: #2D3546;            /* modals, the topmost layer */

  /* Text */
  --text: #FFFFFF;
  --text-muted: #D4C4AF;                  /* warm muted — pairs with yellow accent */
  --text-faint: #9C8F7B;
  --text-on-accent: var(--navy-500);      /* text sitting ON yellow or sky */

  /* Lines */
  --border: #2D3546;
  --border-strong: color-mix(in srgb, var(--sky-500) 30%, var(--border));

  /* Accent — remapped per app in LAYER 3. Never reference --yellow-500 or
     --sky-500 directly in a component; reference --accent. */
  --accent: var(--sky-500);
  --accent-hover: color-mix(in srgb, var(--accent) 90%, white);
  --accent-text: var(--sky-200);        /* the accent colour AS TEXT on dark */

  /* Action is separate from accent, and it is yellow everywhere.
       --accent  the app's structural identity: rules, wordmark, data, links.
                 Remapped per app.
       --action  the do-it color: primary buttons, focus rings, selection.
                 Yellow in all five apps — a driver should recognise the
                 button before they recognise the product.
     All three apps run both: Blueprint is sky-forward with yellow CTAs,
     Launchpad is yellow-forward with sky links and data. They never collapse
     into one another. Carrier theming overrides BOTH families at once — see
     carrier-theme.js. */
  --action: var(--yellow-500);
  --action-hover: color-mix(in srgb, var(--yellow-500) 90%, white);
  --action-text: var(--pale-yellow-500);   /* the action colour AS TEXT on dark */
  --text-on-action: var(--navy-500);       /* text ON a filled action surface */

  /* Glow shadows for action surfaces. Defined as whole tokens because
     Tailwind arbitrary values cannot contain spaces — `shadow-[var(--shadow-action)]`
     is the only clean way to reference a multi-part shadow from a utility. */
  --shadow-action: 0 4px 20px color-mix(in srgb, var(--action) 30%, transparent);
  --shadow-action-hover: 0 4px 25px color-mix(in srgb, var(--action) 50%, transparent);
  --shadow-accent-dot: 0 0 10px var(--accent);   /* live/status indicators */

  /* Semantic roles. The -text variants are lightened for use AS TEXT on a dark
     surface: --danger at full strength clears AA on the navy ground (4.9:1) but
     reads heavy for a line of error copy, and Material's convention of a
     separate light error tone was the right instinct even though its value
     (#ffb4ab) had drifted off-palette. Same hue, readable weight. */
  --success: var(--success-500);
  --success-text: color-mix(in srgb, var(--success-500) 70%, white);
  --danger: var(--danger-500);
  --danger-text: color-mix(in srgb, var(--danger-500) 70%, white);

  /* Tinted surfaces — a colored fill and its edge, for chips, badges, and
     inline alert panels. Launchpad was already reaching for these
     (`var(--accent-bg, …)`) but never defined them, so every call site carried
     its own fallback at 10%, 15%, or 30% and index.html used raw rgba(). One
     definition each, so a chip looks the same wherever it appears. */
  --accent-bg: color-mix(in srgb, var(--accent) 15%, transparent);
  --accent-border: color-mix(in srgb, var(--accent) 30%, transparent);
  --action-bg: color-mix(in srgb, var(--action) 15%, transparent);
  --action-border: color-mix(in srgb, var(--action) 30%, transparent);

  /* Rescue edge for filled controls. Transparent by default — the house
     colours already clear shape contrast against the ground. carrier-theme.js
     sets these when a company's brand colour is too close to the background to
     read as a shape (a near-black brand on navy), so the control keeps the
     carrier's exact colour and still has a visible boundary. Applied as an
     inset shadow, never a border, so it costs no layout. */
  --action-edge: transparent;
  --accent-edge: transparent;
  --danger-bg: color-mix(in srgb, var(--danger) 15%, transparent);
  --danger-border: color-mix(in srgb, var(--danger) 30%, transparent);
  --success-bg: color-mix(in srgb, var(--success) 15%, transparent);
  --success-border: color-mix(in srgb, var(--success) 30%, transparent);

  /* Data visualization. Kept separate from the semantic pair on purpose: these
     encode a measured value (coverage quality, map category), not an app state,
     and a chart legend needs steps that stay distinguishable from each other
     rather than matching the accent. All derived from the palette — Launchpad's
     candidate map had drifted to #4ade80 / #fbbf24 / #fb923c / #4dd4c4, four
     Tailwind-ish values chosen independently of the brand. */
  --viz-good: var(--success-500);
  --viz-warn: var(--yellow-500);
  --viz-poor: color-mix(in srgb, var(--yellow-500) 45%, var(--danger-500));
  --viz-area: var(--sky-500);

  /* Radius (D3B) — 4 / 8 / 12 + pill. Nothing else ships.
     Replaces the 12+ raw values in launchpad.css (3,4,5,6,8,9,10,12,20px). */
  --radius-sm: 4px;                       /* badges, inputs, small chips */
  --radius-md: 8px;                       /* buttons, cards, most things */
  --radius-lg: 12px;                      /* modals, page-level containers */
  --radius-pill: 999px;                   /* pills, avatars, toggles */

  /* Spacing — unchanged, already consistent across Home and Launchpad */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 64px;

  /* Type */
  --font-body: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;

  /* Gradients (D4B) — exactly two named gradients plus the shimmer family in
     motion.css. Any other gradient in a component is a review comment. */
  --gradient-ground: linear-gradient(135deg, var(--navy-500) 0%, var(--surface-ground) 100%);

  /* Grid / graph paper. One implementation; the two knobs below are remapped
     per app because the grid means different things in each: ambient texture
     on Home, the actual drafting board on Blueprint. */
  --grid-alpha: 5%;
  --grid-size: 40px;
  --grid-line: color-mix(in srgb, var(--sky-500) var(--grid-alpha), transparent);
  --gradient-grid: linear-gradient(var(--grid-line) 1px, transparent 1px),
                   linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
}

/* --------------------------------------------------------------------------
   LAYER 3 — PER-APP THEMES
   Apps differ by ROLE REMAP, not by new color. This is the whole payoff of
   D2C: a new app surface is a handful of reassignments, never a new hex.
   Set on <html> or <body>:  <body data-app="launchpad">
   -------------------------------------------------------------------------- */
[data-app="home"] {
  /* Balanced — sky for action, yellow reserved for the one CTA that matters */
  --accent: var(--sky-500);
  --accent-text: var(--sky-200);
}

[data-app="launchpad"] {
  /* Caution-tape energy. Note what this does NOT do: it does not remap --accent
     to yellow. Launchpad already runs a working two-accent system — yellow on
     every actionable control, light blue on links, status and data — and the
     caution-tape read comes from the warm text, the yellow action color, and
     the stripe motif, not from painting the structural accent yellow too.
     Collapsing them would flip ~77 sky-blue usages to yellow and lose the
     signal that distinguishes "do this" from "look at this". */
  --accent: var(--sky-500);
  --accent-text: #C2F0FF;                /* Launchpad's lighter blue for text */

  /* The warm cast is where the caution character actually lives. */
  --text-muted: #D4C4AF;
  --text-faint: #9C8F7B;
}

[data-app="blueprint"] {
  /* The drafting board. Sky-forward on a graphite ground: bright blue rules on
     a grey board is the brand, so Blueprint is the one app whose surfaces come
     from the graphite ladder rather than navy. The blue arrives as accent and
     as the graph paper, not as the surface. */
  --accent: var(--sky-500);
  --accent-hover: color-mix(in srgb, var(--sky-500) 90%, white);
  --accent-text: var(--sky-200);
  --text-muted: rgba(255, 255, 255, 0.5);
  --text-faint: rgba(255, 255, 255, 0.3);

  --surface-ground: color-mix(in srgb, var(--graphite-500) calc(100% - var(--drafting-bias)), var(--navy-500));
  --surface-panel: color-mix(in srgb, var(--graphite-400) calc(100% - var(--drafting-bias)), var(--navy-500));
  --surface-raised: color-mix(in srgb, var(--graphite-600) calc(100% - var(--drafting-bias)), var(--navy-500));
  --surface-raised-high: color-mix(in srgb, var(--graphite-700) calc(100% - var(--drafting-bias)), var(--navy-500));
  --surface-elevated: color-mix(in srgb, var(--graphite-800) calc(100% - var(--drafting-bias)), var(--navy-500));

  --border: rgba(255, 255, 255, 0.05);
  --border-strong: rgba(255, 255, 255, 0.15);

  /* Graph paper: tighter and slightly stronger than Home's ambient grid,
     because here it is the drafting surface, not a background texture. */
  --grid-alpha: 7%;
  --grid-size: 25px;
}

/* --------------------------------------------------------------------------
   LAYER 4 — CAUTION STRIPE  (Launchpad only, used sparingly)
   Dividers, empty states, an item about to expire. Never a full background,
   never a button fill. It is a wayfinding mark, not a texture.
   -------------------------------------------------------------------------- */
.dl-caution-stripe {
  height: 8px;
  border-radius: var(--radius-sm);
  background: repeating-linear-gradient(
    135deg,
    var(--yellow-500) 0 10px,
    var(--navy-500) 10px 20px
  );
}

/* --------------------------------------------------------------------------
   LAYER 5 — CARRIER THEMING HOOKS  (Launchpad)
   A carrier's brand color can land anywhere in the lightness range. These are
   set per-carrier at render time by the contrast helper — never hand-authored.

     --carrier-primary      the carrier's color, as given
     --carrier-on-primary   #FFFFFF or --navy-500, whichever clears 4.5:1
     --carrier-edge         hue-matched border, applied when the carrier color
                            is within ~8% lightness of the surrounding surface

   DriverLanding's own navy, yellow, and the caution stripe stay fixed in the
   surrounding chrome. Carrier colors theme THEIR dashboard surface only —
   never the Launchpad nav or wordmark.
   -------------------------------------------------------------------------- */
[data-carrier-themed] {
  --carrier-primary: var(--navy-500);
  --carrier-on-primary: #FFFFFF;
  --carrier-edge: color-mix(in srgb, var(--carrier-primary) 60%, var(--navy-500));
}

.dl-carrier-surface {
  background: var(--carrier-primary);
  color: var(--carrier-on-primary);
  border: 1px solid var(--carrier-edge);
  border-radius: var(--radius-md);
}