:root {
  color-scheme: light dark;
  /* spacing in rem, so a reader's larger text setting grows the layout with the type (8px grid at the default 16px) */
  --space-3xs: 0.125rem; --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 9rem;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --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;
  /* springs, critically damped (damping 1.0, no overshoot): the curve is x(t) = 1 - (1 + wt)e^-wt sampled to rest, so it starts
     from zero velocity, peaks early and settles; the duration sets the response (630ms = 0.4 s, 473ms = 0.3 s, 394ms = 0.25 s) */
  --ease-spring: var(--ease-out); --dur-spring: 630ms; --dur-spring-mid: 473ms; --dur-spring-fast: 394ms; --dur-press: 60ms;
  --color-error: oklch(52% 0.19 27); --color-success: oklch(50% 0.12 150);
  /* on the graphite band the error has to be lighter to read: an edge for the field, a pale line for the message */
  --color-graphite-error: oklch(70% 0.17 27); --color-graphite-error-ink: oklch(84% 0.09 27);
  --container: 1440px; --gutter: 4rem; --gap-columns: 2rem; --section-gap-s: 7.5rem; --section-gap: 9rem; --section-gap-l: 11rem;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  /* Chow Tech design system values (brand-spec.md) in the Hallmark roles, with Cobalt's material tokens turned to the brand violet */
  --color-paper: oklch(98.4% 0.003 247.9); --color-paper-2: oklch(96.8% 0.007 247.9); --color-paper-3: oklch(92.9% 0.013 255.5);
  --color-card: oklch(100% 0 0);
  --color-ink: oklch(22.8% 0.053 284.6); --color-ink-2: oklch(28% 0.037 260); --color-muted: oklch(55.4% 0.041 257.4); --color-muted-well: oklch(49% 0.045 257.4);
  --color-rule: oklch(92.9% 0.013 255.5); --color-rule-2: oklch(84% 0.03 270);
  --color-accent: oklch(57% 0.248 290.7); --color-accent-deep: oklch(38.5% 0.222 276.8); --color-accent-soft: oklch(77.9% 0.129 303.2);
  --color-accent-2: oklch(80% 0.12 300); --color-accent-wash: oklch(95.5% 0.03 295); --color-accent-edge: oklch(33% 0.17 280);
  --color-accent-ink: oklch(98.4% 0.003 247.9); --color-focus: oklch(57% 0.248 290.7); --color-link: oklch(38.5% 0.222 276.8);
  --color-graphite: oklch(22.8% 0.053 284.6); --color-graphite-2: oklch(28% 0.055 285); --color-graphite-3: oklch(33% 0.06 286);
  --color-graphite-ink: oklch(94% 0.01 290); --color-graphite-muted: oklch(70% 0.035 290); --color-graphite-rule: oklch(36% 0.06 286);
  --color-glyph-1: oklch(84% 0.05 295); --color-glyph-2: oklch(73% 0.1 295); --color-glyph-3: oklch(61% 0.15 292); --color-glyph-4: oklch(52% 0.2 291);
  --color-graphite-glyph-1: oklch(34% 0.05 288); --color-graphite-glyph-2: oklch(42% 0.08 288); --color-graphite-glyph-3: oklch(55% 0.14 290);
  --color-key-face: oklch(99.4% 0.003 250); --color-key-edge: oklch(80% 0.02 270);
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-outlier: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace; --font-serif: "Merriweather", Georgia, serif;
  --radius-card: 8px; --radius-input: 6px; --radius-pill: 999px; --rule-hair: 1px;
  --cell-w: 8px; --cell-h: 16px; --cut: 8px; --cut-l: 16px;
  --shadow-card: 0 0.2rem 0.5rem oklch(20.8% 0.04 265.8 / 0.05);
  --shadow-key: 0 3px 0 0 var(--color-key-edge), 0 6px 8px -4px oklch(22.8% 0.053 284.6 / 0.28), inset 0 1px 0 oklch(100% 0 0 / 0.9);
  --shadow-key-accent: 0 3px 0 0 var(--color-accent-edge), 0 6px 8px -4px oklch(30% 0.14 285 / 0.45), inset 0 1px 0 oklch(100% 0 0 / 0.22);
  --shadow-key-press: inset 0 1px 2px oklch(22.8% 0.053 284.6 / 0.14);
  --shadow-graphite: 0 1px 0 oklch(100% 0 0 / 0.06) inset, 0 24px 48px -24px oklch(22.8% 0.053 284.6 / 0.45);
  --shadow-lift: 0 0.2rem 0.5rem oklch(20.8% 0.04 265.8 / 0.05), 0 12px 28px -16px oklch(22.8% 0.053 284.6 / 0.35);
  /* the hero pane: paper in light mode, graphite in dark; the graph and the typed week draw on these */
  --color-pane: oklch(100% 0 0); --color-pane-2: oklch(96.8% 0.007 247.9); --color-pane-3: oklch(95.5% 0.03 295); --color-pane-ink: oklch(22.8% 0.053 284.6); --color-pane-muted: oklch(49% 0.045 257.4); --color-pane-rule: oklch(84% 0.03 270);
  --color-pane-key: oklch(38.5% 0.222 276.8); --color-scrim: oklch(22% 0.05 285 / 0.38); --color-pane-dot: oklch(57% 0.248 290.7); --color-pane-edge: oklch(57% 0.248 290.7); --color-pane-glyph: oklch(78% 0.08 295); --color-pane-focus: oklch(57% 0.248 290.7); --pane-glow: 0.55;
  --shadow-pane: 0 0 0 1px oklch(84% 0.03 270), 0 0.2rem 0.5rem oklch(20.8% 0.04 265.8 / 0.05), 0 24px 48px -24px oklch(22.8% 0.053 284.6 / 0.35);
  --tracking-display: -0.04em; --tracking-section: -0.032em; --tracking-title: -0.02em; --display-weight: 600;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --ease-spring: linear(0, 0.039, 0.1281, 0.2378, 0.3509, 0.4577, 0.5537, 0.637, 0.7075, 0.7662, 0.8144, 0.8535, 0.8849, 0.91, 0.9299, 0.9456, 0.9579, 0.9675, 0.9749, 0.9807, 0.9852, 0.9887, 0.9914, 0.9934, 0.995, 0.9962, 0.9971, 0.9978, 0.9983, 0.9987, 0.999, 0.9993, 1); }
}
/* a mode chosen on the page also sets the controls and scrollbars to match, not only the colours */
[data-mode="light"] { color-scheme: light; }
[data-mode="dark"] { color-scheme: dark; }

/* dark mode: the Chow Tech design system's dark theme (globals.css .dark) in the same roles, elevation lighter, shadows off */
[data-mode="dark"] {
  --color-paper: oklch(16% 0.012 248); --color-paper-2: oklch(19% 0.014 250); --color-paper-3: oklch(22% 0.016 252);
  --color-card: oklch(19% 0.014 250);
  --color-ink: oklch(96% 0.006 250); --color-ink-2: oklch(88% 0.012 255); --color-muted: oklch(72% 0.035 257); --color-muted-well: oklch(76% 0.03 257);
  --color-rule: oklch(28% 0.02 255); --color-rule-2: oklch(38% 0.04 268);
  --color-accent: oklch(63% 0.21 292); --color-accent-deep: oklch(72% 0.17 295); --color-accent-soft: oklch(44% 0.12 295);
  --color-accent-2: oklch(82% 0.11 300); --color-accent-wash: oklch(28% 0.07 290); --color-accent-edge: oklch(48% 0.19 290);
  --color-accent-ink: oklch(14% 0.04 280); --color-focus: oklch(72% 0.17 295); --color-link: oklch(82% 0.11 300);
  --color-graphite: oklch(25% 0.04 275); --color-graphite-2: oklch(28.5% 0.042 275); --color-graphite-3: oklch(32% 0.045 276);
  --color-graphite-ink: oklch(95% 0.01 290); --color-graphite-muted: oklch(74% 0.035 290); --color-graphite-rule: oklch(36% 0.05 280);
  --color-glyph-1: oklch(34% 0.06 290); --color-glyph-2: oklch(44% 0.09 292); --color-glyph-3: oklch(56% 0.14 292); --color-glyph-4: oklch(68% 0.17 293);
  --color-key-face: oklch(26% 0.03 262); --color-key-edge: oklch(12% 0.02 262);
  --shadow-card: none; --shadow-lift: none; --shadow-graphite: inset 0 0 0 1px oklch(34% 0.04 265);
  --shadow-key: 0 3px 0 0 var(--color-key-edge), inset 0 1px 0 oklch(100% 0 0 / 0.08);
  --shadow-key-accent: 0 3px 0 0 var(--color-accent-edge), inset 0 1px 0 oklch(100% 0 0 / 0.18);
  --shadow-key-press: inset 0 1px 2px oklch(10% 0.03 270 / 0.5);
  --color-pane: oklch(25% 0.04 275); --color-pane-2: oklch(28.5% 0.042 275); --color-pane-3: oklch(32% 0.045 276); --color-pane-ink: oklch(95% 0.01 290); --color-pane-muted: oklch(74% 0.035 290); --color-pane-rule: oklch(36% 0.05 280);
  --color-pane-key: oklch(82% 0.11 300); --color-scrim: oklch(4% 0.01 260 / 0.62); --color-pane-dot: oklch(44% 0.12 295); --color-pane-edge: oklch(44% 0.12 295); --color-pane-glyph: oklch(55% 0.14 290); --color-pane-focus: oklch(82% 0.11 300); --pane-glow: 1;
  --shadow-pane: inset 0 0 0 1px oklch(34% 0.04 265);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode]) {
    --color-paper: oklch(16% 0.012 248); --color-paper-2: oklch(19% 0.014 250); --color-paper-3: oklch(22% 0.016 252);
    --color-card: oklch(19% 0.014 250);
    --color-ink: oklch(96% 0.006 250); --color-ink-2: oklch(88% 0.012 255); --color-muted: oklch(72% 0.035 257); --color-muted-well: oklch(76% 0.03 257);
    --color-rule: oklch(28% 0.02 255); --color-rule-2: oklch(38% 0.04 268);
    --color-accent: oklch(63% 0.21 292); --color-accent-deep: oklch(72% 0.17 295); --color-accent-soft: oklch(44% 0.12 295);
    --color-accent-2: oklch(82% 0.11 300); --color-accent-wash: oklch(28% 0.07 290); --color-accent-edge: oklch(48% 0.19 290);
    --color-accent-ink: oklch(14% 0.04 280); --color-focus: oklch(72% 0.17 295); --color-link: oklch(82% 0.11 300);
    --color-graphite: oklch(25% 0.04 275); --color-graphite-2: oklch(28.5% 0.042 275); --color-graphite-3: oklch(32% 0.045 276);
    --color-graphite-ink: oklch(95% 0.01 290); --color-graphite-muted: oklch(74% 0.035 290); --color-graphite-rule: oklch(36% 0.05 280);
    --color-glyph-1: oklch(34% 0.06 290); --color-glyph-2: oklch(44% 0.09 292); --color-glyph-3: oklch(56% 0.14 292); --color-glyph-4: oklch(68% 0.17 293);
    --color-key-face: oklch(26% 0.03 262); --color-key-edge: oklch(12% 0.02 262);
    --shadow-card: none; --shadow-lift: none; --shadow-graphite: inset 0 0 0 1px oklch(34% 0.04 265);
    --shadow-key: 0 3px 0 0 var(--color-key-edge), inset 0 1px 0 oklch(100% 0 0 / 0.08);
    --shadow-key-accent: 0 3px 0 0 var(--color-accent-edge), inset 0 1px 0 oklch(100% 0 0 / 0.18);
    --shadow-key-press: inset 0 1px 2px oklch(10% 0.03 270 / 0.5);
    --color-pane: oklch(25% 0.04 275); --color-pane-2: oklch(28.5% 0.042 275); --color-pane-3: oklch(32% 0.045 276); --color-pane-ink: oklch(95% 0.01 290); --color-pane-muted: oklch(74% 0.035 290); --color-pane-rule: oklch(36% 0.05 280);
    --color-pane-key: oklch(82% 0.11 300); --color-scrim: oklch(4% 0.01 260 / 0.62); --color-pane-dot: oklch(44% 0.12 295); --color-pane-edge: oklch(44% 0.12 295); --color-pane-glyph: oklch(55% 0.14 290); --color-pane-focus: oklch(82% 0.11 300); --pane-glow: 1;
    --shadow-pane: inset 0 0 0 1px oklch(34% 0.04 265);
  }
}