/* ============================================================
   variables.css — design tokens (Phase 4)
   Coastal palette: deep ocean navy · warm sand/cream · coral · foam
   ============================================================ */
:root {
  /* --- Brand colour --- */
  --color-navy:        #0c2b3a;
  --color-navy-deep:   #071c27;
  --color-navy-700:    #103848;
  --color-navy-500:    #1d5066;

  --color-cream:       #faf3e8;
  --color-cream-2:     #f3e7d3;
  --color-sand:        #e7d2ac;
  --color-sand-deep:   #d9bd8c;

  --color-accent:      #e07a5f;   /* coral / terracotta */
  --color-accent-2:    #cf6044;   /* coral pressed */
  --color-accent-soft: #f4b9a8;

  --color-foam:        #8cbfb7;   /* sea foam teal */
  --color-foam-light:  #cfe6e1;

  --color-ink:         #1f2f37;
  --color-white:       #ffffff;

  /* --- Semantic --- */
  --bg:               var(--color-cream);
  --bg-alt:           var(--color-cream-2);
  --bg-dark:          var(--color-navy);
  --text:             var(--color-ink);
  --text-soft:        #54636b;
  --text-on-dark:     #f1e7d6;
  --text-on-dark-soft:#b9c7cc;
  --line:             rgba(31, 47, 55, 0.12);
  --line-on-dark:     rgba(255, 255, 255, 0.14);

  /* --- Typography --- */
  --font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  --font-sans:    'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-display: clamp(3rem, 8vw, 9rem);
  --fs-h1:      clamp(2.5rem, 6vw, 5.5rem);
  --fs-h2:      clamp(2rem, 4.5vw, 3.75rem);
  --fs-h3:      clamp(1.45rem, 2.6vw, 2.25rem);
  --fs-h4:      clamp(1.15rem, 1.6vw, 1.4rem);
  --fs-lead:    clamp(1.1rem, 1.5vw, 1.4rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.875rem;
  --fs-label:   0.78rem;

  --lh-tight:   1.04;
  --lh-snug:    1.22;
  --lh-body:    1.7;

  --tracking-label: 0.22em;
  --tracking-wide:  0.04em;

  /* --- Spacing scale (8pt-ish) --- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6.5rem;
  --space-8: 9rem;
  --section-y: clamp(4.5rem, 9vw, 9rem);

  /* --- Layout --- */
  --container:    1240px;
  --container-wide: 1480px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* --- Radius --- */
  --radius-sm: 8px;
  --radius:    16px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-pill: 999px;

  /* --- Shadow --- */
  --shadow-sm: 0 2px 8px rgba(7, 28, 39, 0.08);
  --shadow:    0 18px 40px -20px rgba(7, 28, 39, 0.35);
  --shadow-lg: 0 40px 80px -30px rgba(7, 28, 39, 0.45);
  --shadow-accent: 0 18px 40px -16px rgba(224, 122, 95, 0.5);

  /* --- Motion --- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   0.25s;
  --dur:        0.45s;
  --dur-slow:   0.8s;

  /* --- Z-index --- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-mobile-menu: 300;
  --z-scroll-bar: 350;
  --z-loader: 1000;
}