/* ============================================================
   TheAIReadyist — Observatory Design System
   tokens.css · Phase 1 Foundation · Version 1.0
   SINGLE SOURCE OF TRUTH for colour, motion and type-face tokens.
   Every colour on the platform MUST reference a variable here.
   ============================================================

   GROUND-TRUTH NOTE (spec §1.1):
   These values are anchored to the LIVE HOMEPAGE HERO, which the
   Hero Protection Rule makes canonical — NOT to the spec's placeholder
   hexes. The spec proposed #0B1623 / #34D8C4 / #F2F5F8; the real hero
   uses #0D1F3C / #00B8A2 / #F5F2EC. The hero wins. Token *structure* is
   the spec's; the precise numbers match the hero.
   (Divergence logged in docs/design/design-debt.md.)
*/

:root {
  /* ─── BASE / BACKGROUND (hero-matched) ─── */
  --color-bg:              #0D1F3C;  /* primary navy — page background (hero --navy) */
  --color-bg-deep:         #0C1118;  /* deeper navy — recessed areas, footers (hero --deep-black) */
  --color-bg-raised:       #162440;  /* raised panel — secondary utility surfaces only (hero --bg2) */

  /* ─── ACCENT ─── */
  --color-accent:          #00B8A2;  /* teal — interactive, the "AI" in logo, key data (hero --teal) */
  --color-accent-dim:      #0E8576;  /* teal pressed/hover-dark + light-bg variant */

  /* ─── TEXT (hero-matched, warm off-white family) ─── */
  --color-text-primary:    #F5F2EC;  /* headings, hero copy, key figures (hero --off-white) */
  --color-text-body:       rgba(245,242,236,0.78); /* body copy (hero body ≈ off-white@70-78%) */
  --color-text-secondary:  #A0AEBB;  /* descriptions, supporting copy (hero --muted2) */
  --color-text-muted:      #6B7A8D;  /* metadata, labels, timestamps (hero --slate) */

  /* ─── SEMANTIC / ASSESSMENT STATES ─── */
  --color-success:         #4CAF8E;  /* "Ready", strong, audit-defensible */
  --color-warning:         #E8A838;  /* "Partial", caution, priority (hero --amber) */
  --color-risk:            #D96A5B;  /* "Critical Gaps", exposure, risk */
  --color-neutral:         #6B7A8D;  /* inactive, not-yet-rated */

  /* ─── BORDERS ─── */
  --color-border:          rgba(0,184,162,0.18);   /* default card border (teal, faint) */
  --color-border-active:   rgba(0,184,162,0.55);   /* selected/active card */
  --color-border-subtle:   rgba(245,242,236,0.08); /* dividers, faint separation */
  --color-border-warning:  rgba(232,168,56,0.35);
  --color-border-risk:     rgba(217,106,91,0.35);

  /* ─── DATA VISUALISATION ─── */
  --color-data-1:          #00B8A2;  /* teal — primary series */
  --color-data-2:          #E8A838;  /* amber — secondary */
  --color-data-3:          #6FA8DC;  /* steel blue — tertiary */
  --color-data-grid:       rgba(245,242,236,0.10); /* chart gridlines */

  /* ─── TYPE FACES (hero) ─── */
  --font-serif:  'Playfair Display', Georgia, serif;   /* headlines + wordmark */
  --font-sans:   'DM Sans', -apple-system, system-ui, sans-serif; /* body */
  --font-mono:   'DM Mono', 'Courier New', monospace;  /* context / metadata lines */

  /* ─── MOTION (spec §4.1) ─── */
  --motion-fast:   120ms;  /* micro-feedback: hovers, focus */
  --motion-base:   200ms;  /* standard transitions */
  --motion-slow:   250ms;  /* entrance fades — ceiling */
  --motion-ease:   cubic-bezier(0.4, 0.0, 0.2, 1);

  /* ============================================================
     PHASE 2 — TYPOGRAPHY & LAYOUT
     Type scale anchored to the live hero (Hero Protection Rule).
     ============================================================ */

  /* ─── TYPE SCALE (desktop; responsive via clamp + §8.5) ─── */
  /* role            value                              face / weight / line-height / tracking */
  --type-hero:       clamp(2.25rem, 4.2vw, 3.25rem);  /* serif 700, lh 1.08, tracking -0.02em — MATCHED to hero h1 */
  --type-display:    2.25rem;                          /* serif 600, lh 1.10, tracking -0.015em */
  --type-h1:         1.75rem;                          /* serif 600, lh 1.15 */
  --type-h2:         1.375rem;                         /* serif 600, lh 1.20 */
  --type-h3:         1.125rem;                         /* serif 600, lh 1.25 */
  --type-body-lg:    1.1875rem;                        /* sans 300/400, lh 1.6 — lead/standfirst (hero 19px) */
  --type-body:       1rem;                             /* sans 400, lh 1.65 */
  --type-body-sm:    0.9375rem;                        /* sans 400, lh 1.55 — dense UI */
  --type-label:      0.6875rem;                        /* mono 500, lh 1.4, tracking 0.16em, UPPERCASE (hero eyebrow) */
  --type-meta:       0.625rem;                         /* mono 400, lh 1.4, tracking 0.16em, UPPERCASE */
  --type-data-lg:    2.5rem;                           /* mono 600 — big score figures */
  --type-data:       1.25rem;                          /* mono 500 — inline data values */
  --type-quote:      1.5rem;                           /* serif 400 italic, lh 1.4 — pull quotes */

  /* ─── WEIGHTS (loaded faces: Playfair 400/600/700, DM Sans 300/400/500, DM Mono 400/500) ─── */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ─── LAYOUT GRID ─── */
  --layout-max:      1200px;  /* max content width (matches hero-inner) */
  --layout-reading:  680px;   /* long-form reading measure (articles, briefings) */
  --layout-gutter:   24px;    /* base gutter */
  --layout-col:      12;      /* 12-column grid */

  /* ─── SPACING SCALE (vertical rhythm) — authoritative over Phase 1 interim ─── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  16px;
  --space-4:  24px;    /* (Phase 1 interim was 16px — superseded; see design-debt DD-09) */
  --space-5:  40px;
  --space-6:  64px;    /* hero vertical padding rhythm */
  --space-7:  96px;
  --space-8:  160px;   /* major section separation */

  /* ─── BREAKPOINTS ─── */
  --bp-sm:    640px;
  --bp-md:    900px;
  --bp-lg:    1200px;
}