/* Hallmark · route: custom (bespoke) · structure: five pages, five grammars (gallery · ledger · bench · chapters · receipt)
 * idea: "a black-light switch regrades the whole site; every tag has a back side"
 * paper: oklch(15.5% 0.018 268) night · accent: oklch(76% 0.16 355) neon pink (the logo's asterisk)
 * display: Fraunces (roman, soft) · body: Archivo (variable width)
 * axes: dark / roman-serif / chromatic-other (pink ~355°) · gates: run at handoff · studied: no
 */

:root {
  /* ---- night ground (default) ---- */
  --color-paper:    oklch(15.5% 0.018 268);
  --color-paper-2:  oklch(19%   0.020 268);
  --color-paper-3:  oklch(23.5% 0.022 268);
  --color-rule:     oklch(33%   0.020 268);
  --color-rule-2:   oklch(27%   0.020 268);
  --color-muted:    oklch(66%   0.020 268);
  --color-ink-2:    oklch(82%   0.016 268);
  --color-ink:      oklch(95%   0.012 95);
  --color-accent:   oklch(76%   0.16  355);
  --color-accent-ink: oklch(17% 0.020 268);
  --color-focus:    oklch(82%   0.19  355);

  /* brand light: used as light in scenes and as data series in graphs, never as UI fill */
  --neon-cyan:   oklch(85% 0.14 215);
  --neon-pink:   oklch(76% 0.16 355);
  --neon-yellow: oklch(92% 0.17 102);

  /* price-tag stock (a material, not a ground) */
  --tag-paper:   oklch(89%  0.040 84);
  --tag-paper-2: oklch(84%  0.045 80);
  --tag-ink:     oklch(25%  0.025 60);
  --tag-ink-2:   oklch(42%  0.030 62);
  --tag-string:  oklch(78%  0.030 80);

  /* UV inks: only visible on the black-light side */
  --uv-ground:   oklch(13%  0.060 292);
  --uv-ground-2: oklch(17.5% 0.075 292);
  --uv-violet:   oklch(52%  0.200 295);
  --uv-green:    oklch(90%  0.230 142);
  --uv-white:    oklch(93%  0.060 250);
  --uv-pink:     oklch(80%  0.200 350);

  /* scrim (always the ground hue) */
  --scrim:       oklch(12% 0.018 268 / 0.86);
  --scrim-soft:  oklch(12% 0.018 268 / 0);

  /* ---- type ---- */
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body:    "Archivo", ui-sans-serif, system-ui, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.5625rem;
  --text-xl:   1.953rem;
  --text-2xl:  2.441rem;
  --text-3xl:  clamp(2.2rem, 2.2vw + 1.4rem, 3.05rem);
  --text-display-s: clamp(2.35rem, 3.4vw + 1rem, 4.1rem);
  --text-display:   clamp(2.75rem, 5vw + 1rem, 5.25rem);

  --track-tight: -0.022em;
  --track-label: 0.12em;

  /* ---- space (4pt) ---- */
  --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: 4rem;
  --space-9: 6rem;     --space-10: 8rem;
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --measure: 62ch;
  --section: clamp(4rem, 9vw, 8rem);

  /* ---- shape, depth, motion ---- */
  --radius-1: 3px; --radius-2: 6px; --radius-3: 12px; --radius-pill: 999px;
  --edge: inset 0 1px 0 oklch(100% 0 0 / 0.07);
  --shadow-1: 0 1px 2px oklch(5% 0.02 268 / 0.5), 0 2px 8px oklch(5% 0.02 268 / 0.35);
  --shadow-2: 0 6px 18px oklch(5% 0.02 268 / 0.5), 0 2px 4px oklch(5% 0.02 268 / 0.4);
  --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;

  /* z scale */
  --z-scene: 0; --z-content: 10; --z-chrome: 40; --z-tag: 45; --z-drawer: 60; --z-flash: 80;

  /* map onto the scrollcraft engine's tokens */
  --sc-canvas: var(--color-paper);
  --sc-surface: var(--color-paper-2);
  --sc-ink: var(--color-ink);
  --sc-ink-soft: var(--color-ink-2);
  --sc-accent: var(--color-accent);
  --sc-accent-ink: var(--color-accent-ink);
  --sc-font-display: var(--font-display);
  --sc-font-text: var(--font-body);

  color-scheme: dark;
}

/* ---- black light: the whole site regrades ---- */
:root[data-light="uv"] {
  --color-paper:    var(--uv-ground);
  --color-paper-2:  var(--uv-ground-2);
  --color-paper-3:  oklch(22% 0.085 292);
  --color-rule:     oklch(36% 0.10 292);
  --color-rule-2:   oklch(29% 0.09 292);
  --color-muted:    oklch(72% 0.06 280);
  --color-ink-2:    oklch(85% 0.05 270);
  --color-ink:      var(--uv-white);
  --color-accent:   var(--uv-pink);
  --color-accent-ink: oklch(15% 0.06 292);
  --color-focus:    oklch(88% 0.2 142);
  --scrim:          oklch(11% 0.06 292 / 0.86);
  --scrim-soft:     oklch(11% 0.06 292 / 0);
}

/* ---- paper grounds (estate chapters, the receipt) ---- */
.ground-paper {
  --color-paper:   oklch(95%  0.010 240);
  --color-paper-2: oklch(92%  0.012 240);
  --color-paper-3: oklch(88%  0.014 240);
  --color-rule:    oklch(80%  0.014 240);
  --color-rule-2:  oklch(86%  0.012 240);
  --color-muted:   oklch(45%  0.020 262);
  --color-ink-2:   oklch(38%  0.020 262);
  --color-ink:     oklch(21%  0.022 265);
  --color-accent:  oklch(52%  0.19  355);
  --color-accent-ink: oklch(97% 0.008 240);
  --color-focus:   oklch(50%  0.21  355);
  --scrim: oklch(95% 0.01 240 / 0.9);
  --scrim-soft: oklch(95% 0.01 240 / 0);
  color-scheme: light;
  background-color: var(--color-paper);
  color: var(--color-ink);
}
/* Under the black light, paper made with optical brighteners glows blue-white. */
:root[data-light="uv"] .ground-paper {
  --color-paper:   oklch(80%  0.085 262);
  --color-paper-2: oklch(76%  0.090 264);
  --color-paper-3: oklch(72%  0.095 266);
  --color-rule:    oklch(62%  0.10  272);
  --color-rule-2:  oklch(70%  0.09  270);
  --color-muted:   oklch(30%  0.06  285);
  --color-ink-2:   oklch(26%  0.06  285);
  --color-ink:     oklch(17%  0.05  290);
  --color-accent:  oklch(45%  0.20  350);
  --color-focus:   oklch(40%  0.2   300);
  --scrim: oklch(80% 0.085 262 / 0.9);
  --scrim-soft: oklch(80% 0.085 262 / 0);
}