/* Hallmark · route: custom (tuned) · genre: modern-minimal · design-system: design.md
 * vibe: "terminal-grade, instrumented, brand violet" · anchor: #5e17eb (logo)
 * brand: #5e17eb primary · #0049ff blue · #8c52ff violet · #2ac2f3 cyan
 * display: JetBrains Mono · body: IBM Plex Sans · mono: JetBrains Mono
 * axes: light+dark / mono / chromatic-violet ~285
 *
 * Single source of truth for colour, type, space, radius and motion.
 * Themes switch on <html data-theme="light|dark">; set by the inline script in baseof.html.
 * Every stylesheet reads these by name; do not inline hex / oklch / font-family.
 */

/* ── Theme-independent tokens ── */
:root {
  --font-display: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --font-body:    "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --text-xs:  0.8125rem;
  --text-sm:  0.9375rem;
  --text-md:  1.0625rem;
  --text-lg:  1.1875rem;
  --text-xl:  1.5rem;
  --text-2xl: 2rem;
  --text-display: clamp(2rem, 3.2vw + 0.6rem, 3.25rem);
  --text-stage:   clamp(1.5rem, 1.6vw + 0.9rem, 2.25rem);
  --display-tracking: -0.04em;
  --heading-tracking: -0.03em;

  --measure: 62ch;

  /* Space: 4 pt scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;
  --page-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --page-width: 72rem;
  --nav-offset: 6rem; /* sticky elements sit below the sticky nav pill */

  /* Shape */
  --radius-card:  4px;
  --radius-input: 4px;
  --radius-pill:  999px;
  --rule-hair:  1px;
  --rule-thick: 3px;

  /* Motion */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-short: 150ms;
  --dur-med:   250ms;
  --dur-long:  600ms;

  /* Brand colours, identical in both themes (hex noted for reference) */
  --brand-primary: oklch(48.2% 0.269 285);   /* #5e17eb */
  --brand-blue:    oklch(51.4% 0.272 263.4); /* #0049ff */
  --brand-violet:  oklch(60% 0.241 293.1);   /* #8c52ff */
  --brand-cyan:    oklch(76% 0.137 225.9);   /* #2ac2f3 */
}

/* ── Light ── */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --color-paper:   oklch(98.6% 0.005 290);
  --color-paper-2: oklch(96.2% 0.010 290);
  --color-paper-3: oklch(93.2% 0.015 290);
  --color-ink:     oklch(19% 0.045 285);
  --color-ink-2:   oklch(35% 0.040 285);
  --color-muted:   oklch(47% 0.030 285);
  --color-rule:    oklch(85% 0.020 290);
  --color-rule-2:  oklch(91% 0.015 290);

  /* Primary action fills keep the exact brand purple in both themes */
  --color-accent:       var(--brand-primary);
  --color-accent-hover: oklch(41% 0.26 285);
  --color-accent-ink:   oklch(99% 0.005 290);
  --color-accent-text:  var(--brand-primary);
  --color-link:         var(--brand-blue);
  --color-link-hover:   oklch(43% 0.26 263);
  --color-cyan-text:    oklch(50% 0.11 227);
  --color-focus:        var(--brand-blue);

  /* Inverse band (footer, closing CTA, emphasised diagram layer) */
  --color-band:          oklch(19% 0.050 285);
  --color-on-band:       oklch(97% 0.010 290);
  --color-on-band-muted: oklch(78% 0.030 285);
  --color-rule-on-band:  oklch(38% 0.050 285);
  --color-accent-on-band: var(--brand-cyan);
  --color-focus-on-band:  var(--brand-cyan);

  /* Status only, never decoration */
  --color-sev-critical: oklch(50% 0.20 27);
  --color-sev-high:     oklch(48% 0.12 65);
  --color-success:      oklch(50% 0.14 150);
}

/* ── Dark ── */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-paper:   oklch(17% 0.035 285);
  --color-paper-2: oklch(21% 0.045 285);
  --color-paper-3: oklch(25.5% 0.050 285);
  --color-ink:     oklch(96% 0.010 290);
  --color-ink-2:   oklch(82% 0.020 290);
  --color-muted:   oklch(70% 0.030 285);
  --color-rule:    oklch(32% 0.050 285);
  --color-rule-2:  oklch(26% 0.040 285);

  --color-accent:       var(--brand-primary);
  --color-accent-hover: oklch(54% 0.26 285);
  --color-accent-ink:   oklch(99% 0.005 290);
  --color-accent-text:  oklch(72% 0.17 293);
  --color-link:         oklch(74% 0.14 255);
  --color-link-hover:   oklch(82% 0.12 255);
  --color-cyan-text:    var(--brand-cyan);
  --color-focus:        var(--brand-cyan);

  --color-band:          oklch(11% 0.030 285);
  --color-on-band:       oklch(96% 0.010 290);
  --color-on-band-muted: oklch(78% 0.030 285);
  --color-rule-on-band:  oklch(28% 0.040 285);
  --color-accent-on-band: var(--brand-cyan);
  --color-focus-on-band:  var(--brand-cyan);

  --color-sev-critical: oklch(72% 0.17 25);
  --color-sev-high:     oklch(78% 0.14 75);
  --color-success:      oklch(74% 0.15 150);
}