/* Design tokens. Literal values from ux-design/handoff/tokens.json.
 *
 * Every colour in the design is here and nowhere else. A hex code written
 * directly into a component rule is a bug: the handoff is the source of truth,
 * and a value that only exists in one stylesheet cannot be checked against it.
 *
 * #A69A8D and #B5AA9E were in an earlier draft and FAILED WCAG AA. They were
 * replaced by --text-muted and --text-faint. Do not reintroduce them.
 */

:root {
  /* Ink — dark surfaces and primary text */
  --ink: #1b1512;
  --ink-raised: #2a231e;
  --ink-line: #3a322c;
  --ink-line-strong: #4a403a;

  /* Accents */
  --red: #b5342a;
  --red-deep: #8e2620;
  --ochre: #d9a03c;
  --ochre-hover: #e8af4b;
  --blue: #2c3e76;
  --blue-hover: #33488a;
  --green: #4f7a4a;
  --green-hover: #5a8a54;
  --green-text: #3e6339;

  /* Light surfaces */
  --cream: #faf6f0;
  --sand: #ede6dc;
  --sand-warm: #f1e5d2;
  --border: #e4dbce;
  --border-dashed: #c4b8a7;

  /* Text */
  --text-body: #5e5449;
  --text-muted: #6b6055;
  --text-faint: #8a7f73; /* tertiary only, never below 14px */
  --text-on-ink: #f5efe6;
  --text-on-ink-muted: #b9aea1;

  /* Day gate, on red */
  --gate-heading: #fff6ec;
  --gate-body: #ffe0c8;

  /* Answer feedback */
  --feedback-correct-bg: #e8f1e5;
  --feedback-wrong-bg: #f7e2de;
  --feedback-selected-bg: #f1e5d2;

  /* Review grades */
  --grade-again-bg: #f3ddd9;
  --grade-again-fg: #8e2620;
  --grade-hard-bg: #f5e7cf;
  --grade-hard-fg: #7a5718;

  /* Type */
  --font-display: "Instrument Serif", Georgia, serif;
  --font-ui: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  /* Radius */
  --r-pill: 999px;
  --r-tile: 18px;
  --r-card: 20px;
  --r-card-lg: 24px;
  --r-card-xl: 28px;
  --r-flashcard: 30px;
  --r-sheet: 34px;

  /* Spacing — 4px base */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --card-pad: 18px;

  /* The beadwork rule. The one decorative element in the app; add no others. */
  --beadwork: repeating-linear-gradient(
    90deg,
    #b5342a 0 10px,
    #1b1512 10px 14px,
    #2c3e76 14px 24px,
    #d9a03c 24px 28px
  );

  /* Layout */
  --sidebar-w: 248px;
  --tabbar-h: 64px;
  --tap-min: 44px; /* WCAG minimum hit target */
}

@media (min-width: 900px) {
  :root {
    --card-pad: clamp(20px, 3vw, 44px);
  }
}