/* ═══════════════════════════════════════════════════════════
   Design Tokens — CalipsoMarin
   Central CSS custom properties: color palette, typography,
   spacing scale, glass morphism, and ocean-depth animation.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Typography ── */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Outfit', 'Inter', sans-serif;

  --fs-xs:   clamp(0.70rem, 0.65rem + 0.25vw, 0.80rem);
  --fs-sm:   clamp(0.80rem, 0.75rem + 0.30vw, 0.90rem);
  --fs-base: clamp(0.95rem, 0.88rem + 0.35vw, 1.10rem);
  --fs-md:   clamp(1.15rem, 1.00rem + 0.60vw, 1.40rem);
  --fs-lg:   clamp(1.45rem, 1.20rem + 1.00vw, 2.00rem);
  --fs-xl:   clamp(2.00rem, 1.50rem + 2.00vw, 3.20rem);
  --fs-2xl:  clamp(2.80rem, 2.00rem + 3.00vw, 4.80rem);
  --fs-3xl:  clamp(3.50rem, 2.50rem + 4.00vw, 6.00rem);

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.6;
  --lh-relaxed: 1.8;

  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-wider:   0.08em;
  --ls-widest:  0.14em;

  /* ── Spacing Scale ── */
  --space-2xs: clamp(0.25rem, 0.20rem + 0.25vw, 0.375rem);
  --space-xs:  clamp(0.50rem, 0.40rem + 0.50vw, 0.75rem);
  --space-sm:  clamp(0.75rem, 0.60rem + 0.75vw, 1.125rem);
  --space-md:  clamp(1.00rem, 0.80rem + 1.00vw, 1.50rem);
  --space-lg:  clamp(1.50rem, 1.20rem + 1.50vw, 2.25rem);
  --space-xl:  clamp(2.00rem, 1.60rem + 2.00vw, 3.00rem);
  --space-2xl: clamp(3.00rem, 2.40rem + 3.00vw, 4.50rem);
  --space-3xl: clamp(4.00rem, 3.20rem + 4.00vw, 6.00rem);
  --space-4xl: clamp(6.00rem, 4.80rem + 5.00vw, 9.00rem);

  /* ── Brand Colors ── */
  --clr-navy:         hsl(207, 85%, 12%);
  --clr-navy-light:   hsl(207, 70%, 20%);
  --clr-navy-deep:    hsl(210, 90%, 6%);
  --clr-ocean:        hsl(195, 75%, 35%);
  --clr-ocean-light:  hsl(192, 65%, 50%);
  --clr-turquoise:    hsl(185, 60%, 55%);
  --clr-turquoise-soft: hsl(185, 45%, 65%);
  --clr-gold:         hsl(40, 75%, 55%);
  --clr-gold-light:   hsl(40, 80%, 70%);
  --clr-gold-warm:    hsl(38, 70%, 62%);
  --clr-sand:         hsl(30, 40%, 82%);
  --clr-sand-light:   hsl(32, 45%, 90%);

  /* ── Neutral Scale ── */
  --clr-white:     hsl(0, 0%, 100%);
  --clr-gray-50:   hsl(210, 20%, 96%);
  --clr-gray-100:  hsl(210, 15%, 90%);
  --clr-gray-200:  hsl(210, 12%, 80%);
  --clr-gray-300:  hsl(210, 10%, 65%);
  --clr-gray-400:  hsl(210, 8%, 50%);
  --clr-gray-500:  hsl(210, 8%, 40%);
  --clr-gray-600:  hsl(210, 10%, 28%);
  --clr-gray-700:  hsl(210, 12%, 18%);
  --clr-gray-800:  hsl(210, 15%, 12%);
  --clr-gray-900:  hsl(210, 20%, 6%);
  --clr-black:     hsl(210, 25%, 3%);

  /* ── Text Colors ── */
  --clr-text-primary:   rgba(255, 255, 255, 0.95);
  --clr-text-secondary: rgba(255, 255, 255, 0.70);
  --clr-text-muted:     rgba(255, 255, 255, 0.45);
  --clr-text-inverse:   var(--clr-gray-900);

  /* ── Glass Morphism Tokens ── */
  --glass-bg:           rgba(255, 255, 255, 0.04);
  --glass-bg-hover:     rgba(255, 255, 255, 0.07);
  --glass-bg-strong:    rgba(255, 255, 255, 0.08);
  --glass-bg-nav:       rgba(2, 27, 46, 0.60);
  --glass-border:       rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.16);
  --glass-border-accent: rgba(100, 200, 220, 0.15);
  --glass-blur:         16px;
  --glass-blur-heavy:   24px;
  --glass-shadow:       0 8px 32px rgba(0, 0, 0, 0.12);
  --glass-shadow-lg:    0 16px 48px rgba(0, 0, 0, 0.18);

  /* ── Navbar ── */
  --nav-height: 72px;
  --nav-height-mobile: 60px;

  /* ── Layout ── */
  --content-max-width: 1200px;
  --content-max-wide: 1400px;
  --content-padding: clamp(1.25rem, 1rem + 2vw, 3rem);

  /* ── Transitions ── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   600ms;
  --duration-reveal: 800ms;

  /* ── Border Radius ── */
  --radius-sm:   0.375rem;
  --radius-md:   0.625rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-2xl:  2rem;
  --radius-full: 9999px;

  /* ═══ Ocean Depth — Dynamic Properties (set by bg.js) ═══ */
  --ocean-depth: 0;

  --ocean-top-color:    rgb(135, 206, 235);
  --ocean-mid-color:    rgb(175, 220, 240);
  --ocean-bottom-color: rgb(210, 195, 170);

  --sun-opacity: 1;
  --sun-top: 10%;

  --flare-opacity: 0.8;
  --flare-top: 10%;

  --vignette-opacity: 0.05;
}