/*
 * Design tokens for The Tiny Forest Fairy.
 *
 * Two layers. Scales (space, type, radius, motion, line) are fixed. Semantic
 * tokens (--color-*, --font-*, and the component knobs below them) are what
 * components read; restyle a component by changing these, not by overriding
 * its rules.
 */
:root {
  /* Space: a modular scale on a 4px grid, fluid at the large end. */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  --space-xl: clamp(3rem, 2.2rem + 3vw, 5rem);
  --space-2xl: clamp(4.5rem, 3rem + 6vw, 8rem);
  --space-3xl: clamp(6rem, 4rem + 10vw, 12rem);
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --measure: 34rem;
  --page-max: 76rem;

  /* Type: fluid steps, ~1.25 ratio on phones to ~1.333 on desktops. */
  --step--2: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --step--1: clamp(0.84rem, 0.82rem + 0.12vw, 0.92rem);
  --step-0: clamp(1rem, 0.97rem + 0.18vw, 1.1rem);
  --step-1: clamp(1.2rem, 1.13rem + 0.35vw, 1.45rem);
  --step-2: clamp(1.44rem, 1.3rem + 0.7vw, 1.95rem);
  --step-3: clamp(1.73rem, 1.48rem + 1.25vw, 2.6rem);
  --step-4: clamp(2.07rem, 1.65rem + 2.1vw, 3.45rem);
  --step-5: clamp(2.5rem, 1.8rem + 3.5vw, 4.6rem);
  --step-6: clamp(3rem, 1.9rem + 5.5vw, 6.4rem);
  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-body: 1.6;
  --tracking-caps: 0.14em;

  /* Shape */
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 28px;
  --radius-pill: 999px;

  /* Line art: stroke widths in the drawings' own units (viewBox 120x150). */
  --line-fine: 1;
  --line: 1.5;
  --line-bold: 2.2;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-float: cubic-bezier(0.37, 0, 0.63, 1);
  --dur-fast: 160ms;
  --dur-m: 420ms;
  --dur-slow: 900ms;
  --dur-draw: 2200ms;

  /* Layers */
  --z-scene: 0;
  --z-content: 10;
  --z-header: 50;

  /* Semantic tokens: the night theme, which is the default (a page without
   * script has no data-theme). The site is a sketchbook of dark paper drawn
   * in pale ink, lit by a lantern's gold (--color-accent) and by the fairy,
   * the one thing in full colour. These are the only values a theme sets:
   * the day theme below is this block again with daylight values, and
   * nothing else changes. */
  color-scheme: dark;
  --color-bg: #0c1624;
  --color-bg-deep: #070f1a;
  --color-surface: #13202f;
  --color-ink: #f1e9d8;
  --color-ink-soft: #a4b3c3;
  --color-line: #e4d9c1;
  --color-accent: #f0cc78;
  --color-accent-ink: #0c1624;
  --color-glow: #f3c96a;
  --color-focus: #f0cc78;
  --color-rule: rgb(228 217 193 / 0.18);
  /* Shadows fall darker than the paper; highlights are moonlight. */
  --color-shadow: rgb(0 0 0 / 0.55);
  --color-sheen: rgb(255 255 255 / 0.06);
  /* Things taped into the journal: photographic prints (their paper, and
   * the ink written on it) and the tape itself. */
  --color-print: color-mix(in oklab, var(--color-line) 84%, var(--color-bg));
  --color-print-ink: var(--color-bg-deep);
  --color-tape: color-mix(in oklab, var(--color-line) 16%, transparent);
  --color-tape-edge: color-mix(in oklab, var(--color-line) 26%, transparent);
  /* The browser's own chrome (theme-color): the top of the opening sky. */
  --color-chrome: #050b16;

  /* The palette: vivid, every value one of the 216 web-safe colours
   * (each channel 00, 33, 66, 99, cc or ff). They are for paint (fills
   * outlined in ink, glows, sparks), not for text. */
  --vivid-pink: #f39;
  --vivid-tangerine: #f60;
  --vivid-sun: #fc0;
  --vivid-leaf: #3c6;
  --vivid-lagoon: #0cc;
  --vivid-sky: #39f;
  --vivid-violet: #93f;
  /* Pale partners, for large fills and light. */
  --vivid-peach: #fc9;
  --vivid-mist: #9ff;
  --vivid-lemon: #ff9;

  /* The fairy, painted from the palette. */
  --fairy-dress: var(--vivid-pink);
  --fairy-cap: var(--vivid-leaf);
  --fairy-face: var(--vivid-peach);
  --fairy-wings: var(--vivid-mist);
  --fairy-star: var(--vivid-sun);
  --fairy-glow: var(--vivid-lemon);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Caveat", "Bradley Hand", cursive;
  --display-variation: "SOFT" 100, "WONK" 1, "opsz" 96;
  --display-weight: 360;

  /* Component knobs. */
  /* Solid once the page moves: nothing on the page shows through it. */
  --header-bg: var(--color-bg);
  --header-rule: var(--color-rule);
  --footer-bg: var(--color-bg-deep);
  --footer-ink: var(--color-ink-soft);
  --art-accent: var(--color-accent);
  --art-glow: var(--color-glow);
}

/* The day theme: the same sketchbook in daylight, cream paper drawn in
 * dark green-black ink, notes and stamps in terracotta. Set by theme.js
 * from the visitor's choice or their system's preference. */
:root[data-theme="day"] {
  color-scheme: light;
  --color-bg: #f5efe0;
  --color-bg-deep: #ebe3cf;
  --color-surface: #fcf8ef;
  --color-ink: #1f2b24;
  --color-ink-soft: #56655b;
  --color-line: #2b3a31;
  --color-accent: #a8472a;
  --color-accent-ink: #fff8ec;
  --color-glow: #f2c14e;
  --color-focus: #a8472a;
  --color-rule: rgb(31 43 36 / 0.16);
  /* Shadows are warm and soft; highlights are paper-white. */
  --color-shadow: rgb(74 58 30 / 0.24);
  --color-sheen: rgb(255 255 255 / 0.5);
  --color-print: #fffdf7;
  --color-print-ink: var(--color-ink);
  --color-tape: rgb(236 222 178 / 0.72);
  --color-tape-edge: rgb(190 170 120 / 0.55);
  --color-chrome: #8cc0e4;
}