/* DriftWatch — design tokens (Hallmark · theme: Almanac)
 * paper band: light · display style: roman-serif · accent hue: warm oxide (42°)
 */

:root {
  /* — colour ————————————————————————————————— */
  --color-paper:    oklch(97%   0.010 78);
  --color-paper-2:  oklch(94.5% 0.013 78);
  --color-paper-3:  oklch(91%   0.015 76);
  --color-rule:     oklch(85%   0.012 76);
  --color-rule-2:   oklch(74%   0.014 72);
  --color-neutral:  oklch(46%   0.012 64);
  --color-muted:    oklch(38%   0.013 58);
  --color-ink:      oklch(21%   0.014 55);
  --color-ink-2:    oklch(31%   0.013 55);

  --color-accent:      oklch(46% 0.170 40);
  --color-accent-soft: oklch(93% 0.038 55);
  --color-focus:       oklch(52% 0.185 42);

  /* severity — always paired with a text label, never colour alone */
  --color-ok:   oklch(44% 0.100 152);
  --color-warn: oklch(44% 0.115 75);
  --color-crit: oklch(44% 0.170 30);

  /* — type ——————————————————————————————————— */
  --font-display: "Newsreader", ui-serif, Georgia, serif;
  --font-body:    "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* perfect fourth (1.333) off a 1rem base, clamped for fluidity */
  --text-2xs:     0.6875rem;
  --text-xs:      0.8125rem;
  --text-sm:      0.9375rem;
  --text-base:    1.0625rem;
  --text-lg:      1.25rem;
  --text-xl:      1.5rem;
  --text-2xl:     1.875rem;
  --text-3xl:     2.5rem;
  --text-display: clamp(2.5rem, 1.4rem + 4.6vw, 4.75rem);

  --measure: 64ch;

  /* — space (4pt) ———————————————————————————— */
  --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;

  --page-gutter: clamp(1.25rem, 5vw, 3.5rem);

  /* — line ——————————————————————————————————— */
  --rule-hair: 1px;
  --radius-sm: 2px;
  --radius-md: 3px;

  /* — motion ————————————————————————————————— */
  --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;

  /* — depth —————————————————————————————————— */
  --z-base: 1;
  --z-sticky: 200;
  --z-sticky-nav: 300;
  --banner-height: 3.25rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper:    oklch(15%   0.012 62);
    --color-paper-2:  oklch(18.5% 0.013 62);
    --color-paper-3:  oklch(22%   0.014 62);
    --color-rule:     oklch(31%   0.012 62);
    --color-rule-2:   oklch(42%   0.013 62);
    --color-neutral:  oklch(64%   0.011 66);
    --color-muted:    oklch(72%   0.010 70);
    --color-ink:      oklch(93%   0.008 78);
    --color-ink-2:    oklch(84%   0.009 78);

    --color-accent:      oklch(70% 0.135 48);
    --color-accent-soft: oklch(28% 0.045 48);
    --color-focus:       oklch(72% 0.145 48);

    --color-ok:   oklch(72% 0.105 152);
    --color-warn: oklch(78% 0.105 82);
    --color-crit: oklch(70% 0.140 32);
  }
}

/* Explicit dark choice — mirrors the block above so the toggle beats the OS preference. */
:root[data-theme="dark"] {
    --color-paper:    oklch(15%   0.012 62);
    --color-paper-2:  oklch(18.5% 0.013 62);
    --color-paper-3:  oklch(22%   0.014 62);
    --color-rule:     oklch(31%   0.012 62);
    --color-rule-2:   oklch(42%   0.013 62);
    --color-neutral:  oklch(64%   0.011 66);
    --color-muted:    oklch(72%   0.010 70);
    --color-ink:      oklch(93%   0.008 78);
    --color-ink-2:    oklch(84%   0.009 78);

    --color-accent:      oklch(70% 0.135 48);
    --color-accent-soft: oklch(28% 0.045 48);
    --color-focus:       oklch(72% 0.145 48);

    --color-ok:   oklch(72% 0.105 152);
    --color-warn: oklch(78% 0.105 82);
    --color-crit: oklch(70% 0.140 32);
  }