/* Design tokens. Every color, radius and font in the app comes from here —
   no raw hex in a rule that isn't a token definition.

   The four energy grounds carry text, so each is paired with a fixed ink that
   clears 4.5:1 against it. Verified by computation in tokens.test.js, not by
   eye: blue 7.13, green 5.01, yellow 10.75, red 4.78. */

:root {
  color-scheme: light dark;

  /* Each brick: front face (carries text), lit top face, shaded side face. */
  --blue: #0F55B0;   --blue-top: #3D7BD0;   --blue-side: #093C80;   --blue-ink: #FFFFFF;
  --green: #1B8038;  --green-top: #3FA55C;  --green-side: #135C29;  --green-ink: #FFFFFF;
  --yellow: #FFC20E; --yellow-top: #FFD75A; --yellow-side: #C79300; --yellow-ink: #1A1A1A;
  --red: #D7332A;    --red-top: #E8635B;    --red-side: #A3241D;    --red-ink: #FFFFFF;

  --paper: #F4F1EA;
  --card: #FFFFFF;
  --ink: #16181D;
  --ink-soft: #565C68;
  --line: #DCD6CA;
  --accent: #16181D;
  --accent-ink: #FFFFFF;
  --shadow: rgba(22, 24, 29, 0.16);

  /* Physical, not thematic: a QR code must sit on white to scan, and the
     brick's gloss and shade are light and dark whatever the page theme. */
  --qr-bg: #FFFFFF;
  --gloss: #FFFFFF;
  --shade: #000000;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tap: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14161A;
    --card: #1E2127;
    --ink: #F2F3F5;
    --ink-soft: #A7AEBB;
    --line: #333842;
    --accent: #F2F3F5;
    --accent-ink: #14161A;
    --shadow: rgba(0, 0, 0, 0.5);
  }
}