/* trainer v2 — design tokens.
   Loaded BEFORE existing CSS so :root variables are available everywhere.
   Brand color #ff4700 is reserved for nav-active, primary CTA, brand wordmark,
   recording state. Never used for known/unknown/correct/wrong/educational state.
   See /Users/vz/claude/trainer-v2-plan/01_decisions.md "Visual direction". */

:root {
  /* Brand */
  --v2-brand: #ff4700;
  --v2-brand-darker: #d83b00;
  --v2-brand-soft: rgba(255, 71, 0, 0.08);

  /* Surface */
  --v2-bg: #fafaf7;
  --v2-surface: #ffffff;
  --v2-surface-2: #f3f1ea;
  --v2-hairline: #e5e3dc;
  --v2-hairline-strong: #c9c5b9;

  /* Ink */
  --v2-ink: #14140f;
  --v2-ink-2: #4a4842;
  --v2-ink-3: #63605a;   /* was #8a877e (~3.5:1, fails AA) → ~5:1 on white */
  --v2-ink-4: #b5b1a5;

  /* Accessibility — global text-size multiplier set by the "Aa" control. 1 = browser default. */
  --ui-scale: 1.0;

  /* Educational palette (state colors — never brand) */
  --v2-known: #2d4e6a;
  --v2-known-rim: #a6b6c4;
  --v2-new-rim: #d4d4cc;
  --v2-target: #b08d34;
  --v2-target-tint: #f3ebd4;
  --v2-correct: #4a7a3f;
  --v2-correct-tint: #e8efe0;
  --v2-warn: #c98800;

  /* Type */
  --v2-font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --v2-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Type scale */
  --v2-t-xs: 0.6875rem;   /* 11px @ 16 root — now rem so the Aa control scales it */
  --v2-t-sm: 0.8125rem;   /* 13px */
  --v2-t-base: 0.9375rem; /* 15px */
  --v2-t-md: 1.0625rem;   /* 17px */
  --v2-t-lg: 1.25rem;     /* 20px */
  --v2-t-xl: 1.625rem;    /* 26px */
  --v2-t-2xl: 2rem;       /* 32px */

  /* Spacing (4px grid) */
  --v2-s-1: 4px;
  --v2-s-2: 8px;
  --v2-s-3: 12px;
  --v2-s-4: 16px;
  --v2-s-5: 20px;
  --v2-s-6: 24px;
  --v2-s-8: 32px;
  --v2-s-10: 40px;
  --v2-s-12: 48px;

  /* Radius */
  --v2-r-sm: 6px;
  --v2-r-md: 10px;
  --v2-r-lg: 14px;
  --v2-r-full: 999px;

  /* Motion */
  --v2-ease: cubic-bezier(.2, .8, .2, 1);
}

/* Accessibility: scale every rem-based size by the user's Aa choice, while still
   honoring the browser/OS default font size (the 100% base = e.g. iOS "Larger Text"). */
html { font-size: calc(100% * var(--ui-scale, 1)); }