/* Design tokens
   Primitives are the raw materials. Semantics are how the page uses them.
   Ink stays one cool slate — the "blue" — so every page has two colors.
   Seasons only remap paper, accent, and wash. The pasture does the rest. */

html {
  /* Primitive: paper. Almost white, with a seasonal lean. */
  --paper: #faf8f4;
  --paper-cool: #f3f6f8;
  --paper-fresh: #f7f9f5;
  --paper-warm: #faf6f1;

  /* Primitive: ink. One cool slate, used in every season. */
  --ink: #32404f;

  /* Primitive: mist (secondary text). Same slate, quieter. */
  --mist: #7a848c;

  /* Primitive: accent. The second color; this is what seasons. */
  --honey: #c88828;
  --teal: #2f7a78;
  --blossom: #c46b78;
  --maple: #d4652a;

  /* Primitive: wash. A second hue for card fills, not a tint of accent. */
  --wash-honey: #efe4c8;
  --wash-teal: #dce6ee;
  --wash-blossom: #e4efe3;
  --wash-maple: #f0ddd0;

  /* Semantic: what the UI paints. Summer is the home key. */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-muted: var(--mist);
  --accent: var(--honey);
  --wash: var(--wash-honey);
  --border: color-mix(in srgb, var(--fg) 8%, transparent);
  --fill: color-mix(in srgb, var(--fg) 6%, var(--bg));
  --card: color-mix(in srgb, var(--fg) 4%, var(--bg));
  --selection: color-mix(in srgb, var(--accent) 38%, var(--bg));
  --selection-fg: var(--fg);

  /* The reading column. The pasture stays full width. */
  --content: 1160px;
  --toc-width: 11rem;
  --radius: 4px;

  /* Type roles. Mono for chrome, labels, and meta; serif for everything you read. */
  --type-chrome: 13px;
  --type-nav: 11px;
  --type-meta: 13px;
  --type-label: 15px;
  --type-body: 17px;
  --type-entry: 19px;
  --type-section: 24px;
  --type-headline: clamp(22px, 0.8vw + 17px, 28px);
  --type-page: clamp(30px, 3.4vw, 40px);
  --type-project: clamp(36px, 3vw + 20px, 56px);
  --type-display: clamp(24px, 3.5vw, 36px);
  --track-chrome: 0.1em;
  --track-meta: 0;
  --track-body: 0;
  --track-entry: -0.005em;
  --track-section: -0.01em;
  --track-page: -0.015em;
  --track-display: -0.02em;

  /* Space. The column gap is the key step. */
  --space-tight: 8px;
  --space-stack: 16px;
  --space-block: 28px;
  --space-grid: 40px;
  --space-section: 80px;
}

html[data-season="winter"] {
  --bg: var(--paper-cool);
  --accent: var(--teal);
  --wash: var(--wash-teal);
}

html[data-season="spring"] {
  --bg: var(--paper-fresh);
  --accent: var(--blossom);
  --wash: var(--wash-blossom);
}

html[data-season="fall"] {
  --bg: var(--paper-warm);
  --accent: var(--maple);
  --wash: var(--wash-maple);
}

html {
  background: var(--bg);
  color: var(--fg);
}