/* Redezeit design tokens. Source of truth for values; DESIGN.md mirrors them.
   Direction "Pult" (chosen 8. 11. 2026, docs/design-directions/pult-*.html): the conductor's desk and score.
   Black on white, geometry, one signal-yellow marker that means "now" (the live take, the current word,
   the Schwerpunkt). The two voices differ by shape, not by hue: the clone is drawn hollow, you are drawn solid.
   Light = white page, black ink, yellow fills. Dark = graphite page (never pure black, so the black blocks
   still read as blocks), white ink, the same yellow.
   Yellow rule: yellow is a fill behind black text or a solid shape on black. Never yellow text or a thin
   yellow line on white (1.4:1).
   Contrast (WCAG 2.x, docs/design-directions/src/contrast.py): ink on bg 21.0 / 15.7, ink-3 on surface-2
   5.5 / 5.1, on-mark on mark 15.2, mark on block 13.8, ink-3 on block (inverted scope) 9.4. */

@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("vendor/fonts/atkinson-hyperlegible-next-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("vendor/fonts/atkinson-hyperlegible-next-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("vendor/fonts/atkinson-hyperlegible-next-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("vendor/fonts/jost-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("vendor/fonts/jost-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("vendor/fonts/jost-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  color-scheme: light dark;

  /* Colour: Pult hell (white page) */
  --bg: #FFFFFF;            /* the page */
  --surface: #F2F2F0;       /* panels: cards, share panel, notices */
  --surface-2: #E4E4E1;     /* tracks, wells, hover */
  --line: #D0D0CC;          /* row dividers (decorative) */
  --line-strong: #767672;   /* input frames, ticks, axes (4.5:1 on bg) */
  --ink: #000000;
  --ink-2: #2B2B29;
  --ink-3: #595955;         /* the lowest text level, 7.0:1 on bg */
  --on-ink: #FFFFFF;

  --mark: #FFD100;          /* signal yellow, "now": fill only, black on top */
  --on-mark: #000000;
  --block: #000000;         /* inverted strips: HUD bar, desktop Pult, coach, toasts. Black in both schemes */
  --on-block: #FFFFFF;

  /* Semantic aliases. The old hue voices (Rotlicht, klon blue, raspberry, amber) collapse into the Pult
     grammar; charts.js, diff.js and every component keep their token names. */
  --rot: var(--mark);       /* the live accent is the marker */
  --rot-soft: var(--mark);
  --on-rot: var(--on-mark);
  --klon: #595955;          /* the clone: hollow and dashed shapes in grey */
  --klon-soft: #E4E4E1;
  --fill: var(--ink);       /* Füllwort: a solid capsule (shape, not hue) */
  --fill-soft: var(--ink);
  --mis: var(--ink);        /* misread, out of band, uncertain: ink plus a shape (wavy, dashed, chip) */
  --mis-mark: var(--ink);
  --mis-soft: var(--mark);  /* warning notices: yellow fill, black text */

  --focus: #000000;
  --focus-halo: var(--mark);
  --selection: #FFE680;
  --mark-ring: transparent; /* the app mark is a black disc: invisible on the dark page without a ring */
  --block-ring: transparent; /* the black blocks on the graphite page get a hairline in dark (literal value:
                                the inverted scope remaps --line, this one must stay the page's) */
  --scrim: rgba(0, 0, 0, .5);
  --shadow-float: 0 10px 24px -14px rgba(0, 0, 0, .45);

  /* Heatmap ramp: ink into the page, never a hue */
  --heat-0: var(--surface-2);
  --heat-1: color-mix(in oklab, var(--ink) 25%, var(--bg));
  --heat-2: color-mix(in oklab, var(--ink) 55%, var(--bg));
  --heat-3: var(--ink);

  /* Typography: self-hosted (web/vendor/fonts, OFL, latin subset). Atkinson Hyperlegible Next for reading
     and UI, Jost for numerals and titles. */
  --font-ui: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", Verdana, system-ui, sans-serif;
  --font-text: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", Verdana, system-ui, sans-serif;
  --font-num: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

  --fs-micro: 0.75rem;      /* 12: chart axes, HUD labels, word chips */
  --fs-small: 0.875rem;     /* 14: pills, nav labels, Pult HUD labels */
  --fs-meta: 0.9375rem;     /* 15: meta lines, raw numbers, hints */
  --fs-body: 1.0625rem;     /* 17 */
  --fs-lead: 1.125rem;      /* 18: list titles, player time */
  --fs-title: 1.25rem;      /* 20: card titles, reading title (Jost) */
  --fs-subtitle: 1.375rem;  /* 22: wordmark, drill names, the coach question, small Jost values */
  --fs-h2: 1.625rem;        /* 26: section titles, row scores, sound glyphs (Jost) */
  --fs-num-l: 2.125rem;     /* 34: the Gesamt series value, Aussprache head value (Jost) */
  --fs-h1: clamp(1.875rem, 1.25rem + 2.6vw, 2.75rem);    /* 30 to 44 (Jost) */
  --fs-read: clamp(1.5rem, 1.1rem + 1.2vw, 1.875rem);    /* 24 to 30: the text to read aloud */
  --fs-hud: 3rem;           /* 48: live numbers in the desktop Pult (Jost), 54 from 1440 */
  --fs-hud-bar: 1.375rem;   /* 22: live numbers in the phone HUD bar (Jost) */
  --fs-hud-bar-s: 1.1875rem; /* 19: the same below 380 px */
  --fs-score-s: 6rem;       /* 96: the overall inside a panel (Vergleich) */
  --fs-score: clamp(6rem, 30vw, 9.375rem);               /* 96 to 150: overall score (Jost) */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;       /* Jost 600; Atkinson resolves to 700 */
  --fw-bold: 700;

  --lh-read: 1.5;
  --lh-body: 1.45;
  --lh-tight: 1.1;
  --tracking-display: -0.01em;
  --measure-read: 30em;
  --measure-body: 68ch;

  /* Spacing (4 px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 72px;
  --gutter: 18px;
  --tap: 44px;
  --rec-size: 76px;
  --nav-h: 62px;
  --rail-w: 232px;
  --pult-w: 340px;
  --content-max: 1180px;

  /* Rules: the score's staff lines. Thick ink rules carry structure, hairlines only divide rows. */
  --rule: 3px;              /* above section titles, reading plate, Aussprache */
  --rule-2: 2px;            /* frames: buttons, segmented, drill rows, nav edge */

  /* Radii: square by default (the desk), round only where the thing is round (record, play, dots, filler) */
  --r-hair: 0;
  --r-word: 0;
  --r-input: 0;
  --r-btn: 0;
  --r-plate: 0;
  --r-pill: 999px;
  --r-core: 2px;    /* the stop square inside the recording button */
  --r-capsule: 14px; /* the filler capsule on the diff */
  --r-key: 6px;     /* the filler capsule in the legend */

  /* Motion */
  --dur-fast: 150ms;
  --dur: 220ms;
  --dur-slow: 300ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);

  --z-nav: 20;
  --z-dock: 30;
  --z-tally: 40;
  --z-toast: 50;
}

/* Pult bei Nacht (dark): system preference unless the app forces light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #222327;
    --surface: #2C2D31;
    --surface-2: #3A3B40;
    --line: #4A4B51;
    --line-strong: #8E8F95;
    --ink: #FFFFFF;
    --ink-2: #DADADC;
    --ink-3: #AEAFB3;
    --on-ink: #222327;
    --klon: #AEAFB3;
    --klon-soft: #3A3B40;
    --focus: #FFFFFF;
    --selection: #6B5A10;
    --mark-ring: var(--line-strong);
    --block-ring: #4A4B51;
    --scrim: rgba(0, 0, 0, .6);
    --shadow-float: 0 12px 28px -14px rgba(0, 0, 0, .8);
  }
}

:root[data-theme="dark"] {
  --bg: #222327;
  --surface: #2C2D31;
  --surface-2: #3A3B40;
  --line: #4A4B51;
  --line-strong: #8E8F95;
  --ink: #FFFFFF;
  --ink-2: #DADADC;
  --ink-3: #AEAFB3;
  --on-ink: #222327;
  --klon: #AEAFB3;
  --klon-soft: #3A3B40;
  --focus: #FFFFFF;
  --selection: #6B5A10;
  --mark-ring: var(--line-strong);
  --block-ring: #4A4B51;
  --scrim: rgba(0, 0, 0, .6);
  --shadow-float: 0 12px 28px -14px rgba(0, 0, 0, .8);
}

/* Inverted scope: the black blocks (HUD bar and desktop Pult, coach card, toasts, the dev-viz HUD).
   The neutrals are remapped here, so every component inside (meters, buttons, notices, spinners, the
   publikum question) works unchanged on black in both schemes. On black, yellow may also be a line
   or a number (out of band, clipping), because it reads at 13.8:1. */
.rec-dock, .coach-card, .toast, .dev-viz-shell .hud {
  --bg: #000000;
  --surface: #1B1B1D;
  --surface-2: #2C2C2F;
  --line: #3E3E42;
  --line-strong: #8E8F95;
  --ink: #FFFFFF;
  --ink-2: #DADADC;
  --ink-3: #AEAFB3;
  --on-ink: #000000;
  --klon: #AEAFB3;
  --klon-soft: #2C2C2F;
  --mis: var(--mark);
  --mis-mark: var(--mark);
  --focus: #FFFFFF;
  --track-bg: #000000;
  background-color: var(--block);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--block-ring);
}

@media (min-width: 1440px) {
  :root { --rail-w: 260px; --pult-w: 360px; --gutter: 32px; --fs-hud: 3.375rem; }
}
@media (min-width: 768px) and (max-width: 1439.98px) {
  :root { --gutter: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
}