/* Hallmark · genre: modern-minimal · theme: custom (tuned)
 * vibe: "calm bank control desk, raspberry signal"
 * paper oklch(98% 0.004 350) · accent oklch(47% 0.17 357) raspberry · Onest + JetBrains Mono
 * axes: light / grotesk-sans / warm (raspberry, chromatic-other)
 */

:root {
  color-scheme: light dark;

  /* Paper & ink — neutrals lean toward the raspberry anchor */
  --color-paper:       oklch(97.6% 0.004 350);
  --color-surface:     oklch(99.3% 0.002 350);
  --color-paper-2:     oklch(95.2% 0.006 350);
  --color-paper-3:     oklch(92.4% 0.008 350);
  --color-rule:        oklch(89% 0.008 350);
  --color-rule-strong: oklch(78% 0.010 350);
  --color-neutral:     oklch(50% 0.012 350);
  --color-muted:       oklch(38% 0.012 350);
  --color-ink:         oklch(21% 0.014 350);
  --color-on-ink:      oklch(98% 0.003 350);

  /* Signal — used for focus, links, progress, the mark */
  --color-accent:      oklch(47% 0.17 357);
  --color-accent-soft: oklch(95% 0.022 357);
  --color-focus:       oklch(52% 0.19 357);

  /* Verdict semantics — always paired with an icon + text */
  --color-alert:       oklch(50% 0.17 32);
  --color-alert-soft:  oklch(95.5% 0.025 32);
  --color-alert-rule:  oklch(84% 0.06 32);
  --color-ok:          oklch(45% 0.10 160);
  --color-ok-soft:     oklch(95.5% 0.025 160);
  --color-ok-rule:     oklch(84% 0.05 160);

  --color-scrim:       oklch(18% 0.014 350 / 0.78);
  --color-shadow:      oklch(21% 0.014 350 / 0.08);
  --color-media:       oklch(16% 0.010 350);
  --color-on-media:    oklch(96% 0.004 350);
  --color-media-rule:  oklch(36% 0.010 350);

  /* Type */
  --font-sans: "Onest", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  clamp(1.625rem, 1.2vw + 1.25rem, 2.125rem);

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-body:  1.55;

  /* 4 pt spacing */
  --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: 4rem;

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

  --rule-hair: 1px;

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

  /* Layers */
  --z-raised: 10;
  --z-sticky: 20;
  --z-overlay: 40;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-paper:       oklch(16.5% 0.010 350);
    --color-surface:     oklch(19.5% 0.011 350);
    --color-paper-2:     oklch(22.5% 0.012 350);
    --color-paper-3:     oklch(26% 0.012 350);
    --color-rule:        oklch(30% 0.012 350);
    --color-rule-strong: oklch(40% 0.012 350);
    --color-neutral:     oklch(68% 0.010 350);
    --color-muted:       oklch(78% 0.008 350);
    --color-ink:         oklch(94.5% 0.005 350);
    --color-on-ink:      oklch(17% 0.010 350);

    --color-accent:      oklch(72% 0.14 357);
    --color-accent-soft: oklch(28% 0.05 357);
    --color-focus:       oklch(74% 0.15 357);

    --color-alert:       oklch(74% 0.14 32);
    --color-alert-soft:  oklch(26% 0.045 32);
    --color-alert-rule:  oklch(40% 0.08 32);
    --color-ok:          oklch(76% 0.11 160);
    --color-ok-soft:     oklch(25% 0.04 160);
    --color-ok-rule:     oklch(40% 0.06 160);

    --color-scrim:       oklch(6% 0.008 350 / 0.86);
    --color-shadow:      oklch(8% 0.008 350 / 0.4);
    --color-media:       oklch(11% 0.008 350);
  }
}