/* Paper Grove tokens: every value from designs/b/SPEC.md §4-§6. Views use these, never raw hex. */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/fraunces-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/fonts/fraunces-italic.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/fonts/figtree.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/atkinson-mono-400.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/atkinson-mono-600.woff2") format("woff2"); }

:root {
  /* §4 fonts */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-ui: "Figtree", system-ui, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", "IBM Plex Mono", ui-monospace, monospace;
  --font-soft: "SOFT" 100; /* font-variation-settings for Fraunces */

  /* §4 type scale: size / line-height / weight / tracking */
  --text-display-xl-size: 64px; --text-display-xl-lh: 1.05; --text-display-xl-weight: 600; --text-display-xl-tracking: -0.02em;
  --text-h1-size: 44px; --text-h1-lh: 1.1; --text-h1-weight: 600;
  --text-h2-size: 30px; --text-h2-lh: 1.2; --text-h2-weight: 600;
  --text-h3-size: 22px; --text-h3-lh: 1.3; --text-h3-weight: 600;
  --text-momo-size: 20px; --text-momo-lh: 1.35; --text-momo-weight: 400; /* Fraunces italic */
  --text-stat-size: 56px; --text-stat-lh: 1; --text-stat-weight: 600; /* tabular lining */
  --text-body-l-size: 18px; --text-body-l-lh: 1.55; --text-body-l-weight: 400;
  --text-body-size: 16px; --text-body-lh: 1.5; --text-body-weight: 400;
  --text-small-size: 14px; --text-small-lh: 1.45; --text-small-weight: 500;
  --text-label-size: 14px; --text-label-lh: 1; --text-label-weight: 700; --text-label-tracking: normal; /* sentence case labels: no letter tracking */
  --text-passage-size: 28px; --text-passage-lh: 1.95; --text-passage-weight: 400; --text-passage-tracking: 0.015em;
  --text-keycap-size: 16px; --text-keycap-weight: 600; /* uppercase */

  /* §5 colour */
  --color-cream: #F4EBD6;
  --color-rice: #FBF6EA;
  --color-oat: #E8DCC0;
  --color-oat-edge: #D6C7A4;
  --color-oat-deep: #EAD9B8; /* the navigation rail: one step deeper than the page */
  --color-ink: #1F2B45;
  --color-dusk-ink: #4A5672;
  --color-fog-ink: #5B6680;
  --color-sage-leaf: #BFCDAE;
  --color-sage: #8FA67E;
  --color-moss: #4E6B3E;
  --color-deep-moss: #3F5A33;
  --color-sage-mist: #DDE7CF;
  --color-terracotta: #C0623C;
  --color-clay: #A4492A;
  --color-honey: #E7AE45;
  --color-honey-wash: #F9E3B0;
  --color-amber-ink: #8A5A00;
  --color-brick: #A63F3A;
  --color-rose-wash: #F4D8D2;
  --color-dusk-blue: #3D5A8A;
  --color-dusk-wash: #D6E0EE;

  /* §5 semantic aliases */
  --color-bg: var(--color-cream);
  --color-card: var(--color-rice);
  --color-text: var(--color-ink);
  --color-text-2: var(--color-dusk-ink);
  --color-text-3: var(--color-fog-ink);
  --color-passage-typed: var(--color-moss);
  --color-passage-current-bg: var(--color-honey-wash);
  --color-passage-upcoming: var(--color-dusk-ink);
  --color-passage-fixed: #7F5200; /* right in the end, not on the first try: amber, 6.3:1 on the card and 5.0:1 on the paused oat */
  --color-passage-wrong: var(--color-brick);
  --color-passage-wrong-bg: var(--color-rose-wash);
  --color-focus: var(--color-dusk-blue);

  /* v0.4 role tokens (theme contract §3): new code pairs a fill with its --color-on-* text */
  --color-surface-2: var(--color-oat);
  --color-line: var(--color-oat-edge);
  --color-primary: var(--color-honey);
  --color-on-primary: var(--color-ink);
  --color-accent: var(--color-moss);
  --color-on-accent: var(--color-rice);
  --color-reward: var(--color-honey);
  --color-danger: var(--color-brick);
  --color-danger-wash: var(--color-rose-wash);

  /* §5 finger zones (ink text on each >= 7.3:1) */
  --zone-left-pinky: #E7B1B6;
  --zone-left-ring: #F0BC9A;
  --zone-left-middle: #F0D07F;
  --zone-left-index: #BBD09F;
  --zone-right-index: #9ED0C4;
  --zone-right-middle: #A9C4E0;
  --zone-right-ring: #C4B8E0;
  --zone-right-pinky: #D9AFCB;
  --zone-thumb: #E8DCC0;

  /* §6 radius */
  --radius-sm: 8px;
  --radius-md: 12px; /* buttons */
  --radius-lg: 20px; /* cards */
  --radius-xl: 28px; /* hero cards */
  --radius-pill: 999px;

  /* §6 spacing scale (board sections use 84; frame gutter 32) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px; --space-section: 84px;
  --gutter: var(--space-6);

  /* §6 edges and shadows (warm brown) */
  --edge: 1px solid rgba(74, 50, 25, 0.16);
  --halo-selected: 0 0 0 3px var(--color-moss);
  --shadow-card: 0 1px 0 #fff8 inset, 0 1px 2px rgba(74, 50, 25, 0.14), 0 8px 18px -6px rgba(74, 50, 25, 0.22);
  --shadow-floating: 0 1px 0 #fff8 inset, 0 2px 4px rgba(74, 50, 25, 0.18), 0 18px 32px -8px rgba(74, 50, 25, 0.34);
  --shadow-rail: inset -8px 0 14px -10px rgba(74, 50, 25, 0.35);
  --shadow-lantern: 0 0 24px 4px rgba(231, 174, 69, 0.55); /* the only coloured glow */

  /* §6 buttons and focus */
  --button-height: 44px;
  --button-lip: 3px;
  --focus-ring: 3px solid var(--color-focus);
  --focus-offset: 3px;
}

/* Colour-blind friendly finger colours (Settings, palette "cb"): Okabe-Ito hue families as light tints, mirrored on both hands except the index
   fingers. Neighbouring zones differ by CIEDE2000 >= 15 for normal vision, deuteranopia, protanopia and tritanopia; ink on each >= 4.5:1 (test/web/palette.test.ts). */
:root.cb {
  --zone-left-pinky: #EFC159; --zone-right-pinky: #EFC159;
  --zone-left-ring: #91CEF1; --zone-right-ring: #91CEF1;
  --zone-left-middle: #E49659; --zone-right-middle: #E49659;
  --zone-left-index: #59A3CD;
  --zone-right-index: #F8F3AA;
}