/*
 * Design tokens. Every colour pair used for text is AA (4.5:1) or better.
 *
 * Accent: indigo, the colour of adire and other indigo-dyed cloth across West
 * Africa. One confident accent for verdicts and CTAs, deliberately not
 * money-green, so the brand reads as a referee rather than a bank.
 * Ochre is the only other brand colour and appears as a small accent (the
 * mark's tip and the woven band on the verdict card), never as decoration.
 *
 * Better/worse use green and red, but every use also carries a word and an icon.
 */
@layer tokens {
  :root {
    color-scheme: light dark;

    /* Colour: light */
    --bg: #faf8f4;
    --surface: #ffffff;
    --surface-2: #f3efe7;
    --border: #e2dccf;
    --text: #1c1a17;
    --text-2: #5a554c;
    --accent: #3b3ea6;
    --accent-ink: #ffffff;
    --accent-soft: #ececfa;
    --ochre: #d99a2b;
    --better: #14744a;
    --better-soft: #e4f3eb;
    --worse: #b42318;
    --worse-soft: #fbe9e6;
    --focus: #3b3ea6;
    --shadow: 0 1px 2px rgb(28 26 23 / 0.06), 0 4px 16px rgb(28 26 23 / 0.04);

    /* Type: system stacks, zero downloads. Serif only for display. */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", sans-serif;
    --font-serif: "Iowan Old Style", "Charter", "Noto Serif", Georgia, serif;
    --text-xs: 0.8125rem;
    --text-s: 0.9375rem;
    --text-m: 1.0625rem;
    --text-l: 1.25rem;
    --text-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
    --text-2xl: clamp(1.875rem, 1.4rem + 2.2vw, 2.75rem);
    --text-hero: clamp(1.625rem, 1.3rem + 1.5vw, 2.25rem);

    /* Space: 4px base */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;

    --radius-s: 6px;
    --radius-m: 12px;
    --radius-pill: 999px;
    --tap: 2.75rem; /* 44px minimum target */
    --measure: 68ch;
    --wrap: 72rem;
    --gutter: 1rem;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #131210;
      --surface: #1c1b18;
      --surface-2: #25231f;
      --border: #37342d;
      --text: #f2efe8;
      --text-2: #b5afa3;
      --accent: #a9acff;
      --accent-ink: #14143a;
      --accent-soft: #25264a;
      --ochre: #e6ac45;
      --better: #5fd39a;
      --better-soft: #16301f;
      --worse: #ff8f80;
      --worse-soft: #3a1c18;
      --focus: #a9acff;
      --shadow: none;
    }
  }

  :root[data-theme="dark"] {
    --bg: #131210;
    --surface: #1c1b18;
    --surface-2: #25231f;
    --border: #37342d;
    --text: #f2efe8;
    --text-2: #b5afa3;
    --accent: #a9acff;
    --accent-ink: #14143a;
    --accent-soft: #25264a;
    --ochre: #e6ac45;
    --better: #5fd39a;
    --better-soft: #16301f;
    --worse: #ff8f80;
    --worse-soft: #3a1c18;
    --focus: #a9acff;
    --shadow: none;
  }

  @media (min-width: 48rem) {
    :root { --gutter: 1.5rem; }
  }
}