/* Hallmark · genre: modern-minimal · macrostructure: studied-DNA (owner's mockup), redesigned toward enterprise
 * theme: studied-DNA · light + dark · accent oklch(55% 0.21 262) signal blue · Geist + Geist Mono
 * axes: light-or-dark (system + toggle) / grotesk-sans / cool
 * Contrast checked: body text >= 7:1, secondary text >= 7:1, button label 5:1, status pills >= 5.5:1, both themes.
 */
:root {
  color-scheme: light;
  --color-bg:        oklch(99%   0.004 255);
  --color-surface:   oklch(99.6% 0.002 255);
  --color-surface-2: oklch(97.4% 0.006 255);
  --color-surface-3: oklch(95%   0.009 258);
  --color-rule:      oklch(91.5% 0.010 258);
  --color-rule-2:    oklch(86%   0.012 258);
  --color-faint:     oklch(62%   0.018 262);   /* icons and rules only */
  --color-muted:     oklch(45%   0.020 262);
  --color-ink:       oklch(19%   0.022 262);

  --color-accent:        oklch(55%  0.21  262);
  --color-accent-strong: oklch(47%  0.19  262);  /* accent text on light surfaces */
  --color-accent-soft:   oklch(95%  0.030 262);
  --color-button:        oklch(55%  0.21  262);
  --color-button-hover:  oklch(49%  0.20  262);
  --color-button-ink:    oklch(99.5% 0.003 250);
  --color-focus:         oklch(55%  0.21  262);

  /* The console panel stays dark in both themes */
  --color-panel:       oklch(20%  0.030 262);
  --color-panel-2:     oklch(25%  0.035 262);
  --color-panel-rule:  oklch(31%  0.035 262);
  --color-panel-ink:   oklch(96%  0.006 250);
  --color-panel-muted: oklch(76%  0.025 258);
  --color-panel-accent:oklch(74%  0.14  262);

  --color-good:      oklch(47%  0.13  155);
  --color-good-soft: oklch(95%  0.040 155);
  --color-warn:      oklch(48%  0.11  70);
  --color-warn-soft: oklch(95%  0.050 85);
  --color-bad:       oklch(50%  0.17  27);
  --color-bad-soft:  oklch(95%  0.030 27);

  --color-grid:  oklch(19% 0.022 262 / 0.055);
  --color-glow:  oklch(55% 0.21 262 / 0.10);
  --color-scrim: oklch(19% 0.022 262 / 0.35);
  --color-nav:   oklch(99% 0.004 255 / 0.82);

  --shadow-card:  0 1px 2px oklch(19% 0.022 262 / 0.05), 0 12px 32px -18px oklch(19% 0.022 262 / 0.18);
  --shadow-panel: 0 30px 70px -30px oklch(20% 0.03 262 / 0.55);

  --font-display: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-md:   1.0625rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  clamp(1.75rem, 1.15rem + 1.8vw, 2.5rem);
  --text-display: clamp(2.6rem, 1.3rem + 4.6vw, 4.6rem);

  --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;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* Dark: its own steps from the same hue, not an inversion. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg:        oklch(14.5% 0.018 262);
  --color-surface:   oklch(17.5% 0.020 262);
  --color-surface-2: oklch(20.5% 0.022 262);
  --color-surface-3: oklch(24%   0.025 262);
  --color-rule:      oklch(28%   0.025 262);
  --color-rule-2:    oklch(35%   0.028 262);
  --color-faint:     oklch(55%   0.020 262);
  --color-muted:     oklch(74%   0.018 258);
  --color-ink:       oklch(95.5% 0.006 255);

  --color-accent:        oklch(66%  0.18  262);
  --color-accent-strong: oklch(72%  0.15  262);
  --color-accent-soft:   oklch(26%  0.060 262);
  --color-button:        oklch(55%  0.21  262);
  --color-button-hover:  oklch(60%  0.20  262);
  --color-focus:         oklch(72%  0.15  262);

  --color-panel:       oklch(19.5% 0.026 262);
  --color-panel-2:     oklch(24%   0.030 262);
  --color-panel-rule:  oklch(31%   0.032 262);

  --color-good:      oklch(76%  0.14  155);
  --color-good-soft: oklch(24%  0.040 155);
  --color-warn:      oklch(80%  0.13  80);
  --color-warn-soft: oklch(25%  0.040 80);
  --color-bad:       oklch(74%  0.15  27);
  --color-bad-soft:  oklch(24%  0.050 27);

  --color-grid:  oklch(95.5% 0.006 255 / 0.05);
  --color-glow:  oklch(66% 0.18 262 / 0.16);
  --color-scrim: oklch(8% 0.01 262 / 0.6);
  --color-nav:   oklch(14.5% 0.018 262 / 0.78);

  --shadow-card:  0 1px 2px oklch(0% 0 0 / 0.3), 0 12px 32px -18px oklch(0% 0 0 / 0.6);
  --shadow-panel: 0 30px 70px -30px oklch(0% 0 0 / 0.7);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg:        oklch(14.5% 0.018 262);
    --color-surface:   oklch(17.5% 0.020 262);
    --color-surface-2: oklch(20.5% 0.022 262);
    --color-surface-3: oklch(24%   0.025 262);
    --color-rule:      oklch(28%   0.025 262);
    --color-rule-2:    oklch(35%   0.028 262);
    --color-faint:     oklch(55%   0.020 262);
    --color-muted:     oklch(74%   0.018 258);
    --color-ink:       oklch(95.5% 0.006 255);
    --color-accent:        oklch(66%  0.18  262);
    --color-accent-strong: oklch(72%  0.15  262);
    --color-accent-soft:   oklch(26%  0.060 262);
    --color-button:        oklch(55%  0.21  262);
    --color-button-hover:  oklch(60%  0.20  262);
    --color-focus:         oklch(72%  0.15  262);
    --color-panel:       oklch(19.5% 0.026 262);
    --color-panel-2:     oklch(24%   0.030 262);
    --color-panel-rule:  oklch(31%   0.032 262);
    --color-good:      oklch(76%  0.14  155);
    --color-good-soft: oklch(24%  0.040 155);
    --color-warn:      oklch(80%  0.13  80);
    --color-warn-soft: oklch(25%  0.040 80);
    --color-bad:       oklch(74%  0.15  27);
    --color-bad-soft:  oklch(24%  0.050 27);
    --color-grid:  oklch(95.5% 0.006 255 / 0.05);
    --color-glow:  oklch(66% 0.18 262 / 0.16);
    --color-scrim: oklch(8% 0.01 262 / 0.6);
    --color-nav:   oklch(14.5% 0.018 262 / 0.78);
    --shadow-card:  0 1px 2px oklch(0% 0 0 / 0.3), 0 12px 32px -18px oklch(0% 0 0 / 0.6);
    --shadow-panel: 0 30px 70px -30px oklch(0% 0 0 / 0.7);
  }
}