:root {
  --bg: oklch(0.949 0.003 90);
  --surface: oklch(0.995 0.002 90);
  --surface-2: oklch(0.985 0.003 90);

  --fg: oklch(0.22 0.01 50);
  --muted: oklch(0.48 0.012 50);
  --border: oklch(0.88 0.005 90);

  --accent: oklch(0.68 0.21 42);
  --accent-ink: oklch(0.98 0.01 85);
  --accent-hover: oklch(0.63 0.22 40);
  --accent-pressed: oklch(0.58 0.22 38);

  --success: oklch(0.62 0.15 150);
  --success-soft: color-mix(in oklch, var(--success) 12%, var(--surface));
  --warn: oklch(0.75 0.14 75);
  --warn-soft: color-mix(in oklch, var(--warn) 14%, var(--surface));
  --danger: oklch(0.58 0.19 25);
  --danger-soft: color-mix(in oklch, var(--danger) 10%, var(--surface));

  --font-display: "Sora", "Segoe UI", sans-serif;
  --font-accent: "Fraunces", "Times New Roman", serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --text-hero: clamp(28px, 3.6vw, 44px);
  --text-h2: clamp(28px, 3.6vw, 44px);
  --text-h3: 14px;
  --text-body-lg: 14px;
  --text-body: 14px;
  --text-label: 14px;
  --text-caption: 14px;
  --text-mono: 14px;

  --container: 1200px;
  --container-wide: 1372px;
  --gutter: clamp(16px, 4vw, 48px);
  --gap: 24px;

  --r: 12px;
  --r-sm: 8px;
  --r-lg: 20px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  --section-y: 72px;
  --touch-min: 44px;
  --header-h: 64px;
  --shadow: 0 1px 3px oklch(0 0 0 / 0.06);

  --carousel-scale-active: 0.85;
  --carousel-h: 500px;
  --carousel-frame: 564px;
  --carousel-transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
}

@media (max-width: 1199px) {
  :root {
    --carousel-h: 440px;
    --carousel-frame: 504px;
  }
}

@media (max-width: 767px) {
  :root {
    --header-h: 56px;
    --carousel-h: 384px;
    --carousel-frame: 448px;
    --section-y: 48px;
  }
}