/* ============================================================
   SPACING, RADIUS, SHADOW, MOTION
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Radius — the brand favors big, soft, almost-pill rounding ---- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-pill: 999px;

  /* ---- Shadow — very soft, low-contrast, warm-tinted ---- */
  --shadow-sm: 0 2px 8px rgba(43, 43, 43, 0.06);
  --shadow-md: 0 8px 24px rgba(43, 43, 43, 0.08);
  --shadow-lg: 0 20px 48px rgba(43, 43, 43, 0.10);
  --shadow-dark-card: 0 24px 60px rgba(0, 0, 0, 0.28);

  /* ---- Motion — calm, deliberate, never bouncy ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --duration-fast: 150ms; /* @kind other */
  --duration-standard: 280ms; /* @kind other */
  --duration-slow: 480ms; /* @kind other */
  --duration-decor: 900ms; /* @kind other */

  /* ---- Container ---- */
  --container-max: 1180px;
  --container-pad: clamp(20px, 5vw, 64px);

  /* ---- Floating nav ---- */
  --nav-max: 60rem;
}

/* ============================================================
   SHARED KEYFRAMES — understated, continuous background/decoration
   motion. Never used for one-shot UI feedback (that's inline
   transitions); reserved for ambient floating shapes and gradients.
   ============================================================ */
@keyframes ds-float-y {
  0%, 100% { transform: translateY(0) rotate(var(--float-rot, 0deg)); }
  50% { transform: translateY(-14px) rotate(var(--float-rot, 0deg)); }
}
@keyframes ds-float-slow {
  0%, 100% { transform: translate(0, 0) rotate(var(--float-rot, 0deg)); }
  50% { transform: translate(6px, -18px) rotate(var(--float-rot, 0deg)); }
}
@keyframes ds-aurora-drift {
  0%   { transform: translate(-4%, -2%) scale(1); }
  50%  { transform: translate(4%, 3%) scale(1.08); }
  100% { transform: translate(-4%, -2%) scale(1); }
}
@keyframes ds-aurora-drift-b {
  0%, 100% { transform: translate(5%, -4%) scale(1.05); }
  50%      { transform: translate(-6%, 5%) scale(0.92); }
}
@keyframes ds-aurora-drift-c {
  0%, 100% { transform: translate(-5%, 5%) scale(0.95); }
  50%      { transform: translate(6%, -4%) scale(1.12); }
}
@keyframes ds-hero-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ds-liquid-in {
  0%   { border-radius: 50%; transform: translate(-50%, -50%) scale(0); }
  45%  { border-radius: 46% 54% 58% 42% / 42% 48% 52% 58%; transform: translate(-50%, -50%) scale(1.08); }
  75%  { border-radius: 54% 46% 44% 56% / 56% 44% 58% 42%; transform: translate(-50%, -50%) scale(0.97); }
  100% { border-radius: 48% 52% 50% 50% / 50% 48% 52% 50%; transform: translate(-50%, -50%) scale(1); }
}