/* ============================================================
   IPOOLGO — Design tokens (single source of truth)
   Water + wellness luxury: deep ocean, icy aqua, warm gold.
   ============================================================ */

:root {
  /* ---- Brand palette ------------------------------------- */
  --c-ink:        #0E1A24;   /* near-black navy — primary text        */
  --c-deep:       #0B3B5E;   /* deep ocean — primary brand            */
  --c-deep-700:   #082C46;   /* darker ocean for gradients/hover      */
  --c-deep-900:   #05192A;   /* almost-black ocean footer             */
  --c-azure:      #1289C7;   /* brand blue — links, active            */
  --c-aqua:       #38C6E0;   /* icy accent — highlights               */
  --c-aqua-soft:  #9BE3F0;   /* pale aqua — tints                     */
  --c-gold:       #C6A15B;   /* luxury metallic accent                */
  --c-gold-soft:  #E7D6AE;   /* soft gold — subtle highlights         */

  /* ---- Neutrals & surfaces ------------------------------- */
  --c-white:      #FFFFFF;
  --c-cream:      #F7F2E9;   /* warm background section                */
  --c-mist:       #EEF5F9;   /* cool background section                */
  --c-surface:    #FFFFFF;
  --c-surface-2:  #F5F8FA;
  --c-line:       #E2E8ED;   /* borders / dividers                     */
  --c-line-2:     #D3DDE4;
  --c-muted:      #566674;   /* secondary text (AA on white)           */

  /* ---- Semantic ------------------------------------------ */
  --c-success:    #1E9E6A;
  --c-warning:    #B9790C;
  --c-error:      #D6453C;
  --c-bg:         var(--c-white);
  --c-text:       var(--c-ink);

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

  --fs-hero:  clamp(2.75rem, 6vw + 1rem, 5.5rem);
  --fs-h1:    clamp(2.25rem, 4vw + 0.5rem, 3.75rem);
  --fs-h2:    clamp(1.75rem, 2.5vw + 0.75rem, 2.75rem);
  --fs-h3:    clamp(1.375rem, 1.4vw + 0.75rem, 1.875rem);
  --fs-h4:    1.25rem;
  --fs-lead:  clamp(1.0625rem, 0.6vw + 0.95rem, 1.3125rem);
  --fs-body:  1rem;
  --fs-sm:    0.875rem;
  --fs-xs:    0.75rem;

  --lh-tight: 1.08;
  --lh-snug:  1.28;
  --lh-body:  1.65;

  --fw-light: 300;
  --fw-reg:   400;
  --fw-med:   500;
  --fw-semi:  600;
  --fw-bold:  700;

  --track-tight: -0.02em;
  --track-wide:  0.14em;

  /* ---- Spacing (8-pt scale) ------------------------------ */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;   --sp-11: 10rem;

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

  /* ---- Shadows (soft, layered) --------------------------- */
  --sh-xs:  0 1px 2px rgba(14,26,36,.06);
  --sh-sm:  0 2px 8px rgba(14,26,36,.06), 0 1px 2px rgba(14,26,36,.04);
  --sh-md:  0 10px 28px rgba(11,59,94,.10), 0 2px 6px rgba(14,26,36,.05);
  --sh-lg:  0 24px 56px rgba(11,59,94,.16), 0 6px 16px rgba(14,26,36,.06);
  --sh-glow: 0 12px 44px rgba(56,198,224,.28);

  /* ---- Layout -------------------------------------------- */
  --container:        1240px;
  --container-narrow: 820px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-h: 76px;

  /* ---- Motion -------------------------------------------- */
  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in:  cubic-bezier(.55,.06,.68,.19);
  --dur-fast: .18s;
  --dur:      .35s;
  --dur-slow: .6s;

  /* ---- z-index ------------------------------------------- */
  --z-header:  100;
  --z-overlay: 200;
  --z-drawer:  250;
  --z-modal:   300;
  --z-toast:   400;
}

/* Respect users who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
