/* ==========================================================================
   e3-tokens.css — E3 Center design tokens, hand-derived for FleetModel
   --------------------------------------------------------------------------
   SOURCE OF TRUTH: /Users/jianhern/Developer/E3Website/tokens/e3.tokens.json
   (W3C Design Tokens format, meta.version 0.1.0) plus the recipes in
   E3Website/DESIGN_RULES/*.md.

   That repo builds its CSS with build_tokens.py; we cannot run it here, so
   this file is a HAND-DERIVED :root and every single declaration carries a
   provenance comment naming its JSON path (or the DESIGN_RULES file that
   defines the recipe, for the handful of values the JSON does not carry:
   the ink opacity ladder, the hard-offset shadow colour, the hover radius).
   When e3.tokens.json changes, re-derive here — never edit values loose.

   TIER STRATEGY (pick one, apply consistently — plan Task 1):
   MOBILE-FIRST. The base :root carries the JSON's *phone* column and three
   min-width media queries layer the tablet / laptop / wide columns on top.
   Rationale: e3.tokens.json declares scale.* explicitly per tier ("Defining
   each tier outright"), and min-width steps let the boundaries land exactly
   where breakpoint.* says they do (phone ≤600, tablet 601–1024, laptop
   1025–1439, wide ≥1440) with no max-width off-by-one. Every --fs-* is
   re-declared in all three tiers even when the JSON value repeats, so a tier
   can be read in one place instead of inferred from an absence.

   NOTE: E3's own site scales the root font-size 12.5% down on phone; this
   file does NOT — the explicit per-tier px scale is exactly the mechanism the
   JSON introduced to remove that correction (scale.$description).
   ========================================================================== */

:root {
  /* --- Colour: the nine semantic roles (never the raw mark colours) ------ */
  --paper: #faf9f7; /* e3.tokens.json: color.paper */
  --surface: #eeeede; /* e3.tokens.json: color.surface */
  --line: #ced8d8; /* e3.tokens.json: color.line */
  --ink: #0a557e; /* e3.tokens.json: color.ink — all primary text, 7.64:1 on paper */
  --muted: #2c6888; /* e3.tokens.json: color.muted — secondary text, 5.80:1 / 5.21:1 */
  --structure: #1f5979; /* e3.tokens.json: color.structure — rules, chart axes, header */
  --accent-graphic: #237a74; /* e3.tokens.json: color.accent.graphic — fills/marks, NEVER text */
  --accent-text: #1e6a65; /* e3.tokens.json: color.accent.text — links, active states */
  --marker: #aab157; /* e3.tokens.json: color.marker — underline bars, glyphs, NEVER text */

  /* --- Status badges (badge.status.*) ------------------------------------
     anchor = the hue, -text = the derived readable tier. Colour is never the
     sole signal of a state (DESIGN_RULES/semantics-a11y.md § Forms). */
  --status-ok: #51a885; /* e3.tokens.json: badge.status.ok.anchor */
  --status-ok-text: #356e57; /* e3.tokens.json: badge.status.ok.text */
  --status-alert: #db7476; /* e3.tokens.json: badge.status.alert.anchor */
  --status-alert-text: #b52f31; /* e3.tokens.json: badge.status.alert.text */
  --badge-tint: 14%; /* e3.tokens.json: badge.tint (0.14 = anchor fraction over paper) */

  /* --- Ink opacity ladder ------------------------------------------------
     Hierarchy is pen pressure on ONE ink, never new greys. */
  --ink-1: 1; /* DESIGN_RULES/color.md § Text Emphasis Ladder — primary */
  --ink-2: 0.7; /* DESIGN_RULES/semantics-a11y.md § Contrast — secondary (≥0.6 floor) */
  --ink-3: 0.55; /* DESIGN_RULES/color.md § Text Emphasis Ladder — tertiary */
  --ink-4: 0.4; /* DESIGN_RULES/patterns.md § Eyebrow Label — decorative labels only */

  /* --- Chart series palette: the ONE documented deviation ----------------
     Powertrain coding keeps this project's established ICEV/HEV/BEV/FCV hues
     (they match fleetmodel/plots.py and every figure the team already reads).
     e3.tokens.json color.$fieldNote sanctions exactly this: field coding
     deliberately does NOT come from the mark, because "the mark supplies
     identity, not distinguishability" — the mark's seven colours sit within
     ~40° of each other and cannot code four series apart. Chart CHROME
     (axes, gridlines, labels) still uses structure / line / muted. */
  --pt-icev: sienna; /* e3.tokens.json: color.$fieldNote (sanctioned field coding) */
  --pt-hev: gold; /* e3.tokens.json: color.$fieldNote (sanctioned field coding) */
  --pt-bev: limegreen; /* e3.tokens.json: color.$fieldNote (sanctioned field coding) */
  --pt-fcv: deepskyblue; /* e3.tokens.json: color.$fieldNote (sanctioned field coding) */

  /* --- Type: families and weights ---------------------------------------- */
  --font-latin: "Outfit", system-ui, sans-serif; /* e3.tokens.json: font.latin */
  --font-latin-list: "Outfit", system-ui; /* e3.tokens.json: font.latin (families, generic dropped) */
  --font-zh: "Noto Sans TC", sans-serif; /* e3.tokens.json: font.zh */
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace; /* e3.tokens.json: font.mono */
  --font-stack: var(--font-latin-list), "Noto Sans TC", sans-serif; /* e3.tokens.json: font.latin + font.zh (DESIGN_RULES/typography.md § Font Families) */

  --fw-light: 400; /* e3.tokens.json: font.weight.light */
  --fw-body: 450; /* e3.tokens.json: font.weight.body */
  --fw-display: 500; /* e3.tokens.json: font.weight.display — h1–h3, weight only whispers */
  --fw-heading: 600; /* e3.tokens.json: font.weight.heading — eyebrows, badges, buttons */

  /* --- Type scale: PHONE tier (base, mobile-first) ------------------------ */
  --fs-display: 34px; /* e3.tokens.json: scale.display.phone */
  --fs-h1: 30px; /* e3.tokens.json: scale.h1.phone */
  --fs-h2: 26px; /* e3.tokens.json: scale.h2.phone */
  --fs-h3: 20px; /* e3.tokens.json: scale.h3.phone */
  --fs-lede: 18px; /* e3.tokens.json: scale.lede.phone */
  --fs-body: 16px; /* e3.tokens.json: scale.body.phone */
  --fs-small: 14.5px; /* e3.tokens.json: scale.small.phone */
  --fs-meta: 13px; /* e3.tokens.json: scale.meta.phone */
  --fs-eyebrow: 12px; /* e3.tokens.json: scale.eyebrow.phone (flat across tiers) */

  /* --- Leading ------------------------------------------------------------ */
  --lh-display: 1.05; /* e3.tokens.json: leading.display */
  --lh-h1: 1.1; /* e3.tokens.json: leading.h1 */
  --lh-h2: 1.15; /* e3.tokens.json: leading.h2 */
  --lh-h3: 1.25; /* e3.tokens.json: leading.h3 */
  --lh-lede: 1.5; /* e3.tokens.json: leading.lede */
  --lh-body: 1.65; /* e3.tokens.json: leading.body */
  --lh-zh-bonus: 0.1; /* e3.tokens.json: leading.zhBonus */
  --lh-body-zh: 1.75; /* e3.tokens.json: leading.body + leading.zhBonus (this UI is zh-first) */
  --lh-flush: 1; /* DESIGN_RULES/typography.md § Line-Height — single-line UI */

  /* --- Tracking ----------------------------------------------------------- */
  --track-display: -0.03em; /* e3.tokens.json: tracking.display */
  --track-h1: -0.03em; /* e3.tokens.json: tracking.h1 */
  --track-h2: -0.025em; /* e3.tokens.json: tracking.h2 */
  --track-h3: -0.015em; /* e3.tokens.json: tracking.h3 */
  --track-body: 0em; /* e3.tokens.json: tracking.body */
  --track-eyebrow: 0.14em; /* e3.tokens.json: tracking.eyebrow — uppercase needs the width */

  /* --- Measure ------------------------------------------------------------ */
  --measure-prose: 66ch; /* e3.tokens.json: measure.prose */
  --measure-rows: 56rem; /* e3.tokens.json: measure.rows */
  --measure-section: 80rem; /* e3.tokens.json: measure.section */
  --measure-statement: 40rem; /* e3.tokens.json: measure.statement */

  /* --- Space: quarter-rem ladder (step number = value in 0.25rem units) --- */
  --space-1: 0.25rem; /* e3.tokens.json: space.1 */
  --space-1-5: 0.375rem; /* e3.tokens.json: space.1-5 */
  --space-2: 0.5rem; /* e3.tokens.json: space.2 */
  --space-2-5: 0.625rem; /* e3.tokens.json: space.2-5 */
  --space-3: 0.75rem; /* e3.tokens.json: space.3 */
  --space-3-5: 0.875rem; /* e3.tokens.json: space.3-5 */
  --space-4: 1rem; /* e3.tokens.json: space.4 */
  --space-5: 1.25rem; /* e3.tokens.json: space.5 */
  --space-6: 1.5rem; /* e3.tokens.json: space.6 */
  --space-7: 1.75rem; /* e3.tokens.json: space.7 */
  --space-8: 2rem; /* e3.tokens.json: space.8 */
  --space-10: 2.5rem; /* e3.tokens.json: space.10 */
  --space-12: 3rem; /* e3.tokens.json: space.12 */
  --space-14: 3.5rem; /* e3.tokens.json: space.14 */
  --space-16: 4rem; /* e3.tokens.json: space.16 */
  --space-20: 5rem; /* e3.tokens.json: space.20 */
  --space-24: 6rem; /* e3.tokens.json: space.24 */
  --space-28: 7rem; /* e3.tokens.json: space.28 */
  --space-32: 8rem; /* e3.tokens.json: space.32 */

  /* --- Radius, borders, shadow -------------------------------------------- */
  --radius: 2px; /* e3.tokens.json: radius.default */
  --radius-none: 0px; /* e3.tokens.json: radius.none */
  --radius-hover: 4px; /* DESIGN_RULES/layout.md § Shadows, Borders & Radii — radius doubles on hover (2×radius.default) */
  --border-w: 2px; /* DESIGN_RULES/layout.md § Shadows, Borders & Radii — borders are 2px --ink at every tier */
  --shadow-shift: 3px; /* DESIGN_RULES/layout.md § Geometry tokens — btn resting hard-offset shift */
  --shadow-shift-hover: 4px; /* DESIGN_RULES/layout.md § Geometry tokens — btn hover shift */
  --shadow-ink: color-mix(in srgb, var(--ink) 73%, transparent); /* DESIGN_RULES/layout.md § Shadows — --main-shadow-color is ink at ≈73% alpha, hard offset, never blur, never grey */
  --block-skew: -3deg; /* DESIGN_RULES/layout.md § The Skewed-Block Motif */
  --content-skew: 3deg; /* DESIGN_RULES/layout.md § The Skewed-Block Motif — children counter-skew */

  /* --- Motion (all of it sits behind prefers-reduced-motion: reduce) ------ */
  --motion-micro: 150ms; /* e3.tokens.json: motion.micro */
  --motion-state: 300ms; /* e3.tokens.json: motion.state */
  --motion-ambient: 6000ms; /* e3.tokens.json: motion.ambient */
  --ease: cubic-bezier(0.2, 0, 0.2, 1); /* e3.tokens.json: motion.easing */
}

/* --- TABLET tier: 601–1024px --------------------------------------------
   601px = e3.tokens.json breakpoint.phone (600px) + 1: the phone tier is
   "≤600", so the next tier starts one pixel above it. */
@media (min-width: 601px) {
  :root {
    --fs-display: 42px; /* e3.tokens.json: scale.display.tablet */
    --fs-h1: 34px; /* e3.tokens.json: scale.h1.tablet */
    --fs-h2: 28px; /* e3.tokens.json: scale.h2.tablet */
    --fs-h3: 22px; /* e3.tokens.json: scale.h3.tablet */
    --fs-lede: 19px; /* e3.tokens.json: scale.lede.tablet */
    --fs-body: 16.5px; /* e3.tokens.json: scale.body.tablet */
    --fs-small: 14.5px; /* e3.tokens.json: scale.small.tablet */
    --fs-meta: 13px; /* e3.tokens.json: scale.meta.tablet */
    --fs-eyebrow: 12px; /* e3.tokens.json: scale.eyebrow.tablet */
  }
}

/* --- LAPTOP / DESKTOP tier: 1025–1439px ----------------------------------
   1025px = e3.tokens.json breakpoint.tablet (1024px) + 1. */
@media (min-width: 1025px) {
  :root {
    --fs-display: 56px; /* e3.tokens.json: scale.display.laptop */
    --fs-h1: 40px; /* e3.tokens.json: scale.h1.laptop */
    --fs-h2: 32px; /* e3.tokens.json: scale.h2.laptop */
    --fs-h3: 24px; /* e3.tokens.json: scale.h3.laptop */
    --fs-lede: 20px; /* e3.tokens.json: scale.lede.laptop */
    --fs-body: 17px; /* e3.tokens.json: scale.body.laptop */
    --fs-small: 15px; /* e3.tokens.json: scale.small.laptop */
    --fs-meta: 13px; /* e3.tokens.json: scale.meta.laptop */
    --fs-eyebrow: 12px; /* e3.tokens.json: scale.eyebrow.laptop */
  }
}

/* --- WIDE tier: ≥1440px --------------------------------------------------
   e3.tokens.json breakpoint.wide. The wide tier adjusts TYPE, not measure —
   sections stay capped (DESIGN_RULES/responsive.md § Large screens). */
@media (min-width: 1440px) {
  :root {
    --fs-display: 60px; /* e3.tokens.json: scale.display.wide */
    --fs-h1: 44px; /* e3.tokens.json: scale.h1.wide */
    --fs-h2: 34px; /* e3.tokens.json: scale.h2.wide */
    --fs-h3: 25px; /* e3.tokens.json: scale.h3.wide */
    --fs-lede: 21px; /* e3.tokens.json: scale.lede.wide */
    --fs-body: 18px; /* e3.tokens.json: scale.body.wide */
    --fs-small: 15px; /* e3.tokens.json: scale.small.wide */
    --fs-meta: 13px; /* e3.tokens.json: scale.meta.wide */
    --fs-eyebrow: 12px; /* e3.tokens.json: scale.eyebrow.wide */
  }
}