/* ============================================================
   variables.css
   Design tokens — the single source of truth.
   Change values here and the whole site follows.
   ============================================================ */

:root {
  /* ---- Color: palette derived from the beach portrait ---- */
  --color-ocean:        #5B87B4;   /* primary accent — used sparingly */
  --color-ocean-deep:   #3E6591;   /* accent hover / pressed          */
  --color-ocean-tint:   #EAF0F7;   /* faint blue wash for surfaces    */
  --color-sand:         #E7D9C8;   /* warm neutral accent             */
  --color-sand-soft:    #F1E9DE;   /* lighter sand for fills          */

  --color-bg:           #FAF8F5;   /* page background (paper)         */
  --color-surface:      #FFFFFF;   /* cards / raised surfaces         */
  --color-ink:          #111827;   /* primary text                    */
  --color-muted:        #6B7280;   /* secondary text                  */
  --color-faint:        #9CA3AF;   /* tertiary text / captions        */
  --color-border:       #E5E7EB;   /* hairlines & borders             */
  --color-border-soft:  #EFECE7;   /* warmer hairline on paper        */

  /* ---- Ambient glows (the "tide" signature) ---- */
  --glow-ocean: rgba(91, 135, 180, 0.28);
  --glow-sand:  rgba(231, 217, 200, 0.55);

  /* ---- Typography ---- */
  --font-display: "General Sans", "Satoshi", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif:   "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Fluid type scale (clamp: min → preferred → max) */
  --step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.88rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);
  --step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.45rem);
  --step-2:  clamp(1.60rem, 1.35rem + 1.20vw, 2.30rem);
  --step-3:  clamp(2.20rem, 1.70rem + 2.40vw, 3.40rem);
  --step-4:  clamp(2.90rem, 2.00rem + 4.20vw, 5.20rem);
  --step-5:  clamp(3.60rem, 2.30rem + 6.10vw, 7.20rem);

  --leading-tight: 1.04;
  --leading-snug:  1.18;
  --leading-body:  1.65;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.14em;   /* eyebrows / labels */

  /* ---- Spacing scale (8pt-ish, fluid at the top end) ---- */
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  clamp(4rem, 3rem + 4vw, 7rem);
  --space-10: clamp(6rem, 4rem + 8vw, 11rem);   /* section rhythm */

  /* ---- Layout ---- */
  --container:      1200px;
  --container-wide: 1440px;
  --gutter:         clamp(1.25rem, 4vw, 3rem);

  /* ---- Radii ---- */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---- Elevation (soft, sand-tinted rather than grey) ---- */
  --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-sm: 0 2px 8px rgba(17, 24, 39, 0.05);
  --shadow-md: 0 12px 30px -12px rgba(17, 24, 39, 0.14);
  --shadow-lg: 0 30px 60px -24px rgba(17, 24, 39, 0.22);

  /* ---- Motion ---- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);   /* signature ease */
  --ease-io:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  180ms;
  --dur:       320ms;
  --dur-slow:  620ms;

  /* ---- Z-index ---- */
  --z-cursor:  9999;
  --z-loader:  9000;
  --z-nav:     1000;
  --z-overlay: 1200;
}

/* Motion is opt-in: when a user prefers less, we collapse durations. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}