/* Design tokens — hay.com-inspired Scandinavian palette
 * Colors expressed in OKLCH for perceptual uniformity and stable hue across
 * lightness ramps. All values are within sRGB gamut. Browser support: 96%+.
 */
:root {
  /* ─── Color ─────────────────────────────────────────── */
  --bg: oklch(1 0 0);
  --ink: oklch(0.177 0 0);
  --ink-soft: oklch(0.443 0 0);
  --ink-muted: oklch(0.6 0.008 80);
  --rule: oklch(0.913 0.008 80);

  /* Color-blocks (whole-section backgrounds) — same L, drifting hue */
  --sand: oklch(0.923 0.015 80);
  --sage: oklch(0.845 0.022 130);
  --dusty: oklch(0.835 0.02 235);
  --bone: oklch(0.952 0.008 80);

  /* Accent — kept under 0.11 chroma to stay quiet/editorial */
  --mustard: oklch(0.778 0.108 80);
  --terracotta: oklch(0.628 0.106 36);

  /* Dark/contact */
  --dark: oklch(0.177 0 0);
  --dark-ink: oklch(0.985 0 0);
  --dark-soft: oklch(0.687 0.008 80);

  /* ─── Type ──────────────────────────────────────────── */
  --font-display: "Inter Tight", "Neue Haas Grotesk", "Helvetica Neue", system-ui,
    sans-serif;
  --font-body: "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-brand: "DM Serif Display", "Playfair Display", "Bodoni Moda", Georgia,
    "Times New Roman", serif;

  --size-hero: clamp(2.75rem, 7vw, 6rem);
  --size-display: clamp(2rem, 5vw, 4rem);
  --size-h2: clamp(1.75rem, 3.2vw, 2.5rem);
  --size-h3: 1.125rem;
  --size-lede: clamp(1.125rem, 1.6vw, 1.375rem);
  --size-body: 1rem;
  --size-small: 0.8125rem;
  --size-micro: 0.6875rem;

  --tracking-tight: -0.02em;
  --tracking-wide: 0.08em;

  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-body: 1.55;

  /* ─── Spacing ───────────────────────────────────────── */
  --gutter: clamp(1rem, 3vw, 2.5rem);
  --section-y: clamp(4rem, 9vw, 8rem);
  --section-y-sm: clamp(2.5rem, 6vw, 5rem);
  --stack-xs: 0.5rem;
  --stack-sm: 1rem;
  --stack-md: 1.5rem;
  --stack-lg: 2.5rem;
  --stack-xl: 4rem;

  /* ─── Layout ────────────────────────────────────────── */
  --max: 1440px;
  --max-prose: 62ch;

  /* ─── Borders / motion ─────────────────────────────── */
  --hairline: 1px solid var(--rule);

  /* Custom strong easings (Emil Kowalski / animations.dev) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  /* Back-compat alias: existing rules read --ease */
  --ease: var(--ease-out);

  /* Durations — UI under 300ms, marketing motion can be longer */
  --dur-press: 140ms; /* button :active feedback */
  --dur-fast: 180ms; /* hover, color */
  --dur: 240ms; /* default UI transition */
  --dur-slow: 600ms; /* hero image zoom (marketing/explanatory) */

  /* ─── Header height (used by anchor offset) ────────── */
  --nav-h: 56px;
}