/*
 * BgARC Launch Site — Design Tokens
 * created: 2026-07-04
 * created_by: frontend-developer
 * updated: 2026-07-04
 * updated_by: frontend-developer
 *
 * Premium-dark re-skin (UX_reskin-premium-dark-spec §2). THE BLUE leads as
 * light; parchment retired. Values verified against the shipped harness
 * (web/src/index.css, agentColor.ts, fleet.ts). Blue-only lock honored:
 * dark-first, ARC band 195-245, red errors-only.
 *
 * NOTE: --parchment* / --ink-on-parch are RETAINED (not deleted yet) so the
 * not-yet-reskinned pages (How It Works, Panel, Governance, Pricing) keep
 * rendering during the Home-first proof. They are removed in the full roll.
 */

:root {
  /* 2.1 Surfaces — near-black, layered for depth */
  --bg-abyss:      #0c0d10;   /* page base, deepest layer (NEW) */
  --bg-deep:       #14161a;   /* standard section surface */
  --bg-slate:      #1b1e23;   /* raised surface */
  --bg-elev:       #23262c;   /* cards, chrome */
  --bg-slate-elev: #23262c;   /* legacy alias (base.css) */
  --panel-center:  #171a1f;   /* deep transcript panels */
  --bg-glass:      rgba(27, 30, 35, 0.55);  /* glass panel fill over a glow */
  --bg-rule:       rgba(200, 205, 214, 0.10);

  /* 2.2 Ink (cream on dark) */
  --ink-cream:     #cbc9c2;
  --ink-cream-sec: #a19e96;
  --ink-cream-ter: #98958c;
  --fg-body:       oklch(83.5% 0.01 258);

  /* 2.3 THE BLUE — the glow system (the signature). Bold, used as light. */
  --arc-azure:     oklch(72% 0.15 245);   /* the hero blue */
  --arc-blue:      oklch(70% 0.16 230);   /* primary glow accent */
  --arc-teal:      oklch(74% 0.13 195);   /* horizon end */
  --arc-glow-core: oklch(78% 0.18 230);   /* brightest bloom point */
  --arc-gradient:  linear-gradient(100deg, var(--arc-azure), var(--arc-blue), var(--arc-teal));
  /* Wordmark flourish gradient — real Wordmark.tsx values */
  --arc-wordmark:  linear-gradient(94deg,
     oklch(72% 0.16 260) 0%, oklch(78% 0.15 230) 45%, oklch(85% 0.13 195) 100%);

  /* Radial page-glow blooms (large, soft, behind content) */
  --glow-hero:   radial-gradient(60% 50% at 50% 0%, oklch(60% 0.16 235 / 0.38), transparent 70%);
  --glow-anchor: radial-gradient(40% 40% at 50% 50%, oklch(58% 0.14 225 / 0.22), transparent 72%);

  /* Glowing borders + edges */
  --edge-glow:          0 0 0 1px oklch(72% 0.12 230 / 0.55), 0 0 24px oklch(65% 0.16 232 / 0.30);
  --edge-hairline:      1px solid oklch(72% 0.10 230 / 0.20);
  --edge-top-highlight: inset 0 1px 0 oklch(95% 0.02 230 / 0.18);
  --text-glow:          0 0 18px oklch(70% 0.16 232 / 0.45);

  /* Division wayfinding tints — brighter to live in the glow world (chroma ~0.11) */
  --tint-flag:        oklch(72% 0.11 230);
  --tint-flagship:    oklch(72% 0.11 245);
  --tint-squadron:    oklch(72% 0.11 215);
  --tint-yard:        oklch(72% 0.11 195);
  --tint-integration: oklch(72% 0.11 205);
  --tint-staff:       oklch(72% 0.11 270);
  --tint-unassigned:  oklch(60% 0.03 258);

  /* 2.4 Error (errors-only) */
  --error: #bf6b5e;

  /* Type system (unchanged) */
  --font-sans: 'Atkinson Hyperlegible', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-charter: 'Atkinson Hyperlegible', 'Inter', system-ui, sans-serif;

  --fs-hero:  clamp(2.5rem, 6vw, 4.5rem);
  --fs-h1:    clamp(2rem, 4vw, 3rem);
  --fs-h2:    1.75rem;
  --fs-h3:    1.25rem;
  --fs-lead:  1.125rem;
  --fs-body:  1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.625rem;

  --lh-body: 1.6;  --lh-tight: 1.2;  --lh-reading: 1.7;
  --maxw-content: 720px;
  --maxw-container: 1200px;

  /* Spacing (8px grid), radii, elevation */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;  --space-4: 1rem;
  --space-6: 1.5rem;  --space-8: 2rem;    --space-12: 3rem;   --space-16: 4rem;
  --space-24: 6rem;   --space-32: 8rem;

  --radius-sm: 6px;  --radius-md: 10px;  --radius-lg: 16px;  --radius-xl: 22px;  --radius-pill: 999px;

  /* 2.5 Depth & shadow */
  --shadow-card:  0 1px 0 var(--bg-rule), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lift:  0 12px 40px rgba(0, 0, 0, 0.55);
  --shadow-frame: 0 24px 80px rgba(0, 0, 0, 0.60);
  --section-pad-y: clamp(3rem, 8vw, 6rem);

  --header-h: 64px;

  /* Legacy glow token kept for the wordmark drop-shadow reference in base.css */
  --arc-glow: oklch(64% 0.10 230 / 0.35);
}