/* ============================================================
   323 Ocean — Effects: radii, borders, shadows, motion
   Restrained. Subtle shadows. No heavy glows or bouncy motion.
   ============================================================ */

:root {
  /* ---- Corner radii ---- */
  --radius-sm:   6px;
  --radius:      10px;   /* default card radius (10–14px) */
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;
  --radius-input:8px;
  --radius-btn:  8px;    /* buttons: 8px or full pill */

  /* ---- Borders ---- */
  --border-width: 1px; /* @kind other */
  --border-card:  1px solid var(--border); /* @kind other */
  --border-dark:  1px solid var(--dk-border); /* @kind other */
  --hairline-dark: rgba(255,255,255,0.18); /* @kind color */

  /* ---- Shadows (subtle, document-grade) ---- */
  --shadow-xs:  0 1px 2px rgba(4,36,68,0.04);
  --shadow-sm:  0 1px 3px rgba(4,36,68,0.06), 0 1px 2px rgba(4,36,68,0.04);
  --shadow:     0 4px 16px rgba(4,36,68,0.06), 0 1px 3px rgba(4,36,68,0.04);
  --shadow-md:  0 10px 30px rgba(4,36,68,0.08), 0 2px 6px rgba(4,36,68,0.05);
  --shadow-lg:  0 24px 60px rgba(4,36,68,0.12), 0 4px 12px rgba(4,36,68,0.06);
  --shadow-focus: 0 0 0 3px var(--navy-ring);     /* input focus ring */
  --shadow-focus-gold: 0 0 0 3px var(--gold-glow);

  /* ---- Motion ---- */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur:         220ms; /* @kind other */
  --dur-slow:    420ms; /* @kind other */
  --transition:  all var(--dur) var(--ease); /* @kind other */

  /* ---- Blur (used sparingly: sticky nav, modal scrim) ---- */
  --blur:        saturate(140%) blur(12px); /* @kind other */
}