/* ==========================================================================
   Elmo's Travel & Tours — Design Tokens
   Palette derived from the brand logo (El Nido lagoon photo inside a
   copper rope border, deep teal serif wordmark, cream backing).
   ========================================================================== */

:root {
  /* --- Brand colors --- */
  --teal-900: #0a2f2f;
  --teal-800: #0e3f3f;
  --teal-700: #124e4e;
  --teal-600: #166363;
  --teal-500: #1c7a7a;
  --turquoise-600: #17a89e;
  --turquoise-500: #2fc6c1;
  --turquoise-400: #5fd9d2;
  --turquoise-300: #9be9e2;
  --copper-700: #a3652f;
  --copper-600: #c17f45;
  --copper-500: #d3985f;
  --copper-300: #eec89a;
  --leaf-600: #588a45;
  --leaf-500: #6fa85c;
  --leaf-300: #a9cd97;
  --sand-50: #fffdf8;
  --sand-100: #fbf6ec;
  --sand-200: #f4ead4;
  --sand-300: #ecdcbb;
  --ink-900: #10221f;
  --ink-800: #17302b;
  --ink-700: #26433c;
  --ink-600: #3c5b53;
  --ink-500: #5b7a71;
  --white: #ffffff;

  /* --- Semantic tokens --- */
  --color-bg: var(--sand-100);
  --color-bg-alt: var(--sand-50);
  --color-text: var(--ink-900);
  --color-text-soft: var(--ink-600);
  --color-primary: var(--teal-700);
  --color-primary-dark: var(--teal-900);
  --color-accent: var(--copper-600);
  --color-accent-2: var(--turquoise-500);
  --color-accent-3: var(--leaf-500);
  --color-border: rgba(16, 34, 31, 0.1);

  /* --- Gradients --- */
  --gradient-ocean: linear-gradient(135deg, #0a2f2f 0%, #145c5c 45%, #2fc6c1 100%);
  --gradient-sand: linear-gradient(180deg, var(--sand-50) 0%, var(--sand-200) 100%);
  --gradient-copper: linear-gradient(135deg, var(--copper-500) 0%, var(--copper-700) 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.18) 100%);
  --gradient-hero-scrim: linear-gradient(180deg, rgba(10, 33, 31, 0.35) 0%, rgba(10, 33, 31, 0.55) 55%, rgba(8, 26, 24, 0.92) 100%);
  --gradient-mesh: radial-gradient(38% 38% at 12% 18%, rgba(47, 198, 193, 0.28) 0%, rgba(47, 198, 193, 0) 70%),
    radial-gradient(45% 40% at 88% 12%, rgba(193, 127, 69, 0.22) 0%, rgba(193, 127, 69, 0) 70%),
    radial-gradient(50% 45% at 82% 92%, rgba(111, 168, 92, 0.18) 0%, rgba(111, 168, 92, 0) 70%),
    radial-gradient(45% 45% at 6% 88%, rgba(20, 78, 78, 0.16) 0%, rgba(20, 78, 78, 0) 70%);

  /* --- Glass / elevation --- */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-blur: blur(18px);
  --shadow-sm: 0 2px 10px rgba(16, 34, 31, 0.08);
  --shadow-md: 0 12px 32px rgba(16, 34, 31, 0.12);
  --shadow-lg: 0 24px 60px rgba(16, 34, 31, 0.18);
  --shadow-glow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 20px 45px rgba(10, 33, 31, 0.25);

  /* --- Radii --- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-pill: 999px;

  /* --- Type --- */
  --font-display: "Fraunces", "Playfair Display", serif;
  --font-body: "Manrope", "Inter", sans-serif;
  --fs-h1: clamp(2.6rem, 5.6vw, 5rem);
  --fs-h2: clamp(2rem, 3.6vw, 3.1rem);
  --fs-h3: clamp(1.35rem, 2vw, 1.8rem);
  --fs-lead: clamp(1.05rem, 1.4vw, 1.25rem);

  /* --- Spacing / layout --- */
  --container-w: 1280px;
  --section-pad: clamp(4rem, 8vw, 7.5rem);
  --gap-xs: 0.5rem;
  --gap-sm: 1rem;
  --gap-md: 1.75rem;
  --gap-lg: 2.75rem;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.25s;
  --dur-med: 0.55s;
  --dur-slow: 0.9s;

  --nav-h: 84px;
}