/* Design tokens — the water column. See DESIGN.md. */

:root {
  /* surface palette */
  --bg: oklch(1 0 0);
  --surface: oklch(0.965 0.006 160);
  --ink: oklch(0.18 0.012 160);
  --muted: oklch(0.44 0.02 160);
  --primary: oklch(0.4 0.106 150);
  --primary-deep: oklch(0.3 0.08 152);
  --accent: oklch(0.55 0.16 25);
  --accent-text: oklch(0.46 0.15 27); /* accent dark enough for small text on white */
  --line: oklch(0.87 0.012 160);
  --grid: oklch(0.93 0.008 160);

  /* deep water */
  --abyss: oklch(0.17 0.03 165);
  --abyss-2: oklch(0.13 0.025 168);
  --foam: oklch(0.96 0.008 160);
  --foam-muted: oklch(0.74 0.03 160);
  --bioluminescent: oklch(0.82 0.14 155);
  --abyss-line: oklch(0.32 0.035 165);

  /* typography */
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --text-sm: 0.875rem;
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --text-xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --text-2xl: clamp(2.1rem, 1.6rem + 2.6vw, 3.6rem);
  --text-hero: clamp(2.6rem, 1.7rem + 4.6vw, 5.4rem);

  /* spacing */
  --space-section: clamp(5rem, 4rem + 6vw, 10.5rem);
  --space-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --content-max: 72rem;
  --prose-max: 68ch;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-normal: 350ms;
  --duration-slow: 700ms;

  /* z-scale: content < divider < gauge < nav < skip */
  --z-divider: 2;
  --z-gauge: 30;
  --z-nav: 40;
  --z-skip: 50;

  --radius: 2px;
}