/* Five Board Sudoku · site tokens
 * Values follow promo/kit/marketing/brand-guide.md and the app's own styles.css,
 * converted to OKLCH. Every colour and face used by site.css is named here.
 * Layout: the puzzle is the map. One live board sits in a sticky stage and the
 * copy scrolls past it; each passage moves the camera to the part it describes.
 */
@import url("../fonts/fonts.css");

:root {
  color-scheme: light;

  /* paper and ink */
  --color-paper:      oklch(94.4% 0.018 86.1);
  --color-paper-deep: oklch(91.1% 0.028 88.8);
  --color-paper-card: oklch(96.2% 0.017 88.0);
  --color-ink:        oklch(25.1% 0.015 76.2);
  --color-ink-soft:   oklch(33.0% 0.016 76.2);
  --color-muted:      oklch(51.4% 0.026 80.6);
  --color-rule:       oklch(25.1% 0.015 76.2 / 0.55);
  --color-hairline:   oklch(25.1% 0.015 76.2 / 0.22);
  --color-on-ink:     oklch(97.9% 0.011 89.7);

  /* the one red, and pen blue */
  --color-red:        oklch(52.1% 0.158 30.3);
  --color-red-ink:    oklch(46.0% 0.165 29.7);
  --color-pen:        oklch(45.1% 0.095 260.0);
  --color-focus:      oklch(45.1% 0.095 260.0);

  /* the board, as the app draws it */
  --color-board:      oklch(97.9% 0.011 89.7);
  --color-corner:     oklch(93.5% 0.028 88.8);
  --color-overlap:    oklch(89.1% 0.067 87.1);
  --color-line:       oklch(82.2% 0.032 88.4);
  --color-peer:       oklch(25.1% 0.015 76.2 / 0.075);
  --color-same:       oklch(90.9% 0.017 250.9);
  --color-sel:        oklch(88.8% 0.121 92.5);
  --color-sel-line:   oklch(62.3% 0.118 84.3);
  --color-stamp:      oklch(52.1% 0.158 30.3 / 0.38);
  --color-notes:      oklch(60.7% 0.025 80.6);

  /* type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-digits:  "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;

  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1.1875rem;
  --text-lg:   1.375rem;
  --text-xl:   clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  --text-2xl:  clamp(2rem, 1.4rem + 2.2vw, 3rem);
  --text-3xl:  clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  --text-display: clamp(2.75rem, 1.5rem + 4vw, 5rem);
  --text-nameplate: clamp(1.75rem, 0.4rem + 7vw, 4.5rem);

  /* 4pt spacing */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --measure: 34rem;
  --bar-h: 3.25rem;

  /* rules and radii */
  --rule-hair: 1px;
  --rule-double: 3px;
  --radius-sm: 3px;
  --radius-md: 6px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-paper:      oklch(21.9% 0.007 78.2);
    --color-paper-deep: oklch(24.9% 0.010 80.6);
    --color-paper-card: oklch(25.8% 0.007 67.5);
    --color-ink:        oklch(91.7% 0.019 86.1);
    --color-ink-soft:   oklch(84.0% 0.019 86.1);
    --color-muted:      oklch(70.2% 0.031 84.6);
    --color-rule:       oklch(91.7% 0.019 86.1 / 0.4);
    --color-hairline:   oklch(91.7% 0.019 86.1 / 0.16);
    --color-on-ink:     oklch(21.9% 0.007 78.2);
    --color-red:        oklch(61.1% 0.155 29.0);
    --color-red-ink:    oklch(69.2% 0.139 28.2);
    --color-pen:        oklch(75.0% 0.079 257.7);
    --color-focus:      oklch(75.0% 0.079 257.7);
    --color-board:      oklch(24.1% 0.009 75.2);
    --color-corner:     oklch(27.2% 0.013 72.3);
    --color-overlap:    oklch(36.0% 0.044 76.8);
    --color-line:       oklch(37.8% 0.013 76.4);
    --color-peer:       oklch(91.7% 0.019 86.1 / 0.07);
    --color-same:       oklch(32.2% 0.042 258.3);
    --color-sel:        oklch(45.9% 0.075 84.9);
    --color-sel-line:   oklch(79.8% 0.134 88.8);
    --color-stamp:      oklch(61.1% 0.155 29.0 / 0.45);
    --color-notes:      oklch(66.4% 0.028 82.3);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-paper:      oklch(21.9% 0.007 78.2);
  --color-paper-deep: oklch(24.9% 0.010 80.6);
  --color-paper-card: oklch(25.8% 0.007 67.5);
  --color-ink:        oklch(91.7% 0.019 86.1);
  --color-ink-soft:   oklch(84.0% 0.019 86.1);
  --color-muted:      oklch(70.2% 0.031 84.6);
  --color-rule:       oklch(91.7% 0.019 86.1 / 0.4);
  --color-hairline:   oklch(91.7% 0.019 86.1 / 0.16);
  --color-on-ink:     oklch(21.9% 0.007 78.2);
  --color-red:        oklch(61.1% 0.155 29.0);
  --color-red-ink:    oklch(69.2% 0.139 28.2);
  --color-pen:        oklch(75.0% 0.079 257.7);
  --color-focus:      oklch(75.0% 0.079 257.7);
  --color-board:      oklch(24.1% 0.009 75.2);
  --color-corner:     oklch(27.2% 0.013 72.3);
  --color-overlap:    oklch(36.0% 0.044 76.8);
  --color-line:       oklch(37.8% 0.013 76.4);
  --color-peer:       oklch(91.7% 0.019 86.1 / 0.07);
  --color-same:       oklch(32.2% 0.042 258.3);
  --color-sel:        oklch(45.9% 0.075 84.9);
  --color-sel-line:   oklch(79.8% 0.134 88.8);
  --color-stamp:      oklch(61.1% 0.155 29.0 / 0.45);
  --color-notes:      oklch(66.4% 0.028 82.3);
}