/* voicewrite — Pryzmio foundations, student ground only (design/SYNTHESIS.md §3.1-3.6).
   Every value below is checked by web/tools/contrast-check.mjs before this file ships.
   No subject hue is adopted (plan.md decision 5): black is the only act cue, green means
   correct, gold means earned, slate is the calm/miss state. */

:root {
  /* ---- ground (student, warm) ---- */
  --page: #f2efe6;
  --panel: #ffffff;
  --sunk: #e9e5da;
  --ink: #000000;      /* ink, border, shadow, and the act cue: one colour, one meaning */

  /* ---- the secondary button edge ----
     SYNTHESIS.md §3.7 gives #828C9B, validated on a panel; it clears only 2.96:1 on this
     app's warm --page. Darkened one step to clear 3:1 on both grounds (contrast-check.mjs). */
  --edge-secondary: #77808d;

  /* ---- state: correct, earned, calm/miss ---- */
  --green: #5ccb7a;
  --gold: #ffd84d;
  --calm: #dce1ea;
  --calm-text: #47526b;

  /* ---- danger: reserved for a permanent confirm step, never on a student surface ---- */
  --danger: #b4232e;

  /* ---- type ---- */
  --font-display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --font-ui: "Geist", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, sans-serif;

  /* ---- depth: a solid black offset, no blur (§3.5) ---- */
  --border-width: 3px;
  --offset: 6px;

  /* ---- shape: radii spent on physical controls only (§3.4) ---- */
  --radius: 16px;
  --radius-lg: 20px;

  /* ---- targets: 64px minimum on a student surface (§3.7) ---- */
  --control-min: 64px;

  /* ---- focus: 2px on the ground, never on a button face, so one ring works everywhere ---- */
  --focus-width: 2px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
}

/* Every numeral in the system is set in the UI face with tabular lining figures (§3.3). */
.num { font-family: var(--font-ui); font-variant-numeric: tabular-nums lining-nums; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; text-align: inherit; }
h1, h2, h3, b, strong { font-weight: inherit; }
svg { display: block; }

/* One focus ring, on the ground rather than on a button face (§3.5). */
:focus-visible { outline: var(--focus-width) solid var(--ink); outline-offset: 3px; }

/* ---- depth: press = the element travels onto its own shadow (§3.5, §3.6) ---- */
.raised {
  position: relative;
  background: var(--panel);
  border: var(--border-width) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--offset) var(--offset) 0 var(--ink);
  transition: transform 90ms cubic-bezier(0.2, 0, 0.2, 1), box-shadow 90ms cubic-bezier(0.2, 0, 0.2, 1);
}
.raised:active,
.raised.pressed {
  transform: translate(var(--offset), var(--offset));
  box-shadow: none;
}
/* .flat is a record you are reading, not a thing you press: framed, deliberately not raised. */
.flat { box-shadow: none; }

/* `prefers-reduced-motion` drops the travel, never the message: the press is carried by the
   block sitting on its shadow, not by the movement alone (§3.6). */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .raised:active,
  .raised.pressed {
    transform: none;
    box-shadow: none;
    border-width: calc(var(--border-width) + 2px);
  }
}