@layer reset, base, components, utilities;

:root {
  /* Typography — Literata (display) + system-ui (body)
     Literata: transitional serif with optical sizing. Weight 400 for headings —
     the letterforms carry the design, not boldness. System font stack for body —
     invisible, gets out of the way. Inspired by interfacecraft.dev. */
  --font-display: "Literata", Georgia, serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, monospace;

  /* Type scale — Interface Craft proportions
     Display headings: tight line-height, negative letter-spacing
     Body text: 16px / 1.5 line-height, system font */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.5rem;
  --text-3xl: clamp(1.75rem, 1.25rem + 2vw, 2.25rem);
  --text-4xl: clamp(2.25rem, 1.5rem + 3vw, 3.125rem);
  --text-5xl: clamp(2.75rem, 1.5rem + 4vw, 3.75rem);

  /* Spacing — 4pt scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout */
  --content-width: 64rem;
  --content-narrow: 38rem;
  --page-gutter: clamp(var(--space-4), 4vw, var(--space-8));

  /* Colors — Interface Craft palette
     White background, warm-tinted darks and grays.
     Warmth lives in the text, not the surface.
     Matched from interfacecraft.dev computed values. */
  --color-paper: oklch(100% 0 0);
  --color-paper-tint: oklch(96.5% 0.003 60);
  --color-ink: oklch(15% 0.005 50);
  --color-ink-light: oklch(35% 0.008 50);
  --color-muted: oklch(50% 0.006 50);
  --color-rule: oklch(90% 0.003 60);
  --color-rule-strong: oklch(80% 0.005 60);
  --color-accent: oklch(25% 0.01 50);
  --color-accent-hover: oklch(15% 0.005 50);

  /* Accent wash — subtle tint for backgrounds */
  --color-accent-wash: oklch(from var(--color-accent) l c h / 0.05);

  /* Borders */
  --border: 1px solid var(--color-rule);
  --border-strong: 1px solid var(--color-rule-strong);

  /* Shadows */
  --shadow-dropdown: 0 4px 12px oklch(0% 0 0 / 0.06);
}

/* Dark mode — the press room after hours */
@media (prefers-color-scheme: dark) {
  :root {
    --color-paper: oklch(13% 0.005 260);
    --color-paper-tint: oklch(17% 0.008 260);
    --color-ink: oklch(92% 0.003 60);
    --color-ink-light: oklch(75% 0.005 60);
    --color-muted: oklch(64% 0.004 60);
    --color-rule: oklch(22% 0.005 260);
    --color-rule-strong: oklch(32% 0.008 260);
    --color-accent: oklch(85% 0.005 60);
    --color-accent-hover: oklch(92% 0.003 60);
  }
}