/* Three of these tokens are product rules rather than taste:
 *
 *  · --teal is action and achievement. A locked rung must never be filled with it
 *  · --amber means the microphone is live and means nothing else, anywhere
 *  · --wrong is a muted amber-grey, NOT red. Red trains avoidance, and a learner who feels
 *    punished for speaking stops speaking. Red exists here only as --danger, for deleting data
 *
 * The surfaces, the type scale and the spacing scale come from the Stitch design system
 * "Speaking Practice" v3 (`docs/SCREENS.md`). Where Stitch and the rules above disagree — and on
 * three screens they did — the rules win and the divergence is noted where it is made.
 */

:root {
  /* Surfaces, in tonal steps rather than two greys. Depth comes from these plus one border colour;
   * there are no drop shadows, because a shadow on a dark surface reads as grime. */
  --bg: #0a0f0e;
  --bg-raised: #121a18;
  --bg-raised-2: #19211f;
  --bg-raised-3: #1e2825;
  --bg-sunken: #070b0a;

  --ink: #edf2f1;
  --ink-muted: #9aa9a5;
  --ink-dim: #6b7c77;

  --teal: #14b8a4;
  --teal-bright: #2dd4bf;
  --teal-dim: #0e7f74;
  --teal-deep: #0b4f49;
  --teal-faint: rgba(20, 184, 164, 0.12);
  --teal-wash: rgba(20, 184, 164, 0.06);
  --teal-line: rgba(20, 184, 164, 0.35);
  /* Text that sits ON solid teal. Dark, because teal at this lightness fails contrast under white. */
  --on-teal: #04211e;

  /* Live microphone. Nowhere else. */
  --amber: #f5a524;
  --amber-faint: rgba(245, 165, 36, 0.13);

  /* Failed Reviews, Findings, mispronounced words. */
  --wrong: #9a8c72;
  --wrong-faint: rgba(154, 140, 114, 0.1);

  /* Deleting data. Nothing else may use this. */
  --danger: #d93a3a;

  --line: rgba(237, 242, 241, 0.07);
  --line-strong: rgba(237, 242, 241, 0.14);

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --font-heading: "Plus Jakarta Sans Variable", system-ui, sans-serif;
  --font-body: "Lexend Variable", system-ui, sans-serif;

  /* A type scale, so sizes are chosen from a set rather than invented per component. Before this,
   * headings and body text differed by two or three pixels and nothing had a hierarchy. */
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.375rem;
  --text-xl: 1.875rem;
  --text-2xl: 2.5rem;

  /* A spacing scale, for the same reason. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;

  /* The shell. The navigation rail is a fixed column on desktop and a tab bar on a phone, and both
   * measurements are here because the page has to reserve room for whichever one is showing. */
  --rail-width: 236px;
  --tabbar-height: 62px;
  --content-max: 1200px;

  /* The Script size is a floor, not a preference. A learner reads this at arm's length while
   * speaking, and shrinking it to fit more text is the change that breaks the teleprompter. */
  --script-size: 30px;
  --script-line-height: 1.6;

  /* One duration and one curve, so nothing in the product animates at a speed somebody invented
   * for a single component. */
  --ease: cubic-bezier(0.2, 0, 0.1, 1);
  --fast: 140ms;
  --slow: 260ms;
}

@media (min-width: 900px) {
  :root {
    --script-size: 42px;
  }
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* One faint wash behind everything, from the top-left. Enough to stop a large dark screen reading
 * as a void, far too subtle to compete with anything. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(70rem 40rem at 12% -10%, rgba(20, 184, 164, 0.055), transparent 60%);
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 650;
  letter-spacing: -0.022em;
  line-height: 1.15;
  margin: 0;
}

p {
  margin: 0;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

/* Tabular figures everywhere a number is compared with another number. Proportional digits make a
 * column of Measures jitter, and jitter reads as the numbers being unstable rather than the type. */
:where(output, time, [data-measure-tile], [data-latest], [data-clock]) {
  font-variant-numeric: tabular-nums;
}

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Respected rather than assumed. The Session screen animates a progress line and the Analysing
 * screen breathes; both are decoration next to somebody's vestibular disorder. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}