/* WBS — design tokens, lifted from the credentials deck */
:root {
  /* Warm paper, ink, single terracotta accent */
  --c-paper: #f4efe2;
  --c-paper-2: #ece6d4;
  --c-paper-3: #e3dcc6;
  --c-ink: #1a1814;
  --c-ink-2: #5a564c;
  --c-ink-3: #8c8779;
  --c-rule: rgba(26, 24, 20, 0.32);
  --c-rule-soft: rgba(26, 24, 20, 0.16);
  --c-accent: oklch(0.52 0.09 45); /* terracotta */
  --c-shell: #0d0c0a;

  /* Typography */
  --f-display: "Jost", "Helvetica Neue", system-ui, sans-serif;
  --f-body: "Jost", "Helvetica Neue", system-ui, sans-serif;
  --f-serif: "Lora", Georgia, serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Fluid type — deck is fixed-pixel at 1920×1080; clamp() for web */
  --t-cover: clamp(56px, 10vw, 160px);
  --t-display: clamp(48px, 8vw, 132px);
  --t-h1: clamp(40px, 6.4vw, 96px);
  --t-h2: clamp(32px, 4.8vw, 72px);
  --t-h3: clamp(24px, 2.6vw, 44px);
  --t-lead: clamp(20px, 2.2vw, 36px);
  --t-body: clamp(16px, 1.3vw, 22px);
  --t-small: clamp(13px, 1vw, 18px);
  --t-mono: clamp(12px, 0.95vw, 16px);

  /* Spacing — fluid pads with sensible mobile floor */
  --pad-x: clamp(24px, 7vw, 140px);
  --pad-y: clamp(56px, 8vw, 120px);
  --gap-section: clamp(64px, 10vw, 160px);
  --gap-title: clamp(28px, 4vw, 56px);
  --gap-item: clamp(16px, 2vw, 28px);

  /* Chrome dimensions */
  --rail-w: 24px;
  --nav-h: 72px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-anim: 0.7s;
}

@media (max-width: 900px) {
  :root {
    --nav-h: 60px;
  }
}