@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0&family=Geist:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

/* Hallmark · genre: atmospheric · macrostructure: Marquee Hero · theme: Lumen
 * design-system: design.md · designed-as-app
 * pre-emit critique: P5 H4 E5 S4 R5 V5
 */

:root,
[data-theme='dark'] {
  --color-paper: oklch(13% 0.014 265);
  --color-paper-2: oklch(17% 0.016 265);
  --color-paper-3: oklch(21% 0.018 265);
  --color-ink: oklch(96% 0.006 262);
  --color-ink-2: oklch(78% 0.008 260);
  --color-ink-muted: oklch(60% 0.010 258);
  --color-rule: oklch(96% 0.006 262 / 0.08);
  --color-rule-2: oklch(96% 0.006 262 / 0.04);
  --color-accent: oklch(76% 0.17 50);
  --color-accent-2: oklch(68% 0.16 18);
  --color-focus: oklch(76% 0.17 50);
  --color-glow: oklch(80% 0.16 50 / 0.42);
  --color-paper-emit: oklch(76% 0.17 50 / 0.04);
  --color-danger: oklch(62% 0.20 30);
  --color-danger-soft: oklch(62% 0.20 30 / 0.10);
  --color-success: oklch(72% 0.16 145);
  --color-success-soft: oklch(72% 0.16 145 / 0.10);

  --font-display: "Instrument Serif", ui-serif, Georgia, serif;
  --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-label: "JetBrains Mono", ui-monospace, Menlo, monospace;

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

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;
  --text-display: clamp(3rem, 6vw + 1rem, 6rem);
  --text-mono: 0.6875rem;

  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-short: 220ms;
  --dur-long: 600ms;
  --dur-pulse: 4s;

  --radius-card: 12px;
  --radius-pill: 9999px;
  --radius-input: 8px;
  --page-gutter: var(--space-md);
}

[data-theme='light'] {
  --color-paper: oklch(97% 0.008 265);
  --color-paper-2: oklch(93% 0.010 265);
  --color-paper-3: oklch(89% 0.012 265);
  --color-ink: oklch(18% 0.014 265);
  --color-ink-2: oklch(35% 0.012 265);
  --color-ink-muted: oklch(55% 0.010 260);
  --color-rule: oklch(18% 0.014 265 / 0.10);
  --color-rule-2: oklch(18% 0.014 265 / 0.04);
  --color-accent: oklch(46% 0.24 268);
  --color-accent-2: oklch(68% 0.16 18);
  --color-focus: oklch(46% 0.24 268);
  --color-glow: oklch(58% 0.22 268 / 0.28);
  --color-paper-emit: oklch(46% 0.24 268 / 0.04);
  --color-danger: oklch(52% 0.20 28);
  --color-danger-soft: oklch(52% 0.20 28 / 0.08);
  --color-success: oklch(55% 0.16 145);
  --color-success-soft: oklch(55% 0.16 145 / 0.08);
}