/* Design tokens — source of truth: paulkuppel-website-poc/design-system.md §4–§6.
   Values are copied verbatim; never re-derive them. Tokens live outside @layer. */
:root {
  /* Surfaces */
  --pk-paper:  oklch(97.6% 0.0041 91.4); /* page background */
  --pk-white:  oklch(100.0% 0.0000 0.0); /* cards, surfaces */
  --pk-mist:   oklch(92.7% 0.0035 247.9); /* borders, dividers */
  --pk-fog:    oklch(95.1% 0.0040 106.5); /* alternate sections */

  /* Ink */
  --pk-ink:    oklch(20.7% 0.0101 248.3); /* body text, mobile theme bar */
  --pk-steel:  oklch(30.3% 0.0145 256.8); /* headings, footer accents */
  --pk-slate:  oklch(50.8% 0.0197 242.7); /* secondary text, captions */
  --pk-stone:  oklch(65.1% 0.0126 252.1); /* tertiary text, hints */

  /* Accent — brushed-steel slate. Highlight only, not the brand body. */
  --pk-marine:       oklch(43.0% 0.020 243.0); /* ≈ #4A5965 — primary CTA, numbers strip, links, eyebrows, mark */
  --pk-marine-hover: oklch(33.5% 0.020 243.0); /* ≈ #35414B — hover/pressed */
  --pk-marine-soft:  oklch(92.7% 0.003 130.0); /* ≈ #E8E9E6 — tinted backgrounds */

  /* Semantic */
  --pk-success: oklch(47.5% 0.0998 147.7);
  --pk-warning: oklch(50.8% 0.1037 71.4);
  --pk-error:   oklch(39.3% 0.1220 24.7);

  /* Typography */
  --pk-font-sans: 'General Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pk-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --pk-text-display: clamp(36px, 4.5vw + 1rem, 56px);
  --pk-text-h1:      clamp(28px, 3vw + 0.75rem, 40px);
  --pk-text-h2:      clamp(22px, 1.5vw + 1rem, 28px);
  --pk-text-h3:      clamp(18px, 0.5vw + 1rem, 20px);
  --pk-text-h4:      16px;
  --pk-text-body-lg: clamp(16px, 0.5vw + 0.875rem, 18px);
  --pk-text-body:    16px;
  --pk-text-small:   14px;
  --pk-text-eyebrow: 12px;
  --pk-text-mono:    14px;

  /* Spacing — 8px base unit */
  --pk-space-1: 4px;
  --pk-space-2: 8px;
  --pk-space-3: 12px;
  --pk-space-4: 16px;
  --pk-space-5: 24px;
  --pk-space-6: 32px;
  --pk-space-7: 48px;
  --pk-space-8: 64px;
  --pk-space-9: 96px;
  --pk-space-10: 128px;

  /* Radii */
  --pk-radius-sm: 2px;  /* form inputs */
  --pk-radius-md: 4px;  /* buttons, cards */
  --pk-radius-lg: 6px;  /* hero panels */

  /* Breakpoints (for JS reads; media queries cannot use custom properties) */
  --pk-bp-md: 720px;
  --pk-bp-lg: 1024px;
  --pk-container-max: 1200px;
}