/* MVPhysics design tokens — copied verbatim from the vendored design system (07-hand-off). Do not hand-edit; update upstream + re-vendor. */

/* ================================================================
   MVPhysics — Color tokens
   Three brand colors carry all UI chrome (~62% Navy / 30% White / 8% Signal Blue).
   Semantic colors are for scored feedback only. Neutrals are documentation-only.
   Illustration colors are permitted INSIDE artwork, never in UI chrome.
   ================================================================ */
:root {
  /* --- Brand (the only three for UI chrome) --- */
  --navy: #132554;            /* Primary — bars, primary text on light, canvas backdrop */
  --signal: #00A3DD;          /* Accent — exactly one attention point per screen */
  --white: #FFFFFF;           /* Surfaces, text on navy */

  /* --- Signal Blue interaction shades --- */
  --signal-hover: #008EC1;    /* primary button hover / pressed accent */
  --signal-wash: rgba(0,163,221,0.07);   /* selected option background */

  /* --- Semantic (feedback ONLY — not brand, never chrome/decoration) --- */
  --correct: #12A66A;
  --incorrect: #E5463E;
  --correct-wash: rgba(18,166,106,0.08);
  --incorrect-wash: rgba(229,70,62,0.07);

  /* --- Support neutrals (documentation UI + dividers; never inside a scenario frame's art) --- */
  --page: #EEF1F6;            /* light page background */
  --border: #DCE2EC;          /* hairline borders */
  --muted: #8A93A3;           /* muted label */
  --secondary: #5A6577;       /* secondary body */
  --ink: #16203A;             /* body ink */
  --bar-deep: #0E1C42;        /* deeper navy bar */
  --disabled-fill: #C3CAD6;   /* disabled control fill */
  --disabled-btn: #B7C0CE;    /* disabled button fill */

  /* --- Illustration-only real-world safety colors (allowed in artwork, NOT chrome) --- */
  --illus-yellow: #F5C400;    /* radiation yellow */
  --illus-black: #1A1A1A;     /* hazard black */
  --illus-red: #E5463E;       /* warning red */

  /* --- On-navy translucent hairlines / washes --- */
  --on-navy-rule: rgba(255,255,255,0.22);
  --on-navy-track: rgba(255,255,255,0.14);
  --on-navy-border: rgba(255,255,255,0.50);

  /* ---------- Semantic aliases ---------- */
  --surface-page: var(--page);
  --surface-card: var(--white);
  --surface-chrome: var(--navy);
  /* the content stage sits a step BRIGHTER than the chrome (--navy #132554) so it reads
     as a raised panel with a clear edge against the top/bottom chrome bars. */
  --surface-stage: #1A2E60;
  --text-body: var(--ink);
  --text-secondary: var(--secondary);
  --text-muted: var(--muted);
  --text-on-navy: var(--white);
  --accent: var(--signal);
  --accent-hover: var(--signal-hover);
  --divider: var(--border);
}

/* ================================================================
   MVPhysics — Typography tokens
   Spectral (serif): wordmark & formal titling ONLY — never body/UI.
   Archivo (sans): everything functional — headlines, titles, dialogue, body.
   Both are real Google Fonts (no substitution).
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Spectral:ital,wght@0,500;0,600;0,700;1,500&display=swap');

:root {
  /* --- Families --- */
  --font-serif: 'Spectral', Georgia, 'Times New Roman', serif;   /* wordmark / titling only */
  --font-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; /* everything functional */
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;        /* docs / measurements only */

  /* --- Weights --- */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */
  --fw-black: 900; /* @kind font */

  /* --- Type scale (frame-authored sizes at 1920×1080) --- */
  --type-scenario-title: 44px;   /* Archivo 800, UPPERCASE, +0.5 */
  --type-wordmark: 32px;         /* Spectral 600 */
  --type-doc-h2: 40px;           /* Archivo 800, -1px tracking */
  --type-dialogue: 20px;         /* Archivo 600, UPPERCASE, +0.3 */
  --type-instruction: 22px;      /* Archivo 500, sentence case */
  --type-body: 16px;             /* Archivo 400–500, sentence case (15–17px) */
  --type-min-screen: 15px;       /* absolute on-screen minimum */
  --type-min-frame: 24px;        /* minimum inside a 1920×1080 frame */

  /* --- Tracking --- */
  --track-title: 0.5px;
  --track-dialogue: 0.3px;
  --track-eyebrow: 1.5px;
  --track-tight: -1px;

  /* --- Line heights --- */
  --lh-tight: 1.05; /* @kind font */
  --lh-snug: 1.25; /* @kind font */
  --lh-body: 1.55; /* @kind font */

  /* ---------- Semantic aliases ---------- */
  --font-wordmark: var(--font-serif);
  --font-ui: var(--font-sans);
}

/* ================================================================
   MVPhysics — Spacing, layout grid, radius, elevation & motion tokens
   The scenario frame is authored at 1920×1080. Pixels are the source of truth;
   percentages are derived.
   ================================================================ */
:root {
  /* --- Frame geometry (1920×1080) --- */
  --frame-w: 1920px;
  --frame-h: 1080px;
  --frame-margin: 64px;         /* outer margin */
  --grid-cols: 12; /* @kind other */
  --grid-gutter: 32px;
  --zone-header: 156px;         /* 14.5% */
  --zone-canvas: 756px;         /* 70% — artwork bleeds to canvas edge */
  --zone-footer: 168px;         /* 15.5% */
  --text-safe: 48px;            /* no UI text/controls in the outer 48px */

  /* --- Spacing scale --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* --- Border radius --- */
  --radius-card: 16px;          /* cards */
  --radius-option: 12px;        /* answer options */
  --radius-button: 10px;        /* buttons / options (10–12px) */
  --radius-bubble: 18px;        /* speech bubbles */
  --radius-pill: 100px;         /* pills / progress tracks */
  --radius-sm: 8px;
  --radius-badge: 6px;

  /* --- Borders --- */
  --border-hairline: 1px;
  --border-control: 1.5px;      /* default option / secondary button */
  --border-active: 2px;         /* selected / resolved option, speech bubble */

  /* --- Elevation (subtle & cool) --- */
  --shadow-card: 0 1px 2px rgba(19,37,84,0.04);            /* light cards */
  --shadow-nav: 0 2px 20px rgba(19,37,84,0.25);            /* sticky chrome */
  --shadow-frame: 0 30px 60px rgba(0,0,0,0.35);            /* specimen frames on navy */

  /* --- Motion tokens --- */
  --dur-fast: 120ms;            /* @kind other */
  --dur-base: 220ms;            /* @kind other */
  --dur-pop: 320ms;             /* @kind other */
  --ease-standard: cubic-bezier(.2,.7,.3,1); /* @kind other */
  --ease-overshoot: cubic-bezier(.34,1.56,.64,1); /* @kind other */

  /* --- Interaction --- */
  --hit-target: 44px;           /* minimum interactive target */
  --focus-ring: 0 0 0 3px rgba(0,163,221,0.55);  /* visible Signal-Blue focus ring */
}