/*
  AXIS — Design tokens
  Traces to UI_OVERHAUL_PLAN.md §3.1 / §2 (logo DNA) / §3.6 (modes).
  Every value here is a token; component code (axis.css) must reference
  these custom properties only — no raw hex, no raw px-shadow.
*/

:root {
  /* ---- Raw palette (logo-derived scales, §2.1) ---- */
  --navy-100: #E7E8FB;
  --navy-300: #8A8DE0;
  --navy-500: #2D31B4;
  --navy-700: #1A1D7A;
  --navy-900: #0D0E52;
  --navy-950: #060A2E;

  --green-core:   #0E6B29; /* light-surface accent, 5.2:1 on paper */
  --green-signal: #3DDC6A; /* dark-surface accent, 9.8:1 on navy-950 */
  --green-deep:   #0B3D0B;

  --steel-100: #EDEEF1;
  --steel-300: #C7CAD1;
  --steel-500: #8A8F98;
  --steel-700: #4A4E57;

  --paper: #F7F7F4;
  --ink:   #0A0B14;

  /* ---- The two lintable gradients (§2.1 "gradient law") ---- */
  --gradient-square-face: linear-gradient(135deg, #3B3BC4 0%, #0D0D5E 100%);
  --gradient-core-sphere: radial-gradient(circle at 38% 32%, #2E8B2E 0%, #0B3D0B 100%);

  /* ---- Radius law: 0 or 50%, nothing else ---- */
  --radius-square: 0px;
  --radius-circle: 50%;

  /* ---- Elevation: hard offset plates, zero blur ---- */
  --plate-1: 8px 8px 0 0 var(--plate);
  --plate-2: 16px 16px 0 0 var(--plate);
  --plate-pressed: 2px 2px 0 0 var(--plate);

  /* ---- Spacing scale (8px unit) ---- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;
  --space-9: 192px;

  /* ---- Fluid spacing (8px rhythm, viewport-scaled) ---- */
  --space-fluid-3: clamp(1rem, 0.83rem + 0.83vw, 1.5rem);   /* 16 → 24 */
  --space-fluid-5: clamp(2rem, 1.5rem + 2.5vw, 3rem);       /* 32 → 48 */
  --space-fluid-7: clamp(3rem, 2rem + 5vw, 6rem);           /* 48 → 96 */

  /* ---- Type families ---- */
  --font-display: 'Anybody', sans-serif;
  --font-body: 'Archivo', sans-serif;
  --font-data: 'Space Mono', monospace;

  /* ---- Type scale ---- */
  --text-display-1: clamp(3.5rem, 9vw, 9rem);
  --text-display-2: clamp(2.25rem, 5vw, 4.5rem);
  --text-heading: clamp(1.5rem, 2.5vw, 2.25rem);
  /* Fluid body/data: floor at 16/12px (WCAG AA min on mobile), open to desktop */
  --text-body: clamp(1rem, 0.96rem + 0.21vw, 1.0625rem);
  --line-body: 1.7;
  --text-data: clamp(0.75rem, 0.73rem + 0.11vw, 0.8125rem);
  --line-data: 1.5;
  --tracking-data: 0.04em;

  /* ---- Variable-font width axis (animated by axis.js / scroll timeline) ---- */
  /* Endpoints tokenized so mobile can cap expansion WITHOUT touching the
     @keyframes block (constraint: keyframes stay intact). ---- */
  --wdth-min: 75;
  --wdth-max: 115;

  /* ---- Motion ---- */
  --motion-converge-duration: 600ms;
  --motion-converge-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-micro-duration: 180ms;
  --motion-micro-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-reduced-duration: 200ms;

  /* ---- Breakpoints (canonical scale, UI_OVERHAUL_PLAN.md §: container queries
     first, viewport only for page shell). Media queries must hardcode px — they
     cannot read custom properties — so these are the single source of truth for
     the px values used across axis.css and the page partials. ---- */
  --bp-sm: 480px;    /* small phones (320–479) */
  --bp-md: 768px;    /* mobile / tablet boundary */
  --bp-lg: 1080px;   /* tablet / desktop boundary (nav collapse) */
  --bp-xl: 1440px;   /* desktop max shell */
  --bp-wide: 1600px; /* wide: expanded type + whitespace */

  /* =========================================================
     Semantic layer — Day Site (light). This is the DEFAULT
     per §3.6: procurement/engineering audience, logo lives on white.
     ========================================================= */
  --bg: var(--paper);
  --surface: #FFFFFF;
  --text: var(--ink);
  --text-muted: var(--steel-700);
  --accent: var(--green-core);
  --structure: var(--navy-900);
  --plate: var(--steel-300);
  --border: var(--steel-500);
  --danger: #C4342B;
}

/* Night Shift — explicit opt-in via toggle, persisted */
[data-theme="dark"] {
  --bg: var(--navy-950);
  --surface: var(--navy-900);
  --text: #F2F3F7;
  --text-muted: var(--steel-300);
  --accent: var(--green-signal);
  --structure: var(--navy-700);
  --plate: #1C1F4E;
  --border: var(--steel-700);
  --danger: #E4574B;
}

/* Respect system preference only when the visitor hasn't chosen —
   axis.js sets data-theme explicitly on first interaction/first visit
   resolution; this covers the no-JS / pre-hydration instant. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: var(--navy-950);
    --surface: var(--navy-900);
    --text: #F2F3F7;
    --text-muted: var(--steel-300);
    --accent: var(--green-signal);
    --structure: var(--navy-700);
    --plate: #1C1F4E;
    --border: var(--steel-700);
    --danger: #E4574B;
  }
}