/* PMPR design tokens — the four themes, ported to CSS.
 *
 * SOURCE OF TRUTH is app/Step2Audio/Shared/PMPRDesign.swift. Every hex below is
 * copied from `PMPRTheme` there; the token NAMES are the design file's own
 * (PMPR.dc.html §2f). Changing a name here means changing it in Swift and in
 * the design doc too, so don't rename casually.
 *
 * THE BRAND RULE, inherited from the app: the mark is strictly monochrome and
 * colour is data ink only. Nothing decorative gets a hue.
 *
 * THEMING: the active theme is a `data-theme` attribute on <html>. Graphite is
 * the default and is what :root carries, so a page that never sets the
 * attribute still renders the shipped look. Unknown values simply fall through
 * to :root — the same forgiving behaviour as `PMPRTheme.named(_:)`, which falls
 * back to graphite because the id travels in the Live Activity payload and must
 * never be able to break a screen.
 *
 * This file REPLACES the two unrelated token sets that used to live in
 * style.css (--ground/--ink/--quiet) and app.css (--bg/--text/--dim). Those
 * were both monochrome, shared no variables, and had already drifted.
 *
 * CSP: loaded under `style-src 'self'` with no 'unsafe-inline'. Nothing in this
 * project may use a <style> block or a style="" attribute.
 */

:root,
[data-theme="graphite"] {
  color-scheme: dark;

  --bg: #08090b;
  --surface: #101216;
  --line: #1e2126;
  --track: #1b1f25;
  --text: #f2f4f7;
  --dim: #8a9199;
  --faint: #5f666e;

  --new-0: #00ccb3;
  --new-1: #1a99eb;
  --rev-0: #ff9933;
  --rev-1: #fa4780;
  --gold: #fac024;
  --gold-deep: #ed8f14;
  --flame-0: #ffbd33;
  --flame-1: #fa571f;

  --primary-bg: #f2f4f7;
  --primary-fg: #08090b;
}

/* "Deep slate · teal primary" — the loud button goes teal instead of white. */
[data-theme="deep-slate"] {
  color-scheme: dark;

  --bg: #0b1016;
  --surface: #121a22;
  --line: #1c2833;
  --track: #18222c;
  --text: #e8f0f5;
  --dim: #7d909e;
  --faint: #566773;

  --new-0: #22c1a5;
  --new-1: #2e86c8;
  --rev-0: #e8a33d;
  --rev-1: #d65c6e;
  --gold: #e8a33d;
  --gold-deep: #c9862b;
  --flame-0: #e8a33d;
  --flame-1: #d1552a;

  --primary-bg: #22c1a5;
  --primary-fg: #04120f;
}

/* "Paper · daylight, for clinic hours" — the only light theme. `color-scheme`
 * matters here beyond looks: it is what repaints scrollbars, form controls and
 * the caret, none of which read our custom properties. */
[data-theme="paper"] {
  color-scheme: light;

  --bg: #fbfaf7;
  --surface: #f2f0ea;
  --line: #e2dfd6;
  --track: #e8e5dc;
  --text: #16181a;
  --dim: #6c6f73;
  --faint: #9a9c9e;

  --new-0: #0e7c93;
  --new-1: #0a5f87;
  --rev-0: #c1682a;
  --rev-1: #a83e52;
  --gold: #b8892b;
  --gold-deep: #97701f;
  --flame-0: #c98a22;
  --flame-1: #b4491c;

  --primary-bg: #16181a;
  --primary-fg: #fbfaf7;
}

/* "Carbon · bone & oxide, quietest of the three". */
[data-theme="carbon"] {
  color-scheme: dark;

  --bg: #0a0a0b;
  --surface: #141416;
  --line: #232326;
  --track: #1c1c1f;
  --text: #f4f3f1;
  --dim: #8c8a87;
  --faint: #5e5c59;

  --new-0: #c8b58c;
  --new-1: #a8916a;
  --rev-0: #b4553e;
  --rev-1: #8e3a3a;
  --gold: #c8b58c;
  --gold-deep: #a8946e;
  --flame-0: #c8b58c;
  --flame-1: #b4553e;

  --primary-bg: #c8b58c;
  --primary-fg: #14120e;
}

/* ── Data ink that does NOT change with the theme ──────────────────────────
 *
 * Quoting the Swift, because the reasoning is the whole point: "A grade is a
 * fact about an answer, not a decoration: solid must read the same green in
 * Paper as in Carbon or the screens stop being comparable."
 *
 * These sit outside the theme blocks deliberately. If you ever find yourself
 * wanting a per-theme --solid, the answer is no.
 */
:root {
  --solid: #21b366;
  --shaky: #f29e1c;
  --miss: #e6453d;
  --parked: #179e8c;
  --learning: #1a99eb;
  --unseen: #2a2f36;
}

/* ── Derived aliases ───────────────────────────────────────────────────────
 * Mirrors the computed properties on PMPRTheme so call sites read the same in
 * both languages. `--heat` is the parked teal ("it stuck"), held across themes
 * because it is data ink, not chrome.
 */
:root {
  --accent-new: var(--new-0);
  --accent: var(--new-1);
  --accent-rev: var(--rev-0);
  --heat: var(--parked);
}

/* ── Gradients ─────────────────────────────────────────────────────────────
 * SwiftUI's .topLeading → .bottomTrailing is 135deg in CSS; .top → .bottom is
 * 180deg. The `dim` variants are Palette.newGradient(dim:)'s 0.25 opacity, done
 * with colour-mix so the stops stay single-sourced.
 */
:root {
  --grad-new: linear-gradient(135deg, var(--new-0), var(--new-1));
  --grad-review: linear-gradient(135deg, var(--rev-0), var(--rev-1));
  --grad-gold: linear-gradient(180deg, var(--gold), var(--gold-deep));
  --grad-flame: linear-gradient(180deg, var(--flame-0), var(--flame-1));

  --grad-new-dim: linear-gradient(
    135deg,
    color-mix(in srgb, var(--new-0) 25%, transparent),
    color-mix(in srgb, var(--new-1) 25%, transparent)
  );
  --grad-review-dim: linear-gradient(
    135deg,
    color-mix(in srgb, var(--rev-0) 25%, transparent),
    color-mix(in srgb, var(--rev-1) 25%, transparent)
  );
}

/* ── Metric — spacing, radii, hairline ─────────────────────────────────────
 * From `enum Metric`. The point of naming them, per the Swift comment: "a
 * screen that reads Metric.gutter cannot drift from one that reads 20."
 *
 * The app's gutter is 20 because it is a phone. The web sets its own page
 * padding per layout; --gutter here is the INNER padding of cards and rows, so
 * a component ported from the app keeps its proportions.
 */
:root {
  --gutter: 20px;

  --gap-xs: 4px;
  --gap-s: 8px;
  --gap-m: 11px;
  --gap-l: 14px;
  --gap-section: 22px;

  --radius-s: 8px;   /* chips, steppers, small tiles */
  --radius-m: 12px;  /* segmented troughs, secondary buttons */
  --radius-l: 13px;  /* row groups and option rows */
  --radius-xl: 14px; /* the primary button and hero blocks */

  --hairline: 1px;
}

/* ── Type ──────────────────────────────────────────────────────────────────
 *
 * Three roles, matching `enum Brand`: a wordmark/display face (Avenir Next), a
 * monospace for data and tracked labels, and the system sans for reading.
 *
 * AVENIR NEXT CANNOT BE WEBFONTED. It is Monotype-licensed and ships only on
 * Apple platforms, so there is no legal self-hosted file and `font-src` stays
 * absent (= 'none') in vercel.json. On Apple hardware the real face renders; off
 * it the stack degrades to Helvetica/Arial, which still carries the two things
 * doing the identity work — the tight tracking and the speed bar. The design
 * file states this as its own assumption #5.
 *
 * Swift names the four weights as separate faces (AvenirNext-Bold, -Heavy,
 * -HeavyItalic, -DemiBold). CSS gets there with one family plus a weight, so
 * the --w-* tokens below are the translation table.
 */
:root {
  --display: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --w-demi: 600;   /* AvenirNext-DemiBold */
  --w-bold: 700;   /* AvenirNext-Bold */
  --w-heavy: 900;  /* AvenirNext-Heavy, and -HeavyItalic with font-style: italic */

  /* Tracked-caps section headers appear on nearly every screen; the app draws
   * them at 9.5–10px with kerning 1.5–1.8, which is .16–.18em at that size. */
  --track-caps: 0.16em;
}

/* ── Shared primitives ─────────────────────────────────────────────────────
 * The three that appear on every screen. Ports of Design/Primitives.swift.
 */

/* SectionLabel — tracked caps on the PAGE background, not on a card. The app's
 * rule, worth preserving: "sections are labeled in tracked caps on the page
 * background, so the screen reads as one document instead of six floating
 * boxes." */
.section-label {
  font: var(--w-bold) 9.5px/1 var(--display);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--faint);
}

/* RowGroup */
.row-group {
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-l);
  overflow: hidden;
}

/* Numerals that sit in a column must not jitter as they change. */
.tnum { font-variant-numeric: tabular-nums; }