/* ═══════════════════════════════════════════════════
   KAVE — Design Tokens
   ═══════════════════════════════════════════════════ */

:root {
  /* ── Colors ── */
  --color-bg: #f8f8f8;
  --color-bg-alt: #fff;
  --color-bg-dark: #111D29;
  --color-text: #111D29;
  --color-text-muted: rgba(17, 29, 41, 0.55);
  --color-text-light: #f2f2f2;
  --color-text-light-muted: rgba(242, 242, 242, 0.5);
  --color-line: rgba(17, 29, 41, 0.1);
  --color-line-light: rgba(242, 242, 242, 0.1);

  /* ── Typography ── */
  --font-heading: 'LGV Anastasia 2025 Geo', serif;
  --font-body: 'FiraGo', sans-serif;

  /* ── Spacing Scale ── */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 14px;
  --space-md: 20px;
  --space-lg: 28px;
  --space-xl: 40px;
  --space-2xl: 60px;
  --space-3xl: 80px;
  --space-4xl: 120px;

  /* ── Layout ── */
  --gutter: 60px;

  /* ── Easing ── */
  --ease: cubic-bezier(0.77, 0, 0.18, 1);

  /* ── Transition Durations ── */
  --duration-fast: 0.3s;
  --duration-base: 0.45s;
  --duration-slow: 0.6s;
  --duration-slower: 0.9s;
}

/* ── Responsive Gutter ── */
@media (max-width: 960px) {
  :root { --gutter: 32px; }
}
@media (max-width: 760px) {
  :root { --gutter: 24px; }
}