/* ============================================================
   SeaRendipity — Design Tokens
   Palette: Tropical Vivid (Option 2)
   Phase 1 of the modernization. Variables only — defining these
   has no visual effect until they are referenced by components.
   ============================================================ */

:root {
  /* ---- Brand color palette (Tropical Vivid) ---- */
  --color-ink: #08343a;          /* darkest — primary text / headings on light */
  --color-teal: #00a8c6;         /* primary brand aqua */
  --color-teal-deep: #0a7d94;    /* deeper aqua for gradients / hovers */
  --color-palm: #2fae7a;         /* palm green — pills, secondary accents */
  --color-palm-deep: #1f8f61;    /* palm green hover */
  --color-coral: #ff6f59;        /* CTA / primary action */
  --color-coral-hover: #f0563f;  /* CTA hover */
  --color-sand: #ffe9c7;         /* warm sand accent */
  --color-sand-soft: #eafaf9;    /* pale aqua-tinted section background */
  --color-paper: #ffffff;        /* base surface */
  --color-muted: #4d6a6e;        /* muted body / captions */
  --color-line: #d8e6e5;         /* hairline borders on light surfaces */

  /* ---- Semantic aliases ---- */
  --color-bg: var(--color-paper);
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-muted);
  --color-heading: var(--color-ink);
  --color-link: var(--color-teal-deep);
  --color-link-hover: var(--color-coral);
  --color-cta: var(--color-coral);
  --color-cta-hover: var(--color-coral-hover);
  --color-cta-text: #ffffff;
  --color-accent: var(--color-teal);

  /* Text/eyebrows on dark or photo backgrounds */
  --color-on-dark: #ffffff;
  --color-on-dark-muted: rgba(255, 255, 255, 0.92);
  --color-eyebrow-on-dark: var(--color-sand);

  /* Gradients */
  --gradient-stat: linear-gradient(90deg, var(--color-teal), var(--color-palm));
  --gradient-hero-overlay: linear-gradient(
    180deg,
    rgba(0, 84, 102, 0.50) 0%,
    rgba(0, 120, 140, 0.12) 40%,
    rgba(0, 60, 72, 0.62) 100%
  );

  /* ---- Typography ---- */
  /* Bad Script = signature/brand accent ONLY (wordmark + select moments).
     Fraunces = display / headings.  Inter = body / UI. */
  --font-brand: "Bad Script", "Segoe Script", cursive;
  --font-display: "Fraunces", "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale (mobile → desktop via clamp) */
  --fs-eyebrow: 0.8125rem;                          /* 13px */
  --fs-body: 1.0625rem;                             /* 17px */
  --fs-small: 0.875rem;                             /* 14px */
  --fs-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.375rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 2.2vw, 2.5rem);
  --fs-h1: clamp(2.25rem, 1.4rem + 4.2vw, 3.875rem);
  --fs-hero: clamp(2.5rem, 1.4rem + 5.2vw, 3.875rem);

  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.6;

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

  --tracking-eyebrow: 0.24em;
  --tracking-tight: -0.01em;

  /* ---- Spacing scale (8px base) ---- */
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 5.5rem;    /* 88 */

  /* ---- Layout ---- */
  --container-max: 1180px;
  --container-pad: clamp(1.25rem, 0.5rem + 3vw, 2rem);
  --content-max: 72ch;

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 2px 8px rgba(8, 52, 58, 0.10);
  --shadow-md: 0 18px 40px -24px rgba(0, 168, 198, 0.50);
  --shadow-lg: 0 30px 60px -28px rgba(0, 168, 198, 0.55);
  --shadow-cta: 0 12px 26px -10px rgba(255, 111, 89, 0.90);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.18s;
  --dur: 0.28s;

  /* ---- Z-index scale ---- */
  --z-header: 1000;
  --z-overlay: 1100;
  --z-lightbox: 1200;
}