/* Helix Reader design tokens. Dove-rose paper, mulberry ink, heather mauve accent, five set colours.
   Re-paletted 2026-10-21 (was sea-glass + sea teal). */
:root {
  --paper: #f2e8ea;
  --surface: #faf6f6;
  --surface-2: #e4dadd;
  --ink: #2a1f27;
  --mute: #6a5a64;
  --line: #d8ccd1;
  --hl: #efc9de;
  --accent: var(--mauve);
  --on-accent: #fff;

  --mauve: #8d4b7a;
  --mauve-tint: #f0dfe9;
  --rose: #c0405a;
  --rose-tint: #f7dce2;
  --sun: #a87410;
  --sun-tint: #f5e7c4;
  --clay: #8a6145;
  --clay-tint: #eddfd3;
  --slate: #3d5e86;
  --slate-tint: #dbe4ef;

  /* backdrop: three light pools + halftone ripple */
  --pool-a: rgba(141, 75, 122, .16);
  --pool-b: rgba(168, 116, 16, .12);
  --pool-c: rgba(61, 94, 134, .12);
  --ripple: rgba(141, 75, 122, .10);

  --foot-bg: #2a1f27;
  --foot-ink: #f1e8ec;
  --foot-mute: #bfaeb8;
  --foot-line: #43353e;
  --foot-field: #382b34;

  --shadow: 0 1px 2px rgba(42, 31, 39, .06), 0 10px 30px -12px rgba(42, 31, 39, .18);
  --r-sm: 10px;
  --r: 18px;
  --r-lg: 28px;
  --font-display: 'Red Hat Display', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22, .8, .24, 1);
  color-scheme: light;
}

:root[data-theme='dark'] {
  --paper: #1b1619;
  --surface: #251e23;
  --surface-2: #30272d;
  --ink: #f1e7ec;
  --mute: #b6a4ae;
  --line: #41353c;
  --hl: #5e3253;
  --on-accent: #1b1619;

  --mauve: #dc9cc8;
  --mauve-tint: #3d2536;
  --rose: #f08a9f;
  --rose-tint: #42222b;
  --sun: #e6b552;
  --sun-tint: #3b2f14;
  --clay: #d4a582;
  --clay-tint: #3a2b20;
  --slate: #97b4da;
  --slate-tint: #1f2a3a;

  --pool-a: rgba(220, 156, 200, .13);
  --pool-b: rgba(230, 181, 82, .07);
  --pool-c: rgba(151, 180, 218, .09);
  --ripple: rgba(220, 156, 200, .09);

  --foot-bg: #130f12;
  --foot-ink: #eadfe5;
  --foot-mute: #a5949e;
  --foot-line: #31272d;
  --foot-field: #221b20;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -12px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* Set colour hooks: any element with s-<colour> exposes --c (strong) and --ct (tint). */
.s-mauve { --c: var(--mauve); --ct: var(--mauve-tint); }
.s-rose { --c: var(--rose); --ct: var(--rose-tint); }
.s-sun { --c: var(--sun); --ct: var(--sun-tint); }
.s-clay { --c: var(--clay); --ct: var(--clay-tint); }
.s-slate { --c: var(--slate); --ct: var(--slate-tint); }
.s-ink { --c: var(--ink); --ct: var(--surface-2); }