/* design-tokens.css — Single source of truth for UI palette */

/* ─────────────────────────────────────────────────────────────────────────
   Box model

   The learner app shipped without a border-box reset. crm-admin.css has had one
   since it was written, which is why this bug class only ever surfaced on the
   learner side: 57 rules across style.css and the mode stylesheets combine a
   `width: 100%` / `min()` / `calc()` with padding or a border, and each one
   overflowed its container by exactly its padding plus border.

   That is what produced the clipped listening-mode audio player (task 755):
   `width: min(470px, 100%)` plus `padding: 22px 24px` measured 518px. Six copies
   of that player were patched by hand; the measured overflow that remained after
   those patches was +67px on the Collocation Dictation toolbar, +40px on Answer
   Short Question, +24px on the Pronunciation panel, and a 2-4px spill on the
   Describe Image preview and the RFIB passage text.

   This file is loaded first by both index.html and crm-admin.html, so one rule
   covers both surfaces. Verified against a geometry baseline captured before the
   change — see tests/browser/practice-modes-ui-full-audit.js.
   ───────────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* ── Primitive Color Ramps ── */

  /* Green (brand) */
  --green-50:  #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-400: #4ade80;
  --green-600: #1b8a4f;
  --green-700: #156d3e;
  --green-800: #166534;

  /* Blue (interactive) */
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-400: #60a5fa;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;

  /* Gold (accent / warning) */
  --gold-50:  #fff8e7;
  --gold-100: #fef3c7;
  --gold-200: #fde68a;
  --gold-400: #d4a017;
  --gold-600: #b8860b;
  --gold-700: #9a7209;
  --gold-800: #92400e;

  /* Red (danger) */
  --red-50:  #fef2f2;
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-400: #f87171;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --red-800: #991b1b;

  /* Gray (neutrals) */
  --gray-50:  #f8f9fa;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* ── Semantic Tokens ── */

  /* Brand */
  --brand: var(--green-600);
  --brand-hover: var(--green-700);

  /* Status */
  --color-success: var(--green-600);
  --color-info:    var(--blue-600);
  --color-warning: var(--gold-600);
  --color-danger:  var(--red-600);

  /* Skill palette (practice page) */
  --skill-speaking:  var(--blue-600);
  --skill-listening: var(--green-600);
  --skill-reading:   var(--blue-600);
  --skill-writing:   var(--gold-600);

  /* Text */
  --text-primary:   var(--gray-800);
  --text-secondary: var(--gray-600);
  /* Deliberately darker than --gray-500 (#64748b). At gray-500 this token measured
     4.17–4.37:1 on the tinted surfaces it is actually used on (segmented-control track,
     skill-card tint), i.e. below AA everywhere it mattered. #5d6b7f clears 4.5:1 on
     white and on every tint in use. */
  --text-muted:     #5d6b7f;

  /* Backgrounds */
  --bg-main:    var(--gray-50);
  --bg-surface: #ffffff;

  /* Borders */
  --border-default: var(--gray-200);
  --border-light:   var(--gray-200);

  /* Spacing scale.
     The original five steps (4/8/16/24/32) doubled from 8 to 16 with nothing between,
     which is why the rendered pages use 6, 10, 12, 14 and 18 far more often than the
     scale itself — 10px appears 46 times as a gap, 16px four times as a padding. The
     answer is a scale that covers the range real UI needs, not forcing components onto
     an inadequate one. Existing off-scale values are being migrated incrementally;
     new work should reference these. */
  /* The five original steps keep their values — they have live consumers. */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Added steps, covering the range the pages actually use. */
  --space-2xs: 2px;
  --space-xs-plus: 6px;
  --space-sm-plus: 10px;
  --space-ms: 12px;
  --space-ml: 20px;
  --space-2xl: 40px;

  /* Typography */
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body:    'Outfit', system-ui, sans-serif;
  --font-content: 'Lora', Georgia, serif;
  --font-mono:    'Roboto Mono', monospace;

  /* Type scale.
     The practice page rendered twenty distinct sizes, five of them inside a 1.1px band
     (14.4 / 14 / 13.8 / 13.6 / 13.3). No reader can tell those apart, but each is a
     separate decision to maintain and a separate chance for two adjacent labels to
     disagree by a fraction of a pixel — which is what makes a page feel unresolved
     without any single element looking wrong. Six steps, fixed px so nested rem values
     cannot compound into new sizes. */
  --text-2xs: 12px;  /* badges, version stamp, dense meta */
  --text-xs:  13px;  /* captions, footnotes, table meta   */
  --text-sm:  15px;  /* secondary UI, controls            */
  --text-md:  16px;  /* body                              */
  --text-lg:  18px;  /* card titles, lead paragraphs      */
  --text-xl:  24px;  /* section headings                  */
  --text-2xl: 40px;  /* page title                        */

  /* Elevations — three steps, one shadow colour.
     Nine distinct shadows rendered on the practice page, in four different tints
     (neutral, Google Blue #1a73e8, emerald, and Google's own Material elevation via a
     third-party widget). Depth reads as a single physical rule; four rules at once stop
     the page reading as one plane. The tint is now the slate ink used everywhere else. */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 10px 30px -4px rgba(15, 23, 42, 0.12);

  /* Focus — one ring for the whole app. A keyboard walk of the practice page found five
     different treatments (1px auto black, 3px blue at 35% alpha, 3px near-black, 2px
     solid blue) and, on the three primary tabs and the account button, none at all. */
  --focus-ring-color: var(--blue-600);
  --focus-ring: 2px solid var(--focus-ring-color);
  --focus-ring-offset: 2px;

  /* Transitions — named properties, not `all`. `all` includes outline-width, which made
     focus rings fade in over the transition duration instead of appearing on focus. */
  --transition-base: color 0.25s ease-out, background-color 0.25s ease-out, border-color 0.25s ease-out, box-shadow 0.25s ease-out, transform 0.25s ease-out, opacity 0.25s ease-out;

  /* Speech Coach — one hue per connected-speech family, so a guide chip, the
     annotation it draws in the passage, and the card that explains it all read
     as the same thing. These were previously hex literals generated inside JS
     template strings (read-aloud-mode.js), which put them out of reach of every
     stylesheet and made the coach impossible to restyle. */
  --coach-linking-strong: var(--blue-600);
  --coach-linking-text: #1d4ed8;
  --coach-linking-tint: rgba(37, 99, 235, 0.12);
  --coach-linking-surface: #f5f8ff;

  --coach-reduced-strong: #d97706;
  --coach-reduced-text: #92400e;
  --coach-reduced-tint: rgba(217, 119, 6, 0.14);
  --coach-reduced-surface: #fffaf0;

  --coach-sound-strong: #b45309;
  --coach-sound-text: #92400e;
  --coach-sound-tint: rgba(180, 83, 9, 0.14);
  --coach-sound-surface: #fffaf0;

  /* Scored outcomes. Distinct from the family hues above: family says *what*
     the pattern is, status says how the attempt went. */
  --coach-status-success: #047857;
  --coach-status-success-tint: #d1fae5;
  --coach-status-error: #b91c1c;
  --coach-status-error-tint: #fee2e2;
  --coach-status-uncertain: #92400e;
  --coach-status-uncertain-tint: #fef3c7;
}