/* Design tokens only. Two layers: raw scale, then semantic aliases.
   Components must reference semantic names, never raw ones.
   There is deliberately no shadow token — depth comes from palette and hard edges. */

:root {
  /* raw palette */
  --color-night: #101728;
  --color-indigo: #1d2b50;
  --color-indigo-deep: #16213d;
  --color-wool: #f2ecdf;
  --color-pomegranate: #c1272d;
  --color-saffron: #e8a33d;
  --color-turquoise: #1f8a8a;

  --wool-70: rgb(242 236 223 / 70%);
  --wool-55: rgb(242 236 223 / 55%);
  --wool-22: rgb(242 236 223 / 22%);
  --wool-10: rgb(242 236 223 / 10%);

  /* semantic surfaces and text */
  --surface-ground: var(--color-night);
  --surface-raised: var(--color-indigo);
  --surface-sunken: var(--color-indigo-deep);
  --text-primary: var(--color-wool);
  --text-muted: var(--wool-70);
  --text-faint: var(--wool-55);

  --color-danger: var(--color-pomegranate);
  --color-confirm: var(--color-turquoise);
  --color-accent: var(--color-saffron);

  /* the weave: intact pattern, spent pattern, endgame pattern */
  --weave-intact: var(--color-wool);
  --weave-spent: var(--wool-10);
  --weave-endgame: var(--color-pomegranate-bright);
  --color-danger-bright: var(--color-pomegranate-bright);
  --strike: var(--color-pomegranate-bright);

  /* motif geometry — the only shape vocabulary in the build */
  --motif-notch: 14px;
  --motif-step: 7px;

  /* the page gutter: every screen's side padding, and what full-bleed elements pull
     back by, so the two can never disagree */
  --gutter: 20px;

  /* space, 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;

  /* type */
  --font-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-ui: 'Public Sans', system-ui, -apple-system, sans-serif;
  --display-stretch: 112%;
  --step--1: 14px;
  --step-0: 16px;
  --step-1: 20px;
  --step-2: 26px;
  --step-3: 34px;
  --step-4: 44px;
  --word-size: 48px;
  --word-min: 26px;
  --word-max: 50px;

  /* motion */
  --dur-fast: 90ms;
  --dur-base: 120ms;
  --ease: cubic-bezier(0.2, 0, 0.4, 1);

  /* touch targets */
  --target-min: 56px;
  --target-primary: 76px;
}