:root,
:root[data-theme="ink"] {
  --bg:          #0f0f0d;
  --bg-soft:     #1a1916;
  --ink:         #efe6d2;
  --ink-soft:    #d4cab5;
  --mute:        #7a7466;
  --mute-soft:   #4a4538;
  --line:        rgba(239, 230, 210, 0.14);
  --line-strong: rgba(239, 230, 210, 0.32);
  --accent:      #60a5fa;          
  --accent-deep: #3b82f6;
  --accent-soft: rgba(96, 165, 250, 0.16);
  --backdrop:    rgba(0, 0, 0, 0.55);
}

:root[data-theme="cream"] {
  --bg:          #efe6d2;
  --bg-soft:     #e8dec8;
  --ink:         #0e0e0c;
  --ink-soft:    #2a2924;
  --mute:        #8c8473;
  --mute-soft:   #b8b1a0;
  --line:        rgba(14, 14, 12, 0.14);
  --line-strong: rgba(14, 14, 12, 0.32);
  --accent:      #2563eb;          
  --accent-deep: #1d4ed8;
  --accent-soft: rgba(37, 99, 235, 0.12);
  --backdrop:    rgba(14, 14, 12, 0.45);
}

:root {
  
  --font-display: "Hanken Grotesk", "Helvetica Neue", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --fs-hero:    clamp(3.25rem, 11vw, 8.5rem);
  --fs-h2:      clamp(1.9rem, 4.5vw, 3.4rem);
  --fs-h3:      clamp(1.1rem, 1.9vw, 1.5rem);
  --fs-lead:    clamp(1.05rem, 1.6vw, 1.35rem);
  --fs-body:    clamp(0.95rem, 1.1vw, 1.05rem);
  --fs-small:   0.78rem;
  --fs-mono:    0.78rem;

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4.5rem;
  --space-9:  7rem;

  --maxw:        1180px;
  --gutter:      clamp(1.25rem, 5vw, 4rem);
  --nav-h:       64px;

  --ease:        cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast:    140ms;
  --dur-base:    240ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
  }
}