/* Hallmark · genre: modern-minimal + atmospheric hero · macrostructure: Marquee Hero
 * theme: custom (vibe: "dark infra professional, monochrome, no color accent")
 * display-style: geometric-sans (Space Grotesk) · paper-band: dark
 * nav: N9 Edge-aligned minimal · footer: Ft2 Inline single line
 */

/* ─── Light mode baseline (fallback / toggle) ───────────────────────────── */
:root {
  --color-paper:       oklch(99%  0.003 145);
  --color-paper-2:     oklch(96%  0.005 145);
  --color-rule:        oklch(88%  0.006 145);
  --color-neutral:     oklch(55%  0.008 145);
  --color-ink-2:       oklch(38%  0.010 145);
  --color-ink:         oklch(12%  0.012 145);
  --color-accent:      oklch(38%  0.18  142);
  --color-accent-2:    oklch(30%  0.15  142);
  --color-accent-ink:  oklch(99%  0.003 145);
  --color-focus:       oklch(38%  0.18  142);
  --color-glow:        oklch(38%  0.18  142 / 0.22);

  --color-hero-bg:     oklch(10%  0.015 145);
  --color-hero-ink:    oklch(96%  0.005 145);
  --color-particle:    oklch(48%  0.012 145);
}

/* ─── Dark mode — .colorscheme-dark class (JS toggle + config="dark") ────── */
.colorscheme-dark {
  --color-paper:       oklch(11%  0.012 145);
  --color-paper-2:     oklch(16%  0.014 145);
  --color-rule:        oklch(22%  0.010 145);
  --color-neutral:     oklch(65%  0.008 145);
  --color-ink-2:       oklch(68%  0.008 145);
  --color-ink:         oklch(95%  0.005 145);
  --color-accent:      oklch(55%  0.20  142);
  --color-accent-2:    oklch(45%  0.17  142);
  --color-accent-ink:  oklch(97%  0.005 145);
  --color-focus:       oklch(55%  0.20  142);
  --color-glow:        oklch(55%  0.20  142 / 0.28);

  --color-hero-bg:     oklch(8%   0.015 145);
  --color-hero-ink:    oklch(96%  0.005 145);
  --color-particle:    oklch(52%  0.16  142);
}

/* ─── Dark mode — system preference + colorscheme-auto ─────────────────── */
@media (prefers-color-scheme: dark) {
  .colorscheme-auto {
    --color-paper:       oklch(11%  0.012 145);
    --color-paper-2:     oklch(16%  0.014 145);
    --color-rule:        oklch(22%  0.010 145);
    --color-neutral:     oklch(65%  0.008 145);
    --color-ink-2:       oklch(68%  0.008 145);
    --color-ink:         oklch(95%  0.005 145);
    --color-accent:      oklch(55%  0.20  142);
    --color-accent-2:    oklch(45%  0.17  142);
    --color-accent-ink:  oklch(97%  0.005 145);
    --color-focus:       oklch(55%  0.20  142);
    --color-glow:        oklch(55%  0.20  142 / 0.28);

    --color-hero-bg:     oklch(8%   0.015 145);
    --color-hero-ink:    oklch(96%  0.005 145);
    --color-particle:    oklch(52%  0.16  142);
  }
}

/* ─── Typography ─────────────────────────────────── */
:root {
  --font-display:  "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:     "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-outlier:  "JetBrains Mono", ui-monospace, monospace;

  --text-xs:       1.1rem;
  --text-sm:       1.3rem;
  --text-md:       1.6rem;
  --text-lg:       1.9rem;
  --text-xl:       2.2rem;
  --text-2xl:      3.2rem;
  --text-display:  clamp(4.0rem, 6vw + 0.8rem, 7.2rem);

  --space-3xs: 0.4rem;
  --space-2xs: 0.8rem;
  --space-xs:  1.2rem;
  --space-sm:  1.6rem;
  --space-md:  2.4rem;
  --space-lg:  3.2rem;
  --space-xl:  4.8rem;
  --space-2xl: 6.4rem;
  --space-3xl: 9.6rem;

  --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.37, 0, 0.63, 1);
  --dur-short:   180ms;
  --dur-medium:  300ms;

  --radius-sm:    6px;
  --radius-card:  12px;
  --radius-pill:  9999px;
  --radius-input: 6px;
}