/* ==========================================================
   TRU DESIGN TOKENS — single source of truth
   L1 primitives → L2 semantic → components consume L2 only.
   NEVER reference an L1 primitive from a component.
   NEVER write a raw hex outside this file.
   ========================================================== */

:root {
  /* ---------- L1 · PRIMITIVES ---------- */
  --tru-ink-900: #0B0B0D;
  --tru-ink-800: #151518;
  --tru-ink-700: #1E1E22;
  --tru-ink-600: #28282E;
  --tru-ink-500: #64748B;
  --tru-ink-300: #B6B6B6;
  --tru-ink-100: #E5E5E7;
  --tru-ink-cool-300: #9FB3C4;  /* cool cyan-grey — --text-muted on dark tiers */

  /* Surface ramp — L1 primitives for the five elevation levels below.
     Deep navy, faintly cyan-tinted so stacked layers read as depth, not
     as separate greys. Field tiers override these to zero-saturation
     neutrals (colour-critical photo work). */
  --tru-surface-900: #05080D;   /* L0 — page base (deepest) */
  --tru-surface-800: #0B1018;   /* L1 — cards, panels */
  --tru-surface-700: #111826;   /* L2 — raised cards, popovers, menus */
  --tru-surface-600: #161F2E;   /* L3 — sheets, drawers */
  --tru-surface-500: #1D2736;   /* L4 — modals, dialogs (highest) */
  --tru-paper:      #FFFFFF;
  --tru-paper-pure: #FFFFFF;

  --tru-cyan-300: #78EBF2;   /* soft sky highlight */
  --tru-cyan-400: #56E1E9;   /* brand primary — exact logo cyan */
  --tru-cyan-500: #3DC5CD;   /* hover / pressed (dark) */
  --tru-cyan-600: #0891B2;   /* accent — light surfaces only */
  --tru-cyan-700: #0E7490;   /* hover / pressed (light) */
  --tru-cyan-800: #164E63;   /* deep cyan — tinted fills, never text */

  --tru-amber-300: #FCD34D;  /* attention text on dark — softer than 500 */
  --tru-amber-500: #F59E0B;  /* attention / retake — NOT error */
  --tru-amber-500-rgb: 245 158 11;
  --tru-red-400:   #F87171;  /* error hover — lighter */
  --tru-red-500:   #EF4444;  /* system error · LIVE recording */
  --tru-red-700:   #B91C1C;  /* deep edge — pressed / 3D side */
  --tru-green-500: #10B981;  /* connected; otherwise sparing */

  /* Channel forms. Glows, scrims and tinted gradients need an alpha the
     ramp cannot express as a flat hex. Consume as rgb(var(--x) / 0.45)
     so there is still exactly one place the colour is defined. */
  --tru-cyan-300-rgb: 120 235 242;
  --tru-cyan-400-rgb: 86 225 233;
  --tru-cyan-600-rgb: 8 145 178;
  --tru-cyan-800-rgb: 22 78 99;
  --tru-red-500-rgb:  239 68 68;
  --tru-paper-rgb:    255 255 255;
  --tru-ink-900-rgb:  11 11 13;

  /* ---------- L2 · SEMANTIC (components use these) ---------- */

  /* Five surface levels — the only elevation vocabulary. Solid colours by
     contract: a surface under a button must not let photo colour bleed
     through. Per level: the fill, a backdrop blur (rising with level, for
     the places translucency is legitimate — scrims, glass overlays), a
     cool border that brightens slightly with elevation, and a shadow.
     L2+ carry a 1px inner top-edge highlight via the shadow tokens. */
  --surface-0: var(--tru-surface-900);
  --surface-1: var(--tru-surface-800);
  --surface-2: var(--tru-surface-700);
  --surface-3: var(--tru-surface-600);
  --surface-4: var(--tru-surface-500);

  --surface-0-blur: blur(0px);
  --surface-1-blur: blur(8px);
  --surface-2-blur: blur(14px);
  --surface-3-blur: blur(18px);
  --surface-4-blur: blur(24px);

  --surface-0-border: rgb(148 184 205 / 0.06);
  --surface-1-border: rgb(152 190 212 / 0.10);
  --surface-2-border: rgb(158 198 220 / 0.14);
  --surface-3-border: rgb(166 206 228 / 0.17);
  --surface-4-border: rgb(176 216 236 / 0.20);

  --surface-0-shadow: none;
  --surface-1-shadow: var(--shadow-card);
  --surface-2-shadow: var(--shadow-lift);
  --surface-3-shadow: var(--shadow-float);
  --surface-4-shadow: var(--shadow-modal);

  /* Back-compat aliases — existing consumers of --bg-* land on the ramp.
     page = 0 · card/panel = 1 · raised = 2. --bg-inset is a sunken well,
     not an elevation level: it keeps its own darker-than-card fill. */
  --bg-base:       var(--surface-0);
  --bg-raised:     var(--surface-1);
  --bg-overlay:    var(--surface-2);
  --bg-inset:      #1A2331;
  --border-subtle: var(--surface-1-border);
  --border-strong: #64748B;

  --text-primary:   var(--tru-paper);
  --text-secondary: var(--tru-ink-100);
  --text-muted:     var(--tru-ink-cool-300);
  --text-on-accent: var(--tru-ink-900);

  --accent:         var(--tru-cyan-400);
  --accent-hover:   var(--tru-cyan-500);
  --accent-bright:  var(--tru-cyan-300);  /* text/icons on glass accent fills */
  --accent-rgb:     var(--tru-cyan-400-rgb);
  --accent-surface: rgb(var(--accent-rgb) / 0.06);
  --accent-border:  rgb(var(--accent-rgb) / 0.20);
  --accent-glow:    rgb(var(--accent-rgb) / 0.18);
  --focus-ring:     var(--tru-cyan-400);

  --state-attention:      var(--tru-amber-500);
  --state-attention-text: var(--tru-amber-300);
  --state-attention-rgb:  var(--tru-amber-500-rgb);
  --state-error:     var(--tru-red-500);
  --state-success:   var(--tru-green-500);

  --state-error-hover:   var(--tru-red-400);
  --state-error-deep:    var(--tru-red-700);
  --state-error-rgb:     var(--tru-red-500-rgb);
  --state-error-surface: rgb(var(--state-error-rgb) / 0.14);
  --state-error-border:  rgb(var(--state-error-rgb) / 0.28);

  --glass-bg:     rgba(255, 255, 255, 0.065);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-blur:   blur(24px) saturate(120%) brightness(0.95);

  /* ---------- L2 · COMPONENT SURFACES & MOTION ----------
     Deep cyan glassmorphism: near-black canvas, soft cyan radial glow
     behind content, frosted cards. tru-components.css consumes these. */
  /* Cool-tinted gradient glass — pure white fill muds to swampy grey
     under saturate(); the cool top-stop keeps the frost icy and the
     dark bottom-stop grounds the card. */
  --glass-card:  linear-gradient(145deg, rgba(200, 240, 255, 0.09) 0%, rgba(12, 20, 28, 0.65) 100%);
  --glass-glow:  radial-gradient(58% 42% at 50% -8%, rgb(var(--accent-rgb) / 0.14), transparent 68%);
  /* Directional light: specular top rim, shaded bottom rim, 1px dark
     ambient ring so elevation reads on a near-black canvas (a plain
     black drop shadow just merges into it). */
  --shadow-card:  inset 0 1px 0 rgb(var(--tru-paper-rgb) / 0.22), inset 0 -1px 0 rgb(0 0 0 / 0.6), 0 0 0 1px rgb(0 0 0 / 0.45), 0 20px 40px -15px rgb(0 0 0 / 0.9);
  --shadow-lift:  inset 0 1px 0 rgb(var(--tru-paper-rgb) / 0.14), inset 0 -1px 0 rgb(0 0 0 / 0.5), 0 0 0 1px rgb(0 0 0 / 0.45), 0 26px 50px -28px rgb(0 0 0 / 0.9);
  --shadow-float: inset 0 1px 0 rgb(var(--tru-paper-rgb) / 0.28), inset 0 0 20px rgb(var(--accent-rgb) / 0.05), 0 0 0 1px rgb(0 0 0 / 0.5), 0 24px 48px -12px rgb(0 0 0 / 0.95), 0 0 24px -4px rgb(var(--accent-rgb) / 0.22);
  /* Modal/dialog crown level — deepest spread, strongest ambient ring,
     brightest top-edge light so the layer reads clearly over a scrim. */
  --shadow-modal: inset 0 1px 0 rgb(var(--tru-paper-rgb) / 0.32), inset 0 0 24px rgb(var(--accent-rgb) / 0.06), 0 0 0 1px rgb(0 0 0 / 0.6), 0 40px 80px -16px rgb(0 0 0 / 0.95), 0 0 32px -4px rgb(var(--accent-rgb) / 0.24);

  /* ---------- SPACING & RADIUS ----------
     4px-base spacing ramp and one shared corner scale. Legacy names
     (--radius-btn/card/pill, --r-sm/--r/--r-card/--r-pill) alias onto the
     ramp so existing consumers keep resolving. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-9:  36px;
  --space-10: 40px;

  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 999px;

  --radius-btn:  var(--radius-md);
  --radius-card: var(--radius-lg);
  --radius-pill: var(--radius-full);
  --r-sm:   var(--radius-sm);
  --r:      var(--radius-md);
  --r-card: var(--radius-lg);
  --r-pill: var(--radius-full);

  /* ---------- MOTION ----------
     Three easings + three durations. Enter decelerates (content arriving),
     exit accelerates (content leaving), spring carries a soft overshoot
     for things that physically settle (sheets, toggles). */
  --ease:        cubic-bezier(0.16, 1, 0.3, 1);   /* legacy alias = enter */
  --ease-enter:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.44, 1);

  --dur-fast: 120ms;
  --dur-med:  180ms;
  --dur-slow: 320ms;

  /* ---------- L2 · TYPE SCALE ----------
     One ramp for every tier — the brand scale that already lived as the
     per-app --t-* vars, canonicalised. Each step carries its leading and
     tracking: consume font-size via var(--text-N), leading via
     var(--text-N--line-height), tracking via var(--text-N--tracking).
     --text-xs (12px) is the floor — nothing sets smaller type. */
  --font-sans:  'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --font-serif: 'Inter', system-ui, sans-serif;

  --text-xs:   12px;
  --text-xs--line-height:   1.35;
  --text-xs--tracking:      0.01em;
  --text-sm:   13px;
  --text-sm--line-height:   1.45;
  --text-sm--tracking:      0;
  --text-base: 15px;
  --text-base--line-height: 1.55;
  --text-base--tracking:    -0.005em;
  --text-lg:   17px;
  --text-lg--line-height:   1.45;
  --text-lg--tracking:      -0.005em;
  --text-xl:   20px;
  --text-xl--line-height:   1.35;
  --text-xl--tracking:      -0.01em;
  --text-2xl:  28px;
  --text-2xl--line-height:  1.25;
  --text-2xl--tracking:     -0.015em;
  --text-3xl:  38px;
  --text-3xl--line-height:  1.15;
  --text-3xl--tracking:     -0.022em;

  /* Legacy names — every existing --t-* / --track-* consumer lands on the
     same step it always did. New code should use --text-* directly. */
  --t-micro: var(--text-xs);
  --t-small: var(--text-sm);
  --t-body:  var(--text-base);
  --t-lead:  var(--text-lg);
  --t-h3:    var(--text-xl);
  --t-h2:    var(--text-2xl);
  --t-h1:    var(--text-3xl);
  --track-h3: var(--text-xl--tracking);
  --track-h2: var(--text-2xl--tracking);
  --track-h1: var(--text-3xl--tracking);

  /* Density knob — field apps keep the 48px touch floor; desk apps may
     tighten it (truflow sets 38px). Buttons never size below it. */
  --btn-h:  48px;
  --btn-px: 18px;

  /* ---------- L2 · BUTTON COLOURS (the ONLY button palette) ----------
     Buttons are opaque by contract: a translucent fill picks up the
     photo/card behind it and the cyan turns muddy. Every button tier
     consumes these tokens; per-app button colour definitions are banned
     (enforced by tools/ci/button_style_guard.mjs).
     Solid fills only — no alpha on background/color/border. Glow lives
     in --btn-glow* (box-shadow translucency is fine — it emits light,
     it does not show the backdrop through). */
  /* OPAQUE by contract (alpha faces bleed the photo through = mud) —
     cool slate gradient so cyan never mixes toward green/swamp. */
  --btn-bg:            linear-gradient(180deg, #141C26 0%, #0B0F16 100%);
  --btn-bg-hover:      linear-gradient(180deg, #1A2430 0%, #0E141C 100%);
  --btn-bg-press:      #0A1218;
  --btn-border:        #265059;  /* whisper-thin cyan edge — present, never neon */
  --btn-border-hot:    #2F7C85;  /* crisp cyan top-lip on hover too */
  --btn-edge-top:      #3A6B74;  /* lit top edge — directional light */
  --btn-text:          var(--accent);        /* brand cyan — action labels only */
  --btn-text-hot:      var(--tru-cyan-300);  /* slight lift on hover — interactive */
  --btn-glow:          rgb(var(--accent-rgb) / 0.10);
  --btn-glow-hot:      rgb(var(--accent-rgb) / 0.28);
  --btn-disabled-bg:     #10181C;
  --btn-disabled-text:   #5B6E75;
  --btn-disabled-border: #22333A;

  /* Decorative button effects — the alpha lives here, not in app CSS.
     These paint light ON TOP of the opaque face; they never replace it. */
  --btn-laser-sweep: linear-gradient(90deg, transparent, rgb(var(--tru-paper-rgb) / 0.35), rgb(var(--accent-rgb) / 0.45), transparent);
  --btn-conic-ring:  conic-gradient(from var(--mv-angle), var(--tru-cyan-400), var(--tru-cyan-300), var(--tru-cyan-600), var(--tru-cyan-400));
}

/* ==========================================================
   TIER OVERRIDES
   Set data-app on <html> or the app shell root. One line per app.
   Nothing works without this attribute.
   ========================================================== */

/* ---------- FIELD · CAPTURE ----------
   TruLens — dealer merchandising photography.
   Inherits :root dark navy/slate surface ramp & cool-tinted glass frost so
   cards, login, and inlays match Premium and Mobile without warm-shifting. */
[data-app="trulens"] {
  color-scheme: dark;
  --photo-surround: var(--surface-1);
  --photo-void:     #000000;
  --photo-proof:    #FFFFFF;   /* white-background proofing mode */
}

/* ---------- FIELD · ASSESSMENT ----------
   TruInspect — VIR generation. Outdoor, high contrast.
   Inherits :root dark navy/slate surface ramp & cool-tinted glass frost. */
[data-app="truinspect"] {
  color-scheme: dark;
}

/* ---------- LIVE TIER ----------
   TruView (buyer viewing) · TruTrade (seller appraisal).
   Inherits :root dark navy/slate surface ramp & cool-tinted glass frost. */
[data-app="truview"],
[data-app="trutrade"] {
  color-scheme: dark;
  --video-surround: var(--surface-1);
  --video-void:     #000000;   /* fullscreen stream */

  --state-live:      var(--tru-red-500);    /* recording — NEVER cyan */
  --state-waiting:   var(--tru-amber-500);
  --state-connected: var(--tru-green-500);
  --state-degraded:  var(--tru-amber-500);
}

/* ---------- WORKSTATION TIER ----------
   TruFlow (no tier suffix — Premium is the product), TruCRM. Inherits :root. */
[data-app="truflow"],
[data-app="trucrm"] {
  color-scheme: dark;
}

/* ---------- RADAR TIER ----------
   TruRadar — vehicle sourcing radar. Dark, data-dense; inherits :root. */
[data-app="truradar"] {
  color-scheme: dark;
}

/* ---------- CONSUMER TIER ----------
   TruAfford only — form widget inside a 3rd-party dealer page.
   LIGHT is default. */
[data-app="truafford"] {
  color-scheme: light;
  /* Light tier: elevation is paper-white against a softly greyed page —
     the steps run light→lighter and the shadow carries the depth. */
  --surface-0: #F2F4F1;
  --surface-1: #FAFBFA;
  --surface-2: #FFFFFF;
  --surface-3: #FFFFFF;
  --surface-4: #FFFFFF;
  --surface-0-border: rgb(20 30 28 / 0.08);
  --surface-1-border: rgb(20 30 28 / 0.08);
  --surface-2-border: rgb(20 30 28 / 0.10);
  --surface-3-border: rgb(20 30 28 / 0.12);
  --surface-4-border: rgb(20 30 28 / 0.14);
  --bg-base:       var(--surface-0);
  --bg-raised:     var(--surface-1);
  --bg-overlay:    var(--surface-2);
  --bg-inset:      #E4E7E2;
  --border-subtle: #D4D8D2;
  --border-strong: #A8AFA6;

  --text-primary:   var(--tru-ink-900);
  --text-secondary: var(--tru-ink-700);
  --text-muted:     var(--tru-ink-300);
  --text-on-accent: var(--tru-paper-pure);

  --accent:         var(--tru-cyan-600);
  --accent-hover:   var(--tru-cyan-700);
  --accent-rgb:     var(--tru-cyan-600-rgb);
  /* Lighter tints than dark tiers — the same alpha reads twice as loud on paper. */
  --accent-surface: rgb(var(--accent-rgb) / 0.08);
  --accent-border:  rgb(var(--accent-rgb) / 0.30);
  --focus-ring:     var(--tru-cyan-600);

  --glass-bg:     rgba(255, 255, 255, 0.65);
  --glass-border: rgba(0, 0, 0, 0.06);
}

/* TruAfford on a dark dealer host site */
[data-app="truafford"][data-theme="dark"] {
  color-scheme: dark;
  /* Restore the navy ramp — the light block above leaves surface-* paper-white. */
  --surface-0: var(--tru-surface-900);
  --surface-1: var(--tru-surface-800);
  --surface-2: var(--tru-surface-700);
  --surface-3: var(--tru-surface-600);
  --surface-4: var(--tru-surface-500);
  --surface-0-border: rgb(148 184 205 / 0.06);
  --surface-1-border: rgb(152 190 212 / 0.10);
  --surface-2-border: rgb(158 198 220 / 0.14);
  --surface-3-border: rgb(166 206 228 / 0.17);
  --surface-4-border: rgb(176 216 236 / 0.20);
  --bg-base:       var(--surface-0);
  --bg-raised:     var(--surface-1);
  --bg-overlay:    var(--surface-2);
  --border-subtle: var(--tru-ink-500);
  --text-primary:   var(--tru-paper);
  --text-secondary: var(--tru-ink-100);
  --text-on-accent: var(--tru-ink-900);
  --accent:        var(--tru-cyan-400);
  --accent-hover:  var(--tru-cyan-500);
  --accent-rgb:    var(--tru-cyan-400-rgb);
  --focus-ring:    var(--tru-cyan-400);
  --glass-bg:     rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);
}

/* ---------- CHAT ----------
   Per-client theming. Client overrides L2 semantic tokens ONLY,
   injected at runtime. Never override L1. Never fork this file. */
[data-app="chat"] { }