/* ============================================================
   Almare Lanka Travels
   main.css — Centralized Design System — Single Source of Truth
   Version: 8.0.0 | www.almarelanka.com

   Brand: Almare Lanka Travels · Inbound Tour Operator & Tourist Transport
          Est. 2026 | Imaduwa, Sri Lanka
   Founder: Thusitha Duminda Fernando

   Theme: SILVER SHORE (light), v8.0
   Beach-inspired and premium: pearl and silver surfaces, deep sapphire
   text, royal sapphire buttons, satin silver metallic rules and champagne
   gold on small labels only. Photos keep their full brightness; text that
   sits on a photo uses a dark sapphire scrim (--color-scrim-rgb).
   Fonts: Cinzel (wordmark, labels), Cormorant Garamond (headings), Jost (body).

   Token names are unchanged from v6 so every child CSS file keeps working:
     --color-navy-*   pearl and silver surfaces (backgrounds, cards, panels)
     --color-gold-*   primary accent, ROYAL SAPPHIRE (buttons, links, hovers)
     --color-royal-*  deep sapphire / ink text scale
     --color-green-*  muted slate (secondary text); lagoon for small accents

   ⚠️  DO NOT hardcode colors, fonts, or spacing in any other CSS file.
   ⚠️  ALL values in child CSS files must reference variables defined here.
   ⚠️  DO NOT inline CSS or JS in HTML files.
   ⚠️  ALL company data must come from about-us.json, no fallback hardcoding.
   ============================================================ */

/* ============================================================
   1. GOOGLE FONTS IMPORT
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=Cinzel:wght@500;600&family=Jost:wght@300;400;500;600;700&display=swap');

/* ============================================================
   2. DESIGN TOKENS — BRAND COLORS
   ============================================================ */
:root {

  /* ─── Almare Lanka Travels GOLDEN NIGHT PALETTE ───────────────── */
  /*
     Night     : near-black with a faint blue cast, for backgrounds and panels
     Sunset gold: primary accent (token family --color-gold-*), buttons, links, glows
     Burnt orange: deep tone (--color-gold-darker) for gradients and depth
     Pearl     : body and heading text (token family --color-royal-*)
     Night grey: muted blue-grey for structure and secondary text (--color-green-*)
  */

  /* Night (Primary / Backgrounds): near-black with a blue cast, used for page, panels and cards */
  --color-navy:           #ECEFF3;
  --color-navy-deep:      #F6F7F9;
  --color-navy-abyss:     #F6F7F9;
  --color-navy-card:      #F6F7F9;
  --color-navy-mid:       #DFE4EA;
  --color-navy-light:     #E6EAEF;
  --color-navy-soft:      #9AA3AF;
  --color-navy-border:    #CDD3DB;
  --color-navy-rgb:       236, 239, 243;

  /* Sunset gold and burnt orange (Primary Accent / CTA). Token names kept as --color-gold-* for structural compatibility. */
  --color-gold:           #0F3B8C;
  --color-gold-light:     #2D5BBF;
  --color-gold-pale:      #1A4AA3;
  --color-gold-dark:      #0A2A66;
  --color-gold-darker:    #071C45;
  --color-gold-glow:      rgba(15, 59, 140, 0.22);
  --color-gold-glow-sm:   rgba(15, 59, 140, 0.12);
  --color-gold-bg:        rgba(15, 59, 140, 0.07);
  --color-gold-bg-hover:  rgba(15, 59, 140, 0.13);
  --color-gold-rgb:       15, 59, 140;

  /* Pearl (text scale). Token names kept as --color-royal-* for structural compatibility. */
  --color-royal:          #2E3A52;
  --color-royal-light:    #0A2A66;
  --color-royal-pale:     #1A4AA3;
  --color-royal-dark:     #4E5A70;
  --color-royal-darker:   #5F6A7E;
  --color-royal-glow:     rgba(10, 42, 102, 0.14);
  --color-royal-glow-sm:  rgba(10, 42, 102, 0.08);
  --color-royal-bg:       rgba(10, 42, 102, 0.04);
  --color-royal-bg-hover: rgba(10, 42, 102, 0.08);
  --color-royal-rgb:      10, 42, 102;

  /* Night grey (tertiary, structure and secondary text). Token names kept as --color-green-* for structural compatibility. */
  --color-green:          #5A6478;
  --color-green-light:    #4E5A70;
  --color-green-pale:     rgba(90, 100, 120, 0.16);
  --color-green-bg:       rgba(90, 100, 120, 0.07);
  --color-green-dark:     #24666C;
  --color-green-rgb:      90, 100, 120;

  /* ─── WHITE / NEUTRAL SCALE ───────────────────────────────── */
  --color-white:          #ffffff;

  /* v7.0 additions used by child files */
  --color-white-rgb:      255, 255, 255;
  --color-white-85:       rgba(255, 255, 255, 0.85);
  --color-white-55:       rgba(255, 255, 255, 0.55);
  --color-white-45:       rgba(255, 255, 255, 0.45);
  --color-white-25:       rgba(255, 255, 255, 0.25);
  --z-index-40:           40;
  --brand-facebook:       #1877F2;
  --wa-green-bright:      #5FE38A;
  --color-white-95:       rgba(255, 255, 255, 0.95);
  --color-white-90:       rgba(255, 255, 255, 0.90);
  --color-white-80:       rgba(255, 255, 255, 0.80);
  --color-white-75:       rgba(255, 255, 255, 0.75);
  --color-white-70:       rgba(255, 255, 255, 0.70);
  --color-white-65:       rgba(255, 255, 255, 0.65);
  --color-white-60:       rgba(255, 255, 255, 0.60);
  --color-white-50:       rgba(255, 255, 255, 0.50);
  --color-white-40:       rgba(255, 255, 255, 0.40);
  --color-white-35:       rgba(255, 255, 255, 0.35);
  --color-white-30:       rgba(255, 255, 255, 0.30);
  --color-white-20:       rgba(255, 255, 255, 0.20);
  --color-white-18:       rgba(255, 255, 255, 0.18);
  --color-white-12:       rgba(255, 255, 255, 0.12);
  --color-white-10:       rgba(255, 255, 255, 0.10);
  --color-white-08:       rgba(255, 255, 255, 0.08);
  --color-white-05:       rgba(255, 255, 255, 0.05);

  /* Gray Scale — neutral scale, no warm cast (50 = near-white, 900 = near-black) */
  --color-gray-50:        #F6F7F9;
  --color-gray-100:       #ECEFF3;
  --color-gray-200:       #DFE4EA;
  --color-gray-300:       #CDD3DB;
  --color-gray-400:       #9AA3AF;
  --color-gray-500:       #6B7487;
  --color-gray-600:       #4E5A70;
  --color-gray-700:       #2E3A52;
  --color-gray-800:       #0A2A66;
  --color-gray-900:       #071C45;

  /* Dark Overlay Scale — onyx-based, for photo/hero overlays that still need dark-on-image legibility */
  --color-dark-90:        rgba(7, 28, 69, 0.88);
  --color-dark-80:        rgba(7, 28, 69, 0.78);
  --color-dark-70:        rgba(7, 28, 69, 0.66);
  --color-dark-50:        rgba(7, 28, 69, 0.46);
  --color-dark-30:        rgba(7, 28, 69, 0.26);

  /* ─── SEMANTIC / STATUS COLORS, bright enough to read on the night background ─── */
  --color-success:        #2E7D4F;
  --color-success-light:  rgba(var(--color-success-rgb), 0.16);
  --color-success-dark:   #1F5C39;
  --color-success-rgb:    46, 125, 79;

  --color-warning:        #A87414;
  --color-warning-light:  rgba(168, 116, 20, 0.12);
  --color-warning-dark:   #7D560E;
  --color-warning-rgb:    168, 116, 20;

  --color-error:          #B3364A;
  --color-error-light:    rgba(var(--color-error-rgb), 0.16);
  --color-error-dark:     #8A2738;
  --color-error-text:     #B3364A;
  --color-error-rgb:      179, 54, 74;

  --color-info:           #0F3B8C;
  --color-info-light:     rgba(15, 59, 140, 0.10);
  --color-info-dark:      #0A2A66;
  --color-info-rgb:       15, 59, 140;

  /* ─── BACKGROUND TOKENS, night black with a faint blue cast ────── */
  --bg-primary:           #ECEFF3;
  --bg-secondary:         #F6F7F9;
  --bg-tertiary:          #DFE4EA;
  --bg-dark:              var(--color-navy-abyss);
  --bg-overlay:           rgba(7, 28, 69, 0.55);
  --bg-overlay-light:     rgba(7, 28, 69, 0.25);
  --bg-gold-light:        rgba(15, 59, 140, 0.05);
  --bg-green-light:       rgba(47, 127, 134, 0.06);
  --bg-texture-subtle:    var(--bg-primary);

  /* ─── TEXT TOKENS, warm white and gold on night black for readability ── */
  --text-primary:         var(--color-royal-light);
  --text-secondary:       var(--color-royal);
  --text-muted:           var(--color-green-light);
  --text-light:           var(--color-green);
  --text-lighter:         #6B7487;
  --text-white:           #ffffff;
  --text-gold:            var(--color-gold);
  --text-navy:            var(--color-navy);
  --text-green:           var(--color-green-dark);

  /* ─── BORDER TOKENS — dark neutral hairlines for the jet-black page ─ */
  --border-primary:       #CDD3DB;
  --border-secondary:     #DFE4EA;
  --border-light:         rgba(10, 42, 102, 0.10);
  --border-gold:          rgba(15, 59, 140, 0.30);
  --border-navy:          var(--color-navy-border);
  --border-focus:         var(--color-gold);

  /* ─── "GRADIENT" TOKENS — flattened to solid colors by design. Names kept
     for structural compatibility with every child file that references
     them; nothing in this system renders as an actual gradient. ─── */
  --gradient-primary:     linear-gradient(180deg, #ECEFF3 0%, #E6EAEF 100%);
  --gradient-gold:        linear-gradient(180deg, #1A4AA3 0%, #0F3B8C 60%, #0B2F72 100%);
  --gradient-gold-hover:  linear-gradient(180deg, #3D6FD1 0%, #1A4AA3 55%, #0F3B8C 100%);
  --gradient-royal:       var(--color-royal);
  --gradient-royal-hover: var(--color-royal-light);
  --gradient-green:       linear-gradient(135deg, #2F7F86 0%, #1F5F65 100%);
  /* Hero / photo-overlay — a flat scrim, not a fade, over hero images */
  --gradient-hero:        none;
  --gradient-depth:       linear-gradient(180deg, #ECEFF3 0%, #DFE4EA 100%);
  /* Photo-legibility scrim (top transparent -> bottom dark), used as an
     ::after over every photo card/hero image so the caption stays
     readable. This is a FUNCTIONAL fade, not decorative color styling,
     so it stays a real gradient — flattening it to a flat color darkens
     the whole photo uniformly instead of just the caption band. */
  --gradient-overlay:     linear-gradient(180deg, rgba(7, 28, 69, 0) 40%, rgba(7, 28, 69, 0.78) 100%);
  /* Premium fill — flat elevated dark panel (NOT gold: .pm-cta-band,
     .btn-premium and .divider-waves all pair this with white/gold TEXT
     on top, so it must stay dark or that text becomes unreadable). */
  --gradient-premium:     linear-gradient(160deg, #F8F9FB 0%, #E6EAEF 100%);
  /* Card fill — flat dark surface, one step above the page */
  --gradient-card:        linear-gradient(180deg, #F8F9FB 0%, #F2F4F7 100%);
  /* Glass effect — flat translucent black, paired with backdrop-filter blur */
  --gradient-glass:       rgba(246, 247, 249, 0.82);
  --gradient-text:        var(--color-gold);
  --gradient-warm:        var(--color-gold);
  --gradient-button:      var(--gradient-gold);

  /* ─── SHADOWS, on night black, elevation reads through opacity + a hairline
     border, not a soft light-theme drop shadow. Kept as pure black at
     higher opacity than the original light-theme values. ─── */
  --shadow-xs:            0 1px 2px rgba(10, 42, 102, 0.06);
  --shadow-sm:            0 1px 3px rgba(10, 42, 102, 0.08);
  --shadow-md:            0 4px 12px -2px rgba(10, 42, 102, 0.10);
  --shadow-lg:            0 10px 24px -8px rgba(10, 42, 102, 0.16);
  --shadow-xl:            0 18px 36px -12px rgba(10, 42, 102, 0.20);
  --shadow-2xl:           0 28px 56px -18px rgba(10, 42, 102, 0.26);
  --shadow-inner:         inset 0 1px 3px rgba(10, 42, 102, 0.08);
  --shadow-premium:       0 24px 48px -22px rgba(10, 42, 102, 0.40);

  /* Brand shadows — thin definition, not glow */
  --shadow-gold:          0 10px 24px -14px rgba(10, 42, 102, 0.75);
  --shadow-gold-lg:       0 16px 32px -14px rgba(10, 42, 102, 0.80);
  --shadow-navy:          0 6px 18px -8px rgba(10, 42, 102, 0.20);
  --shadow-royal:         0 4px 14px rgba(var(--color-royal-rgb), 0.16);
  --shadow-green:         0 4px 12px rgba(90, 100, 120, 0.15);

  /* Glow aliases — used sparingly on hover, kept subtle */
  --glow-navy:            0 10px 24px -10px rgba(10, 42, 102, 0.25);
  --glow-gold:            0 0 0 4px rgba(15, 59, 140, 0.10), 0 14px 30px -14px rgba(10, 42, 102, 0.70);
  --glow-royal:           0 6px 20px rgba(var(--color-royal-rgb), 0.22);
  --glow-green:           0 8px 20px -10px rgba(90, 100, 120, 0.25);
  --glow-premium:         0 24px 48px -22px rgba(10, 42, 102, 0.45);
  --glow-soft:            0 10px 30px -14px rgba(10, 42, 102, 0.35);

  --shadow-luxury:        0 24px 48px -22px rgba(10, 42, 102, 0.40), 0 0 0 1px rgba(154, 163, 175, 0.35);

  /* ─── TYPOGRAPHY ─────────────────────────────────────────── */
  /*
     Display:  Cormorant Garamond (500/600). Headings, package names, quotes.
               Use the italic for the one glowing accent word in a headline.
     Body:     Manrope (400 to 800). Body copy, navigation, labels, buttons.
     Labels:   Manrope uppercase with wide tracking (no separate caps face).
  */
  --font-display:         'Cormorant Garamond', 'Cormorant', 'Georgia', serif;
  --font-primary:         'Jost', 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-elegant:         'Cormorant Garamond', 'Georgia', serif;
  --font-mono:            'Courier New', monospace;

  /* Font-weight tokens */
  --font-weight-light:    300;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold:800;
  --font-weight-black:    900;

  /* Type scale */
  --text-xs:    0.72rem;
  --text-sm:    0.85rem;
  --text-base:  1rem;
  --text-md:    1.075rem;
  --text-lg:    1.2rem;
  --text-xl:    1.35rem;
  --text-2xl:   1.6rem;
  --text-3xl:   1.95rem;
  --text-4xl:   2.4rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;
  --text-7xl:   4.5rem;
  --text-8xl:   5.5rem;
  --text-9xl:   7rem;

  /* Line heights */
  --leading-none:     1;
  --leading-tight:    1.2;
  --leading-snug:     1.35;
  --leading-normal:   1.55;
  --leading-relaxed:  1.70;
  --leading-loose:    1.90;

  /* Letter spacing */
  --ls-tight:    -0.015em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;
  --ls-widest:   0.18em;

  /* ─── SPACING SCALE ──────────────────────────────────────── */
  --spacing-0:     0;
  --spacing-px:    1px;
  --spacing-0-5:   0.125rem;
  --spacing-1:     0.25rem;
  --spacing-1-5:   0.375rem;
  --spacing-2:     0.5rem;
  --spacing-2-5:   0.625rem;
  --spacing-3:     0.75rem;
  --spacing-3-5:   0.875rem;
  --spacing-4:     1rem;
  --spacing-5:     1.25rem;
  --spacing-6:     1.5rem;
  --spacing-7:     1.75rem;
  --spacing-8:     2rem;
  --spacing-9:     2.25rem;
  --spacing-10:    2.5rem;
  --spacing-11:    2.75rem;
  --spacing-12:    3rem;
  --spacing-14:    3.5rem;
  --spacing-16:    4rem;
  --spacing-20:    5rem;
  --spacing-24:    6rem;
  --spacing-28:    7rem;
  --spacing-32:    8rem;
  --spacing-40:    10rem;
  --spacing-48:    12rem;
  --spacing-56:    14rem;
  --spacing-64:    16rem;
  --spacing-72:    18rem;
  --spacing-96:    24rem;
  --spacing-128:   32rem;
  --spacing-144:   36rem;

  /* ─── BORDER RADIUS — kept squarer/finer, more editorial than "app" rounded ─── */
  --radius-none:  0;
  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    14px;
  --radius-xl:    20px;
  --radius-2xl:   24px;
  --radius-3xl:   28px;
  --radius-4xl:   36px;
  --radius-full:  9999px;

  /* ─── TRANSITIONS ────────────────────────────────────────── */
  --transition-none:      none;
  --transition-fast:      all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:      all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:      all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth:    all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-premium:   all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-elegant:   all 350ms cubic-bezier(0.165, 0.84, 0.44, 1);
  --transition-bounce:    all 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── Z-INDEX SCALE ──────────────────────────────────────── */
  --z-index-hide:     -1;
  --z-index-0:         0;
  --z-index-auto:      auto;
  --z-index-base:      0;
  --z-index-10:        10;
  --z-index-20:        20;
  --z-index-30:        30;
  --z-index-50:        50;
  --z-index-docked:    10;
  --z-index-dropdown:  100;
  --z-index-sticky:    200;
  --z-index-fixed:     300;
  --z-index-overlay:   400;
  --z-index-modal:     500;
  --z-index-toast:     600;
  --z-index-tooltip:   700;
  --z-index-max:       9999;
  --z-index-maximum:   9999;

  /* ─── LAYOUT ─────────────────────────────────────────────── */
  --container-max:    1200px;
  --container-wide:   1400px;
  --container-narrow: 900px;

  /* Header */
  --header-height-top:      42px;
  --header-height-nav:      72px;
  --header-height-total:    114px;
  --header-height-scrolled: 60px;

  /* WhatsApp widget tokens */
  --wa-green:         #25d366;
  --wa-green-dark:    #1da851;
  --wa-green-light:   #dcf8c6;
  --wa-green-rgb:     37, 211, 102;
  --wa-bubble-bg:     #F6F7F9;
  --wa-fab-size:      60px;
  --wa-popup-width:   320px;
  --wa-popup-height:  420px;

  /* Slide interval */
  --slide-interval:   5000ms;
}

/* ============================================================
   3. BACKWARD COMPATIBILITY BRIDGE
   Maps ALL legacy variable names used across every child CSS file
   to the new Almare Lanka Travels brand tokens.
   DO NOT remove these — ALL child CSS files depend on them.
   ============================================================ */
:root {

  /* ── Old "orange" accent → Ceylon Gold ──────────────── */
  --primary-orange:       var(--color-gold);
  --secondary-orange:     var(--color-gold-light);
  --accent-orange:        var(--color-gold-pale);
  --dark-orange:          var(--color-gold-dark);
  --light-orange:         var(--color-gold-bg);
  --orange-50:            rgba(232, 150, 42, 0.04);
  --orange-100:           rgba(232, 150, 42, 0.08);
  --orange-200:           rgba(232, 150, 42, 0.15);
  --orange-300:           var(--color-gold-pale);
  --orange-400:           var(--color-gold-light);
  --orange-500:           var(--color-gold);
  --orange-600:           var(--color-gold-dark);
  --orange-700:           var(--color-gold-dark);
  --orange-800:           var(--color-gold-darker);
  --orange-900:           var(--color-gold-darker);

  /* ── Old "teal" → Safety Navy soft tones ────────────── */
  --primary-teal:         var(--color-navy-soft);
  --secondary-teal:       var(--color-navy-light);
  --accent-teal:          var(--color-navy-border);
  --dark-teal:            var(--color-navy-mid);
  --light-teal:           rgba(47, 127, 134, 0.10);
  --teal-50:              rgba(47, 127, 134, 0.04);
  --teal-100:             rgba(47, 127, 134, 0.08);
  --teal-200:             rgba(47, 127, 134, 0.15);
  --teal-300:             rgba(47, 127, 134, 0.30);
  --teal-400:             var(--color-navy-border);
  --teal-500:             var(--color-navy-soft);
  --teal-600:             var(--color-navy-light);
  --teal-700:             var(--color-navy-mid);
  --teal-800:             var(--color-navy);
  --teal-900:             var(--color-navy-deep);

  /* ── Old "red" → error color ─────────────────────────────── */
  --primary-red:          var(--color-error);
  --secondary-red:        #e8677e;
  --accent-red:           #f0a3b1;
  --dark-red:             var(--color-error-dark);
  --light-red:            var(--color-error-light);
  --red-50:               var(--color-error-light);
  --red-100:              var(--color-error-light);
  --red-200:              rgba(179, 54, 74, 0.20);
  --red-300:              rgba(179, 54, 74, 0.40);
  --red-400:              rgba(179, 54, 74, 0.60);
  --red-500:              var(--color-error);
  --red-600:              var(--color-error);
  --red-700:              var(--color-error-dark);
  --red-800:              var(--color-error-dark);
  --red-900:              var(--color-error-dark);

  /* ── Old "navy / dark" → Safety Navy Deep tones ─────────── */
  --primary-dark:         var(--color-navy);
  --secondary-dark:       var(--color-navy-soft);
  --charcoal:             var(--color-navy);

  /* ── Old neutral names ────────────────────────────────────── */
  --white:                #ffffff;
  --off-white:            #F6F7F9;
  --light-gray:           var(--color-gray-50);
  --lighter-gray:         var(--color-gray-100);
  --medium-gray:          var(--color-gray-200);
  --border-gray:          var(--color-gray-300);
  --divider-gray:         var(--color-gray-400);
  --text-gray:            var(--color-gray-600);
  --dark-gray:            var(--color-gray-700);
  --charcoal-gray:        var(--color-gray-800);
  --almost-black:         var(--color-gray-900);
  --light-bg:             var(--bg-secondary);
  --dark-text-muted:      var(--color-gray-600);

  /* ── Old background names ─────────────────────────────────── */
  --bg-orange:            var(--color-gold);
  --bg-teal:              var(--color-navy-soft);
  --bg-red:               var(--color-error);
  --bg-orange-light:      var(--color-gold-bg);
  --bg-teal-light:        rgba(47, 127, 134, 0.08);
  --bg-red-light:         var(--color-error-light);
  --bg-overlay-orange:    rgba(15, 59, 140, 0.92);
  --bg-overlay-teal:      rgba(var(--color-navy-rgb), 0.92);
  --bg-overlay-red:       rgba(179, 54, 74, 0.92);
  --bg-ocean-light:       rgba(var(--color-navy-rgb), 0.06);
  --bg-emerald-light:     var(--color-green-bg);
  --bg-golden-light:      var(--color-gold-bg);

  /* ── Old text color names ─────────────────────────────────── */
  --text-orange:          var(--color-gold);
  --text-teal:            var(--color-navy-soft);
  --text-red:             var(--color-error);
  --text-dark:            var(--color-navy);

  /* ── Old gradient names ───────────────────────────────────── */
  --gradient-orange:      var(--gradient-gold);
  --gradient-teal:        var(--gradient-primary);
  --gradient-red:         var(--color-error);
  /* NOT gold: company-gallery.css's .cta-card pairs this with white
     h2/p text on top, so it must stay dark to stay readable. */
  --gradient-luxury:      var(--color-navy-mid);
  --gradient-emerald:     var(--gradient-green);
  --gradient-golden:      var(--gradient-gold);

  /* ── Ocean-theme name aliases → Safety Navy equivalents ───── */
  --primary-ocean-blue:            var(--color-navy);
  --primary-ocean-blue-light:      var(--color-navy-light);
  --primary-ocean-blue-dark:       var(--color-navy-mid);
  --primary-ocean-blue-darker:     var(--color-navy-deep);
  --primary-ocean-blue-rgb:        var(--color-navy-rgb);
  --primary-emerald:               var(--color-green);
  --primary-emerald-light:         var(--color-green-light);
  --primary-emerald-dark:          var(--color-green-dark);
  --primary-emerald-rgb:           var(--color-green-rgb);
  --accent-golden:                 var(--color-gold);
  --accent-golden-light:           var(--color-gold-light);
  --accent-golden-dark:            var(--color-gold-dark);
  --accent-golden-darker:          var(--color-gold-darker);
  --accent-golden-rgb:             var(--color-gold-rgb);

  /* Gradient aliases */
  --gradient-ocean:       var(--gradient-primary);
  --gradient-depth:       linear-gradient(180deg, #ECEFF3 0%, #DFE4EA 100%);

  /* Shadow aliases */
  --shadow-ocean:         var(--shadow-navy);
  --shadow-emerald:       var(--shadow-green);
  --shadow-golden:        var(--shadow-gold);
  --shadow-orange:        var(--shadow-gold);
  --shadow-teal:          var(--shadow-navy);
  --shadow-red:           0 4px 20px rgba(179, 54, 74, 0.25);
  --shadow-medium:        var(--shadow-md);
  --shadow-large:         var(--shadow-lg);
  --shadow-brand:         var(--shadow-luxury);

  /* Glow aliases */
  --glow-ocean:           var(--glow-navy);
  --glow-emerald:         var(--glow-green);
  --glow-golden:          var(--glow-gold);
  --glow-orange:          var(--glow-gold);
  --glow-teal:            var(--glow-navy);
  --glow-primary:         var(--glow-premium);

  /* Glass aliases — light frosted glass for white theme */
  --glass-ocean:          rgba(246, 247, 249, 0.70);
  --glass-royal:          rgba(var(--color-royal-rgb), 0.10);
  --glass-emerald:        rgba(47, 127, 134, 0.08);
  --glass-golden:         rgba(15, 59, 140, 0.08);

  /* Old typography name aliases */
  --font-heading:         var(--font-display);
  --font-body:            var(--font-primary);
  --font-serif:           var(--font-display);
  --font-sans:            var(--font-primary);
  --font-luxury:          var(--font-elegant);

  /* Status color aliases */
  --status-success:       var(--color-success);
  --status-success-light: var(--color-success-light);
  --status-success-dark:  var(--color-success-dark);
  --status-success-rgb:   var(--color-success-rgb);
  --status-warning:       var(--color-warning);
  --status-warning-light: var(--color-warning-light);
  --status-warning-rgb:   var(--color-warning-rgb);
  --status-error:         var(--color-error);
  --status-error-light:   var(--color-error-light);
  --status-error-dark:    var(--color-error-dark);
  --status-error-rgb:     var(--color-error-rgb);
  --status-info:          var(--color-info);
  --status-info-light:    var(--color-info-light);
  --status-info-rgb:      var(--color-info-rgb);

  /* Legacy booking.css variables */
  --success-color:        var(--color-success);
  --success-light:        var(--color-success-light);
  --error-color:          var(--color-error);
  --error-light:          var(--color-error-light);
  --warning-color:        var(--color-warning);
  --warning-light:        var(--color-warning-light);
  --info-color:           var(--color-info);
  --info-light:           var(--color-info-light);
  --error-background:     var(--color-error-light);

  /* Old elegant-gray names */
  --elegant-gray-50:      var(--color-gray-50);
  --elegant-gray-100:     var(--color-gray-100);
  --elegant-gray-200:     var(--color-gray-200);
  --elegant-gray-300:     var(--color-gray-300);
  --elegant-gray-400:     var(--color-gray-400);
  --elegant-gray-500:     var(--color-gray-500);
  --elegant-gray-600:     var(--color-gray-600);
  --elegant-gray-700:     var(--color-gray-700);
  --elegant-gray-800:     var(--color-gray-800);
  --elegant-gray-900:     var(--color-gray-900);

  /* Old primary / theme naming */
  --primary-white:        #ffffff;
  --white-color:          #ffffff;
  --dark-color:           var(--color-navy);
  --primary-color:        var(--color-navy);
  --primary-color-rgb:    var(--color-navy-rgb);
  --primary-accent:       var(--color-gold);
  --primary-accent-rgb:   var(--color-gold-rgb);
  --primary-blue:         var(--color-navy);
  --primary-blue-light:   var(--color-navy-light);
  --primary-blue-dark:    var(--color-navy-mid);
  --primary-blue-rgb:     var(--color-navy-rgb);
  --secondary-blue:       var(--color-navy-soft);
  --primary-gold:         var(--color-gold);
  --primary-gold-light:   var(--color-gold-light);
  --primary-gold-dark:    var(--color-gold-dark);
  --primary-gold-rgb:     var(--color-gold-rgb);

  /* Misc old names — repointed from ivory to jet-black equivalents */
  --subtle-texture:       var(--color-navy-card);
  --sophisticated-ivory:  var(--color-navy-mid);
  --elegant-pearl:        var(--bg-primary);
  --luxury-cream:         var(--color-navy-card);
  --luxury-coral:         var(--color-error);
  --premium-charcoal:     var(--color-gray-700);
  --premium-charcoal-light: var(--color-gray-600);
  --premium-charcoal-dark:  var(--color-gray-800);
  --bg-texture-subtle:    var(--bg-primary);

  /* Border aliases */
  --border-color:         var(--border-primary);
  --muted-text:           var(--text-muted);
  --card-background:      var(--bg-primary);

  /* Border radius aliases (--border-radius-* used across child files) */
  --border-radius:        var(--radius-md);
  --border-radius-:       var(--radius-md);
  --border-radius-sm:     var(--radius-sm);
  --border-radius-md:     var(--radius-md);
  --border-radius-lg:     var(--radius-lg);
  --border-radius-xl:     var(--radius-xl);
  --border-radius-2xl:    var(--radius-2xl);
  --border-radius-full:   var(--radius-full);

  /* Font-weight short aliases */
  --fw-light:             var(--font-weight-light);
  --fw-regular:           var(--font-weight-normal);
  --fw-medium:            var(--font-weight-medium);
  --fw-semibold:          var(--font-weight-semibold);
  --fw-bold:              var(--font-weight-bold);

  /* Old font-size short aliases */
  --fs-xs:    var(--text-xs);
  --fs-sm:    var(--text-sm);
  --fs-base:  var(--text-base);
  --fs-md:    var(--text-md);
  --fs-lg:    var(--text-lg);
  --fs-xl:    var(--text-xl);
  --fs-2xl:   var(--text-2xl);
  --fs-3xl:   var(--text-3xl);
  --fs-4xl:   var(--text-4xl);
  --fs-5xl:   var(--text-5xl);
  --fs-6xl:   var(--text-6xl);

  /* Line-height short aliases */
  --lh-tight:    var(--leading-tight);
  --lh-snug:     var(--leading-snug);
  --lh-normal:   var(--leading-normal);
  --lh-relaxed:  var(--leading-relaxed);
  --lh-loose:    var(--leading-loose);

  /* Letter-spacing short aliases */
  --ls-tight:    -0.015em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;
  --ls-widest:   0.18em;

  /* Background texture aliases */
  --bg-texture-ocean: var(--bg-primary);
  --bg-texture-waves: var(--bg-primary);

  /* Text color extras */
  --text-tertiary:        var(--color-gray-600);
  /* Used for text placed over dark photo/hero overlays, not on the white page background */
  --light-text-primary:   rgba(255, 255, 255, 0.85);

  /* Mobile responsive tokens */
  --mobile-text-xs:       0.7rem;
  --mobile-text-sm:       0.8rem;
  --mobile-text-base:     0.875rem;
  --mobile-text-lg:       1rem;
  --mobile-text-xl:       1.125rem;
  --mobile-text-2xl:      1.25rem;
  --mobile-spacing-xs:    var(--spacing-2);
  --mobile-spacing-sm:    var(--spacing-3);
  --mobile-spacing-md:    var(--spacing-4);
  --mobile-spacing-lg:    var(--spacing-6);
  --mobile-spacing-xl:    var(--spacing-8);

  /* Touch / accessibility tokens */
  --touch-target-min:     44px;

  /* Transition aliases */
  --transition-smooth:    all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-premium:   all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-elegant:   all 350ms cubic-bezier(0.165, 0.84, 0.44, 1);

  /* Misc */
  --secondary-purple:     #0F3B8C;
  --slide-interval:       5000ms;

  /* Font accent alias — labels and eyebrows use Manrope uppercase */
  --font-accent:          var(--font-primary);
  --font-label:           var(--font-wordmark);

  /* Border radius base alias */
  --radius-base:          var(--radius-md);

  /* Short space aliases (--space-* used in some child files) */
  --space-1:              var(--spacing-1);
  --space-2:              var(--spacing-2);
  --space-3:              var(--spacing-3);
  --space-4:              var(--spacing-4);
  --space-5:              var(--spacing-5);
  --space-6:              var(--spacing-6);
  --space-8:              var(--spacing-8);
  --space-10:             var(--spacing-10);
  --space-12:             var(--spacing-12);
  --space-16:             var(--spacing-16);
  --space-20:             var(--spacing-20);
  --space-24:             var(--spacing-24);

  /* Text shadow aliases — for light text placed over photo/hero overlays */
  --text-shadow-soft:     0 1px 4px rgba(0, 0, 0, 0.35);
  --text-shadow-medium:   0 2px 8px rgba(0, 0, 0, 0.45);
  --text-shadow-strong:   0 4px 16px rgba(0, 0, 0, 0.55);

  /* Short z-index aliases */
  --z-below:              -1;
  --z-base:               0;
  --z-raised:             10;
  --z-dropdown:           100;
  --z-sticky:             200;
  --z-fixed:              300;
  --z-modal:              500;
  --z-toast:              600;
}

/* ============================================================
   4. CSS RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  letter-spacing: -0.01em;
}

img, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-gold);
  text-decoration: none;
  transition: color var(--transition-base);
  position: relative;
}

a:hover {
  color: var(--color-gold-light);
  text-decoration: none;
}

ul, ol { list-style: none; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* ============================================================
   5. TYPOGRAPHY SYSTEM
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  margin-bottom: var(--spacing-4);
}

h1, .h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-6xl)); }
h2, .h2 { font-size: clamp(var(--text-2xl), 4vw, var(--text-5xl)); margin-bottom: var(--spacing-5); }
h3, .h3 { font-size: clamp(var(--text-xl), 3vw, var(--text-4xl)); }
h4, .h4 { font-size: clamp(var(--text-lg), 2.5vw, var(--text-3xl)); }
h5, .h5 { font-size: var(--text-xl); }
h6, .h6 { font-size: var(--text-lg); }

p {
  margin-bottom: var(--spacing-4);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  font-family: var(--font-primary);
  font-weight: var(--font-weight-normal);
  letter-spacing: 0;
  text-transform: none;
}
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  margin-bottom: var(--spacing-6);
  line-height: var(--leading-relaxed);
  text-transform: none;
  letter-spacing: 0;
}

/* Links */
.link-brand {
  color: var(--color-royal-light);
  font-weight: var(--font-weight-medium);
  position: relative;
}
.link-brand::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-gold);
  transition: width var(--transition-elegant);
}
.link-brand:hover::after { width: 100%; }

.link-gold { color: var(--color-gold); font-weight: var(--font-weight-semibold); }
.link-gold:hover { color: var(--color-gold-light); text-shadow: 0 0 8px var(--color-gold-glow); }

/* Ocean / golden compatibility aliases */
.link-ocean  { color: var(--color-royal-light); font-weight: var(--font-weight-medium); }
.link-ocean:hover { color: var(--color-gold); }
.link-golden { color: var(--color-gold); font-weight: var(--font-weight-semibold); }
.link-golden:hover { color: var(--color-gold-light); }

/* ============================================================
   6. SECTION HEADERS
   ============================================================ */
.section-header {
  text-align: center;
  margin-bottom: var(--spacing-12);
}

.section-label,
.section-subtitle-above {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  /* v7.1: sunset gold #F2B33D reads at about 11:1 on night black; no darker
     variant needed now that the whole theme is dark by design. */
  color: var(--color-champagne-text);
  margin-bottom: var(--spacing-3);
  position: relative;
  padding: 0 var(--spacing-6);
}
.section-label::before,
.section-label::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold));
}
.section-label::before { right: 100%; transform: translateX(var(--spacing-6)); }
.section-label::after  { left: 100%; transform: translateX(calc(-1 * var(--spacing-6))); background: linear-gradient(90deg, var(--color-gold), transparent); }

/* On dark-accent sections, revert the label to full-brightness gold —
   contrast against Deep Navy is already excellent (6.6:1+) there. */
.section-dark .section-label, .section-dark .section-subtitle-above,
.section-navy .section-label, .section-navy .section-subtitle-above,
.section-light .section-label, .section-light .section-subtitle-above,
.card-dark .section-label, .card-dark .section-subtitle-above {
  color: var(--color-gold);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-5xl));
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  margin-bottom: var(--spacing-4);
  letter-spacing: -0.01em;
}
.section-title span,
.section-title em {
  /* v7.1: sunset gold on night black, no light-theme workaround needed. */
  color: var(--color-gold);
  font-style: normal;
}
.section-dark .section-title span, .section-dark .section-title em,
.section-navy .section-title span, .section-navy .section-title em,
.section-light .section-title span, .section-light .section-title em,
.card-dark .section-title span, .card-dark .section-title em {
  color: var(--color-gold);
}
.section-title.text-gradient {
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-subtitle {
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: 620px;
  margin: 0 auto;
  line-height: var(--leading-relaxed);
  font-family: var(--font-primary);
  text-transform: none;
  letter-spacing: 0;
}

.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  margin: var(--spacing-5) auto;
}
.section-divider span {
  display: block;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold));
}
.section-divider span:last-child { background: linear-gradient(90deg, var(--color-gold), transparent); }
.section-divider i { color: var(--color-gold); font-size: var(--text-sm); }

/* Section spacing classes */
.section    { padding: var(--spacing-20) 0; }
.section-sm { padding: var(--spacing-12) 0; }
.section-lg { padding: var(--spacing-24) 0; }
.section-hero         { padding: var(--spacing-32) 0 var(--spacing-24); }
.section-destinations { padding: var(--spacing-20) 0; }
.section-tours        { padding: var(--spacing-24) 0; }
.section-testimonials { padding: var(--spacing-20) 0; }
.section-contact      { padding: var(--spacing-16) 0; }
.section-ocean        { padding: var(--spacing-24) 0; background: var(--bg-texture-subtle); }
.section-emerald      { padding: var(--spacing-20) 0; background: var(--color-green-bg); }
.section-golden       { padding: var(--spacing-16) 0; background: var(--color-gold-bg); }

/* Dark / obsidian section variants */
.section-dark  { background: var(--color-navy-deep);  color: var(--text-primary); }
.section-navy  { background: var(--color-navy-abyss); color: var(--text-primary); }
.section-light { background: var(--color-navy-mid); }

/* ============================================================
   7. BUTTON SYSTEM
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3-5) var(--spacing-8);
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: 0.06em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;
  min-height: 48px;
  transition: var(--transition-elegant);
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.btn:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Primary — sunset gold gradient pill with a warm glow, dark text */
.btn-primary,
.btn-gold,
.btn-cta,
.btn-golden {
  background: var(--gradient-gold);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  color: var(--color-navy-deep);
  box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  font-weight: var(--font-weight-bold);
}
.btn-primary:hover,
.btn-gold:hover,
.btn-cta:hover,
.btn-golden:hover {
  background: var(--gradient-gold-hover);
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: var(--glow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: var(--color-navy-deep);
}
.btn-primary:active,
.btn-gold:active { transform: translateY(0); }

/* Secondary — Plantation Forest Green */
.btn-secondary,
.btn-navy,
.btn-ocean,
.btn-blue {
  background: var(--gradient-primary);
  border: none;
  color: var(--text-primary);
  box-shadow: var(--shadow-navy);
}
.btn-secondary:hover,
.btn-navy:hover,
.btn-ocean:hover,
.btn-blue:hover {
  background: var(--color-navy-light);
  transform: translateY(-2px);
  box-shadow: var(--glow-navy);
  color: var(--text-primary);
}

/* Royal Blue button — secondary accent from the new brand mark's vivid "W" gradient */
.btn-royal {
  background: var(--gradient-royal);
  border: none;
  color: var(--color-white);
  box-shadow: var(--shadow-royal);
}
.btn-royal:hover {
  background: var(--gradient-royal-hover);
  transform: translateY(-2px);
  box-shadow: var(--glow-royal);
  color: var(--color-white);
}

/* Leaf Sage / eco button */
.btn-emerald,
.btn-green,
.btn-teal {
  background: var(--gradient-green);
  border: none;
  color: var(--color-white);
  box-shadow: var(--shadow-green);
}
.btn-emerald:hover,
.btn-green:hover,
.btn-teal:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-green);
  color: var(--color-white);
}

/* Outline variants */
.btn-outline-primary,
.btn-outline-gold {
  background: transparent;
  border: 2px solid var(--color-gold);
  color: var(--color-gold-dark);
}
.btn-outline-primary:hover,
.btn-outline-gold:hover {
  background: var(--gradient-gold);
  border-color: var(--color-gold);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

.btn-outline-navy,
.btn-outline-ocean,
.btn-outline-primary-navy {
  background: transparent;
  border: 2px solid var(--color-white-30);
  color: var(--text-secondary);
}
.btn-outline-navy:hover,
.btn-outline-ocean:hover {
  background: var(--color-navy-light);
  border-color: var(--color-navy-light);
  color: var(--text-primary);
  transform: translateY(-2px);
}

.btn-outline-emerald,
.btn-outline-green {
  background: transparent;
  border: 2px solid var(--color-green);
  color: var(--color-green);
}
.btn-outline-emerald:hover,
.btn-outline-green:hover {
  background: var(--gradient-green);
  border-color: var(--color-green);
  color: var(--color-white);
  transform: translateY(-2px);
}

.btn-outline-royal {
  background: transparent;
  border: 2px solid var(--color-royal);
  color: var(--color-royal);
}
.btn-outline-royal:hover {
  background: var(--gradient-royal);
  border-color: var(--color-royal);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-royal);
}

/* White / Ghost button — dark theme version */
.btn-white {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  border: 1px solid var(--color-white-18);
}
.btn-white:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: var(--text-primary);
}

.btn-glass {
  background: var(--gradient-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-white-20);
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}
.btn-glass:hover {
  background: rgba(255,255,255,0.22);
  transform: translateY(-2px);
  box-shadow: var(--shadow-premium);
  color: var(--text-primary);
}

/* Premium shimmer button */
.btn-premium {
  background: var(--gradient-premium);
  border: none;
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
}
.btn-premium::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: left 0.6s ease;
}
.btn-premium:hover::before { left: 100%; }
.btn-premium:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: var(--glow-premium);
  color: var(--color-white);
}

/* Ripple effect */
.btn-ripple { position: relative; overflow: hidden; }
.btn-ripple::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s;
}
.btn-ripple:active::after { width: 300px; height: 300px; }

/* Button sizes */
.btn-sm  { padding: var(--spacing-2-5) var(--spacing-6); font-size: var(--text-sm); border-radius: var(--radius-lg); min-height: 36px; }
.btn-lg  { padding: var(--spacing-4) var(--spacing-10); font-size: var(--text-lg); border-radius: var(--radius-2xl); min-height: 54px; }
.btn-xl  { padding: var(--spacing-5) var(--spacing-12); font-size: var(--text-xl); border-radius: var(--radius-2xl); min-height: 64px; }

/* ============================================================
   8. CONTAINER & LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--spacing-6);
}
.container-wide    { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--spacing-8); }
.container-ocean   { max-width: 1400px; margin: 0 auto; padding: 0 var(--spacing-6); }
.container-premium { max-width: 1600px; margin: 0 auto; padding: 0 var(--spacing-8); }
.container-content { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-5); }

.grid  { display: grid; }
.flex  { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-gap-2 { gap: var(--spacing-2); }
.flex-gap-3 { gap: var(--spacing-3); }
.flex-gap-4 { gap: var(--spacing-4); }

/* ============================================================
   9. CARD SYSTEM
   ============================================================ */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background: var(--gradient-card);
  background-clip: border-box;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-premium);
  overflow: hidden;
  will-change: transform;
}
.card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--shadow-premium);
  border-color: var(--border-gold);
}
.card-header {
  padding: var(--spacing-6);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-primary);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  margin-bottom: 0;
}
.card-body  { flex: 1 1 auto; padding: var(--spacing-6); }
.card-footer {
  padding: var(--spacing-6);
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-primary);
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
}
.card-title {
  margin-bottom: var(--spacing-3);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.card-text { color: var(--text-secondary); line-height: var(--leading-relaxed); }

/* Card variants */
.card-premium {
  background: var(--gradient-card);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-slow);
}
.card-premium:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(var(--color-gold-rgb), 0.5);
}

.card-dark {
  background: var(--color-navy-light);
  border: 1px solid var(--color-navy-border);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  transition: var(--transition-slow);
}
.card-dark:hover { border-color: var(--color-gold); box-shadow: var(--shadow-gold); }
.card-dark .card-title { color: var(--text-primary); }
.card-dark .card-text  { color: var(--text-secondary); }

/* Ocean/Navy card (alias) */
.card-ocean,
.card-navy {
  background: var(--gradient-primary);
  border: 2px solid var(--color-navy);
  color: var(--text-primary);
  box-shadow: var(--shadow-navy);
}
.card-ocean .card-title, .card-navy .card-title { color: var(--text-primary); }
.card-ocean .card-text,  .card-navy .card-text  { color: var(--text-primary); }
.card-ocean:hover, .card-navy:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: var(--glow-navy);
}

.card-golden {
  background: var(--gradient-gold);
  border: 2px solid var(--color-gold);
  color: var(--color-white);
  box-shadow: var(--shadow-gold);
}
.card-golden .card-title { color: var(--color-white); }
.card-golden .card-text  { color: rgba(255,255,255,0.9); }
.card-golden:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: var(--glow-gold);
}

.card-royal {
  background: var(--gradient-royal);
  border: 2px solid var(--color-royal);
  color: var(--color-white);
  box-shadow: var(--shadow-royal);
}
.card-royal .card-title { color: var(--color-white); }
.card-royal .card-text  { color: rgba(255,255,255,0.9); }
.card-royal:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: var(--glow-royal);
}

.card-emerald {
  background: var(--gradient-green);
  border: 2px solid var(--color-green);
  color: var(--text-white);
  box-shadow: var(--shadow-green);
}
.card-emerald .card-title { color: var(--color-white); }
.card-emerald .card-text  { color: rgba(255,255,255,0.9); }
.card-emerald:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: var(--glow-green);
}

.card-glass {
  background: var(--gradient-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-white-20);
  box-shadow: var(--shadow-lg);
}
.card-glass:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-2xl);
}

/* ============================================================
   10. BADGE SYSTEM
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.badge-gold,
.badge-golden {
  background: var(--color-gold-glow);
  color: var(--color-gold-dark);
  border: 1px solid rgba(var(--color-gold-rgb), 0.35);
}
.badge-navy,
.badge-ocean {
  background: var(--color-navy);
  color: var(--text-primary);
}
.badge-royal {
  background: var(--color-royal-glow);
  color: var(--color-royal-dark);
  border: 1px solid rgba(var(--color-royal-rgb), 0.35);
}
.badge-green,
.badge-emerald {
  background: var(--color-green-bg);
  color: var(--color-green);
  border: 1px solid rgba(var(--color-green-rgb), 0.35);
}
.badge-glass {
  background: var(--gradient-glass);
  backdrop-filter: blur(8px);
  color: var(--text-primary);
  border: 1px solid var(--color-white-20);
}

/* ============================================================
   11. FORM ELEMENTS
   ============================================================ */
.form-control {
  display: block;
  width: 100%;
  padding: var(--spacing-4);
  font-size: var(--text-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  border: 2px solid var(--border-primary);
  border-radius: var(--radius-xl);
  transition: var(--transition-elegant);
}
.form-control:focus {
  color: var(--text-primary);
  background-color: var(--bg-primary);
  border-color: var(--color-gold);
  outline: 0;
  box-shadow: 0 0 0 0.25rem var(--color-gold-glow-sm);
}
.form-control::placeholder { color: var(--text-lighter); opacity: 1; }
.form-control:disabled { background-color: var(--bg-secondary); opacity: 0.6; }

.form-label {
  display: block;
  margin-bottom: var(--spacing-2);
  font-family: var(--font-primary);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
.form-label.required::after { content: '*'; color: var(--color-error); margin-left: 4px; }

.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23d9b54a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px 12px;
  padding-right: 40px;
}

/* ============================================================
   12. ALERT SYSTEM
   ============================================================ */
.alert {
  position: relative;
  padding: var(--spacing-4) var(--spacing-6);
  margin-bottom: var(--spacing-4);
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  border-left: 4px solid;
}
.alert-success {
  color: var(--color-success);
  background: rgba(var(--color-success-rgb), 0.10);
  border-color: rgba(var(--color-success-rgb), 0.20);
  border-left-color: var(--color-success);
}
.alert-warning {
  color: var(--color-gold);
  background: rgba(var(--color-gold-rgb), 0.10);
  border-color: rgba(var(--color-gold-rgb), 0.20);
  border-left-color: var(--color-gold);
}
.alert-danger,
.alert-error {
  color: var(--color-error-text);
  background: rgba(var(--color-error-rgb), 0.10);
  border-color: rgba(var(--color-error-rgb), 0.20);
  border-left-color: var(--color-error);
}
.alert-info {
  color: var(--color-info);
  background: rgba(var(--color-info-rgb), 0.10);
  border-color: rgba(var(--color-info-rgb), 0.20);
  border-left-color: var(--color-info);
}

/* ============================================================
   13. DECORATIVE ELEMENTS
   ============================================================ */
/* Ceylon Amber line separator */
.gold-line { width: 60px; height: 2px; background: var(--color-gold); border-radius: var(--radius-full); }
.gold-line-center { margin: 0 auto; }

.gold-diamond {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  color: var(--color-gold);
}
.gold-diamond::before, .gold-diamond::after { content: '◆'; font-size: 6px; opacity: 0.6; }

/* Dividers */
.divider-ocean,
.divider-brand {
  height: 2px;
  background: var(--gradient-primary);
  margin: var(--spacing-8) 0;
  border: none;
  border-radius: var(--radius-full);
  position: relative;
}
.divider-ocean::before, .divider-brand::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 6px;
  background: var(--gradient-gold);
  border-radius: var(--radius-full);
}
.divider-waves {
  height: 4px;
  background: var(--gradient-premium);
  margin: var(--spacing-6) 0;
  border: none;
  border-radius: var(--radius-full);
  animation: waveMotion 6s ease-in-out infinite;
}

/* Gold text (flat — no shimmer/foil animation) */
.text-shimmer {
  color: var(--color-gold);
}

/* ============================================================
   14. NAVIGATION
   ============================================================ */
.navbar-ocean {
  background: var(--gradient-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-white-10);
  transition: var(--transition-elegant);
}

/* ============================================================
   15. HERO SECTIONS
   ============================================================ */
.hero-ocean {
  background: var(--gradient-hero);
  color: var(--text-primary);
  padding: var(--spacing-32) 0;
  position: relative;
  overflow: hidden;
}
.hero-ocean::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.015'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ============================================================
   16. FOOTER
   ============================================================ */
.footer-ocean {
  background: var(--gradient-depth);
  color: var(--text-primary);
  padding: var(--spacing-16) 0 var(--spacing-8);
  position: relative;
}
.footer-ocean::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--gradient-gold);
}

/* ============================================================
   17. PREMIUM COMPONENTS
   ============================================================ */

/* Progress bars */
.progress-modern {
  height: var(--spacing-3);
  background: var(--color-gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
  box-shadow: var(--shadow-inner);
}
.progress-bar-ocean,
.progress-bar-brand {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  transition: width var(--transition-smooth);
  position: relative;
  overflow: hidden;
}
.progress-bar-gold  { background: var(--gradient-gold); }
.progress-bar-green { background: var(--gradient-green); }
.progress-bar-ocean::before {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: shimmer 2s infinite;
}

/* Tooltips */
.tooltip-ocean { position: relative; cursor: help; }
.tooltip-ocean::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%; left: 50%;
  transform: translateX(-50%);
  background: var(--color-navy-deep);
  color: var(--text-white);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  white-space: nowrap;
  opacity: 0; visibility: hidden;
  transition: var(--transition-elegant);
  z-index: var(--z-index-tooltip);
  box-shadow: var(--shadow-lg);
}
.tooltip-ocean::after {
  content: '';
  position: absolute;
  bottom: 100%; left: 50%;
  transform: translateX(-50%) translateY(1px);
  border: 4px solid transparent;
  border-top-color: var(--color-navy-deep);
  opacity: 0; visibility: hidden;
  transition: var(--transition-elegant);
}
.tooltip-ocean:hover::before,
.tooltip-ocean:hover::after {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(-8px);
}

/* Modals */
.modal-ocean .modal-content {
  border: none;
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-2xl);
  background: var(--gradient-card);
  border: 1px solid var(--border-primary);
  overflow: hidden;
}
.modal-ocean .modal-header {
  background: var(--gradient-primary);
  color: var(--text-primary);
  border-bottom: none;
  padding: var(--spacing-6);
}
.modal-ocean .modal-title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-2xl);
}
.modal-ocean .modal-body { padding: var(--spacing-8); }
.modal-ocean .modal-footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-primary);
  padding: var(--spacing-6);
}

/* Badge variants (premium section) */
.badge-ocean { background: var(--gradient-primary); color: var(--text-primary); }
.badge-gold, .badge-golden { background: var(--gradient-gold); color: var(--color-white); }
.badge-royal { background: var(--gradient-royal); color: var(--color-white); }
.badge-emerald { background: var(--gradient-green); color: var(--text-white); }
.badge-glass {
  background: var(--gradient-glass);
  backdrop-filter: blur(8px);
  color: var(--text-primary);
  border: 1px solid var(--color-white-20);
}

/* ============================================================
   18. TOURISM-SPECIFIC COMPONENTS
   ============================================================ */

/* Destination Cards */
.destination-card {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--gradient-card);
  box-shadow: var(--shadow-lg);
  transition: var(--transition-premium);
  border: 1px solid var(--border-light);
}
.destination-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: var(--glow-premium);
  border-color: var(--border-gold);
}
.destination-card .card-image { position: relative; overflow: hidden; height: 250px; }
.destination-card .card-image img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-smooth); }
.destination-card:hover .card-image img { transform: scale(1.1); }
.destination-card .card-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--gradient-overlay);
  opacity: 0; transition: var(--transition-elegant);
  display: flex; align-items: center; justify-content: center;
}
.destination-card:hover .card-overlay { opacity: 1; }
.destination-card .price-badge {
  position: absolute; top: var(--spacing-4); right: var(--spacing-4);
  background: var(--gradient-gold);
  color: var(--color-white);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-md);
}

/* Tour Package Cards */
.tour-package {
  background: var(--gradient-card);
  border-radius: var(--radius-3xl);
  padding: var(--spacing-8);
  box-shadow: var(--shadow-premium);
  transition: var(--transition-premium);
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}
.tour-package::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--gradient-gold);
}
.tour-package:hover {
  transform: translateY(-6px);
  box-shadow: var(--glow-premium);
  border-color: var(--border-gold);
}
.tour-package.featured { border-color: var(--color-gold); box-shadow: var(--shadow-gold); }
.tour-package.featured::before { background: var(--gradient-gold); }

/* Testimonial Cards */
.testimonial-card {
  background: var(--gradient-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-8);
  text-align: center;
  position: relative;
  border: 1px solid var(--color-white-20);
  transition: var(--transition-elegant);
}
.testimonial-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2xl); }
.testimonial-card .quote-icon { font-size: var(--text-4xl); color: var(--color-gold); margin-bottom: var(--spacing-4); }
.testimonial-card .avatar {
  width: 80px; height: 80px;
  border-radius: var(--radius-full);
  border: 3px solid var(--color-gold);
  margin: var(--spacing-6) auto var(--spacing-4);
  box-shadow: var(--shadow-gold);
}

/* Gallery Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-6);
  padding: var(--spacing-8) 0;
}
.gallery-item {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--bg-primary);
  box-shadow: var(--shadow-md);
  transition: var(--transition-premium);
  aspect-ratio: 4/3;
}
.gallery-item:hover { transform: scale(1.03); box-shadow: var(--glow-navy); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-smooth); }
.gallery-item:hover img { transform: scale(1.1); }
.gallery-item .overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--gradient-overlay);
  opacity: 0; transition: var(--transition-elegant);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-white);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
}
.gallery-item:hover .overlay { opacity: 1; }

/* Booking Form */
.booking-form {
  background: var(--gradient-card);
  border-radius: var(--radius-3xl);
  padding: var(--spacing-10);
  box-shadow: var(--shadow-2xl);
  border: 2px solid var(--border-gold);
}
.booking-form .form-section { margin-bottom: var(--spacing-8); }
.booking-form .form-section:last-child { margin-bottom: 0; }
.booking-form .section-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gold-dark);
  margin-bottom: var(--spacing-4);
  position: relative;
}
.booking-form .section-title::after {
  content: '';
  position: absolute;
  bottom: -8px; left: 0;
  width: 50px; height: 3px;
  background: var(--gradient-gold);
  border-radius: var(--radius-full);
}

/* Statistics */
.stats-section {
  background: var(--gradient-hero);
  color: var(--text-primary);
  padding: var(--spacing-16) 0;
  position: relative;
}
.stat-item { text-align: center; padding: var(--spacing-6); }
.stat-number {
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gold);
  display: block;
  margin-bottom: var(--spacing-2);
  font-family: var(--font-display);
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.stat-label {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.9;
}

/* Feature Highlights */
.feature-highlight {
  display: flex;
  align-items: center;
  padding: var(--spacing-6);
  background: var(--gradient-card);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  transition: var(--transition-elegant);
  border-left: 4px solid var(--color-gold);
  margin-bottom: var(--spacing-4);
}
.feature-highlight:hover { transform: translateX(8px); box-shadow: var(--shadow-lg); }
.feature-highlight .icon {
  width: 60px; height: 60px;
  background: var(--gradient-primary);
  border-radius: var(--radius-xl);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-primary);
  font-size: var(--text-2xl);
  margin-right: var(--spacing-6);
  box-shadow: var(--shadow-navy);
}
.feature-highlight .content h3 { color: var(--color-gold-dark); font-size: var(--text-xl); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-2); }
.feature-highlight .content p  { color: var(--text-secondary); margin: 0; line-height: var(--leading-relaxed); }

/* ============================================================
   19. UTILITY: TEXT
   ============================================================ */
.text-primary   { color: var(--text-primary)   !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted     { color: var(--text-muted)     !important; }
.text-white     { color: var(--text-white)     !important; }
.text-dark      { color: var(--color-navy)     !important; }
.text-navy      { color: var(--color-navy)     !important; }
.text-gold      { color: var(--color-gold)     !important; }
.text-royal     { color: var(--color-royal)    !important; }
.text-green     { color: var(--color-green)    !important; }

/* Legacy text aliases */
.text-ocean     { color: var(--color-navy)       !important; }
.text-emerald   { color: var(--color-green)      !important; }
.text-golden    { color: var(--color-gold-dark)  !important; }
.text-orange    { color: var(--color-gold)        !important; }
.text-teal      { color: var(--color-navy-soft)  !important; }
.text-blue      { color: var(--color-navy)       !important; }
.text-red       { color: var(--color-error)      !important; }
.text-success   { color: var(--color-success)    !important; }
.text-warning   { color: var(--color-warning)    !important; }
.text-danger    { color: var(--color-error)      !important; }
.text-info      { color: var(--color-info)       !important; }
.text-serif     { font-family: var(--font-display) !important; }
.text-elegant   { font-family: var(--font-elegant) !important; }

/* Gradient text */
.text-gradient {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: var(--font-weight-bold);
}
.text-ocean-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: var(--font-weight-bold);
}
.text-golden-gradient {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: var(--font-weight-bold);
}
.text-ocean-glow  { color: var(--color-navy); text-shadow: 0 0 20px rgba(var(--color-navy-rgb), 0.4); }
.text-golden-glow { color: var(--color-gold-pale); text-shadow: none; }

/* Tourism text utilities */
.text-hero {
  font-size: var(--text-6xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-none);
  font-family: var(--font-display);
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-subtitle  { font-size: var(--text-2xl); font-weight: var(--font-weight-light); color: var(--text-secondary); line-height: var(--leading-relaxed); }
.text-price     { font-size: var(--text-3xl); font-weight: var(--font-weight-bold); color: var(--color-gold-dark); }
.text-highlight {
  color: var(--color-gold);
  font-weight: var(--font-weight-semibold);
}
.text-premium-shadow { text-shadow: 2px 2px 8px rgba(var(--color-navy-rgb), 0.3); }

/* ============================================================
   20. UTILITY: BACKGROUND
   ============================================================ */
.bg-primary   { background-color: var(--bg-primary)   !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-tertiary  { background-color: var(--bg-tertiary)  !important; }
.bg-dark      { background-color: var(--color-navy)   !important; }
.bg-navy      { background-color: var(--color-navy)   !important; }
.bg-gold      { background-color: var(--color-gold)   !important; }
.bg-royal     { background-color: var(--color-royal)  !important; }
.bg-green     { background-color: var(--color-green)  !important; }

/* Legacy aliases */
.bg-ocean     { background-color: var(--color-navy)      !important; }
.bg-emerald   { background-color: var(--color-green)     !important; }
.bg-golden    { background-color: var(--color-gold)      !important; }
.bg-blue      { background-color: var(--color-navy)      !important; }
.bg-orange    { background-color: var(--color-gold)      !important; }
.bg-teal      { background-color: var(--color-navy-soft) !important; }
.bg-red       { background-color: var(--color-error)     !important; }

.bg-ocean-light   { background-color: var(--bg-ocean-light)   !important; }
.bg-royal-light   { background-color: var(--color-royal-bg)   !important; }
.bg-emerald-light { background-color: var(--color-green-bg)   !important; }
.bg-golden-light  { background-color: var(--color-gold-bg)    !important; }

/* Gradient backgrounds */
.bg-gradient         { background: var(--gradient-primary)  !important; }
.bg-gradient-navy    { background: var(--gradient-primary)  !important; }
.bg-gradient-ocean   { background: var(--gradient-primary)  !important; }
.bg-gradient-gold    { background: var(--gradient-gold)     !important; }
.bg-gradient-golden  { background: var(--gradient-gold)     !important; }
.bg-gradient-emerald { background: var(--gradient-green)    !important; }
.bg-gradient-premium { background: var(--gradient-premium)  !important; }
.bg-gradient-hero    { background: var(--gradient-hero)     !important; }
.bg-gradient-primary { background: var(--gradient-primary)  !important; }
.bg-gradient-blue    { background: var(--gradient-primary)  !important; }
.bg-gradient-orange  { background: var(--gradient-gold)     !important; }
.bg-gradient-teal    { background: var(--gradient-primary)  !important; }

/* Texture backgrounds */
.bg-texture-subtle {
  background: var(--bg-primary);
}
.bg-ocean-pattern {
  background: var(--bg-primary);
}
.bg-waves-pattern {
  background: var(--bg-primary);
}

/* Glass morphism */
.glass-ocean   { background: var(--glass-ocean);   backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(var(--color-gold-rgb), 0.10);  border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); }
.glass-royal   { background: var(--glass-royal);   backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(var(--color-royal-rgb), 0.16);  border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); }
.glass-emerald { background: var(--glass-emerald); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(var(--color-green-rgb), 0.12);  border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); }
.glass-golden  { background: var(--glass-golden);  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(var(--color-gold-rgb), 0.18);  border-radius: var(--radius-2xl); box-shadow: var(--shadow-gold); }

/* Content containers */
.content-ocean {
  max-width: 900px; margin: 0 auto;
  padding: var(--spacing-10);
  background: var(--gradient-card);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-premium);
  border: 1px solid var(--border-gold);
}
.content-glass {
  background: var(--gradient-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-white-20);
}

/* ============================================================
   21. UTILITY: BORDERS
   ============================================================ */
.border   { border: 1px solid var(--border-primary) !important; }
.border-0 { border: 0 !important; }
.border-2 { border: 2px solid var(--border-primary) !important; }

.border-primary  { border-color: var(--border-primary) !important; }
.border-secondary{ border-color: var(--border-secondary) !important; }
.border-ocean    { border-color: var(--color-navy)  !important; }
.border-royal    { border-color: var(--color-royal) !important; }
.border-emerald  { border-color: var(--color-green) !important; }
.border-golden   { border-color: var(--color-gold)  !important; }
.border-blue     { border-color: var(--color-navy)  !important; }
.border-orange   { border-color: var(--color-gold)  !important; }
.border-teal     { border-color: var(--color-navy-soft) !important; }

.border-modern        { border: 2px solid var(--color-royal) !important; border-radius: var(--radius-xl) !important; }
.border-golden-accent { border: 2px solid var(--color-gold) !important; border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-sm) !important; }

/* ============================================================
   22. UTILITY: SHADOWS
   ============================================================ */
.shadow-none { box-shadow: none !important; }
.shadow-xs   { box-shadow: var(--shadow-xs) !important; }
.shadow-sm   { box-shadow: var(--shadow-sm) !important; }
.shadow-md   { box-shadow: var(--shadow-md) !important; }
.shadow-lg   { box-shadow: var(--shadow-lg) !important; }
.shadow-xl   { box-shadow: var(--shadow-xl) !important; }
.shadow-2xl  { box-shadow: var(--shadow-2xl) !important; }

.shadow-ocean  { box-shadow: var(--shadow-navy)  !important; }
.shadow-royal  { box-shadow: var(--shadow-royal) !important; }
.shadow-emerald{ box-shadow: var(--shadow-green) !important; }
.shadow-golden { box-shadow: var(--shadow-gold)  !important; }
.shadow-blue   { box-shadow: var(--shadow-navy)  !important; }
.shadow-orange { box-shadow: var(--shadow-gold)  !important; }
.shadow-teal   { box-shadow: var(--shadow-navy)  !important; }

/* ============================================================
   23. UTILITY: SPACING & MISC
   ============================================================ */
.mt-auto  { margin-top: auto; }
.mb-0     { margin-bottom: 0 !important; }
.p-0      { padding: 0 !important; }
.w-100    { width: 100%; }
.h-100    { height: 100%; }
.overflow-hidden  { overflow: hidden; }
.position-relative{ position: relative; }
.position-absolute{ position: absolute; }
.d-none   { display: none !important; }
.d-block  { display: block; }
.d-flex   { display: flex; }
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.d-print-none  { display: none !important; }
.d-print-block { display: block !important; }
.no-print      { display: none !important; }

/* Icon boxes */
.icon-ocean {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem;
  background: var(--gradient-primary);
  color: var(--text-primary);
  border-radius: var(--radius-2xl);
  font-size: var(--text-xl);
  box-shadow: var(--shadow-navy);
  transition: var(--transition-elegant);
}
.icon-ocean:hover   { transform: scale(1.1) rotate(5deg); box-shadow: var(--glow-navy); }
.icon-royal   { background: var(--gradient-royal);  color: var(--color-white); box-shadow: var(--shadow-royal); }
.icon-royal:hover   { box-shadow: var(--glow-royal); }
.icon-emerald { background: var(--gradient-green);  box-shadow: var(--shadow-green); }
.icon-emerald:hover { box-shadow: var(--glow-green); }
.icon-golden  { background: var(--gradient-gold); color: var(--color-white); box-shadow: var(--shadow-gold); }
.icon-golden:hover  { box-shadow: var(--glow-gold); }
.icon-glass {
  background: var(--gradient-glass); backdrop-filter: blur(12px);
  color: var(--color-navy);
  border: 1px solid var(--color-white-20);
  box-shadow: var(--shadow-md);
}

/* Image effects */
.image-ocean {
  border-radius: var(--radius-2xl); overflow: hidden;
  box-shadow: var(--shadow-lg); transition: var(--transition-premium);
  border: 2px solid transparent;
}
.image-ocean:hover  { transform: scale(1.02) rotate(1deg); box-shadow: var(--glow-navy); border-color: var(--color-navy-light); }
.image-golden {
  border-radius: var(--radius-xl);
  border: 3px solid var(--color-gold);
  box-shadow: var(--shadow-gold);
  transition: var(--transition-elegant);
}
.image-golden:hover { box-shadow: var(--glow-gold); transform: scale(1.02); }

/* Hover helpers */
.hover-lift       { transition: var(--transition-elegant); }
.hover-lift:hover { transform: translateY(-8px); }
.hover-scale      { transition: var(--transition-elegant); }
.hover-scale:hover{ transform: scale(1.05); }
.hover-glow:hover { box-shadow: var(--glow-navy); }

/* Overlay effects */
.overlay-ocean {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--gradient-overlay);
  opacity: 0; transition: var(--transition-premium);
  border-radius: inherit;
}
.overlay-ocean:hover { opacity: 1; }
.overlay-glass {
  background: var(--gradient-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-white-20);
}

/* Float/parallax */
.float-ocean   { animation: waveMotion 8s ease-in-out infinite; }
.float-emerald { animation: waveMotion 6s ease-in-out infinite reverse; }
.float-golden  { animation: waveMotion 10s ease-in-out infinite; animation-delay: -2s; }
.parallax-ocean {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.parallax-ocean::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--gradient-overlay);
  opacity: 0.7;
}

/* Special */
.floating-cta {
  position: fixed;
  bottom: var(--spacing-8); right: var(--spacing-8);
  z-index: var(--z-index-sticky);
  animation: bounce 2s infinite;
}
.scroll-indicator {
  position: absolute;
  bottom: var(--spacing-8); left: 50%;
  transform: translateX(-50%);
  color: var(--text-white);
  font-size: var(--text-2xl);
  animation: bounce 2s infinite;
}

/* RTL Support */
[dir="rtl"] { text-align: right; }
[dir="rtl"] .section-label::before { right: auto; left: 100%; background: linear-gradient(90deg, var(--color-gold), transparent); }
[dir="rtl"] .section-label::after  { left: auto; right: 100%; background: linear-gradient(90deg, transparent, var(--color-gold)); }

/* ============================================================
   24. ANIMATIONS
   ============================================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes waveMotion {
  0%, 100% { transform: translateY(0px)   rotate(0deg); }
  25%       { transform: translateY(-5px) rotate(1deg); }
  75%       { transform: translateY(3px)  rotate(-1deg); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}
@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--color-gold-rgb), 0.4); }
  50%       { box-shadow: 0 0 0 10px rgba(var(--color-gold-rgb), 0); }
}
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% { transform: translate3d(0,0,0); }
  40%, 43%                 { transform: translate3d(0,-20px,0); }
  70%                      { transform: translate3d(0,-10px,0); }
  90%                      { transform: translate3d(0,-4px,0); }
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
@keyframes ripple {
  0%   { transform: scale(0); opacity: 1; }
  100% { transform: scale(4); opacity: 0; }
}
@keyframes slideIn {
  from { width: 0; }
  to   { width: 80px; }
}
@keyframes autoGrow {
  0%   { width: 10%; }
  50%  { width: 82%; }
  100% { width: 10%; }
}

/* Animation utility classes */
.animate-fade-up      { animation: fadeInUp 0.8s ease-out; }
.animate-fade-down    { animation: fadeInDown 0.8s ease-out; }
.animate-fade-scale   { animation: fadeInScale 0.6s ease-out; }
.animate-slide-left   { animation: slideInLeft 0.7s ease-out; }
.animate-slide-right  { animation: slideInRight 0.7s ease-out; }
.animate-wave         { animation: waveMotion 4s ease-in-out infinite; }
.animate-pulse        { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-bounce       { animation: bounce 1s infinite; }
.animate-rotate       { animation: rotate 2s linear infinite; }
.animate-float        { animation: float 3s ease-in-out infinite; }
.animate-fadeInUp     { animation: fadeInUp 0.6s ease forwards; }
.animate-fadeIn       { animation: fadeInScale 0.4s ease forwards; }
.animate-pulse-gold   { animation: pulse-gold 2s ease infinite; }
.animate-shimmer {
  background: linear-gradient(90deg, var(--color-gray-100) 25%, var(--color-gray-200) 50%, var(--color-gray-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* ============================================================
   25. PERFORMANCE OPTIMIZATIONS
   ============================================================ */
img { max-width: 100%; height: auto; }

.btn, .card, .animate-wave, .animate-fade-up,
.animate-slide-left, .animate-slide-right, .animate-fade-scale,
.hover-lift, .hover-scale {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ============================================================
   26. SCROLLBAR
   ============================================================ */
::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb { background: var(--color-navy-light); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-gold-dark); color: var(--text-white);}

/* ============================================================
   27. SELECTION & FOCUS
   ============================================================ */
::selection      { background: rgba(var(--color-gold-rgb), 0.35); color: var(--color-navy-deep); }
::-moz-selection { background: rgba(var(--color-gold-rgb), 0.35); color: var(--color-navy-deep); }

:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   28. RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 1200px) {
  :root { --container-max: 100%; }
  :root {
    --text-3xl: 1.6rem;
    --text-4xl: 2rem;
    --text-5xl: 2.5rem;
  }
}

@media (max-width: 992px) {
  :root {
    --text-2xl: 1.3rem;
    --text-3xl: 1.5rem;
    --text-4xl: 1.9rem;
    --text-5xl: 2.2rem;
  }
  .section    { padding: var(--spacing-16) 0; }
  .section-lg { padding: var(--spacing-20) 0; }
  .btn { padding: var(--spacing-3) var(--spacing-6); }
  .card-body  { padding: var(--spacing-5); }
}

@media (max-width: 768px) {
  :root {
    --header-height-top:   0px;
    --header-height-nav:   60px;
    --header-height-total: 60px;
    --text-xl:   1.15rem;
    --text-2xl:  1.3rem;
    --text-3xl:  1.5rem;
    --text-4xl:  1.7rem;
    --text-5xl:  2rem;
  }
  .container  { padding: 0 var(--spacing-4); }
  .section    { padding: var(--spacing-12) 0; }
  .section-sm { padding: var(--spacing-8) 0; }
  .btn {
    padding: var(--spacing-3) var(--spacing-5);
    font-size: var(--text-sm);
    width: 100%;
    margin-bottom: var(--spacing-2);
  }
  .card { margin-bottom: var(--spacing-4); }
  .card-body { padding: var(--spacing-4); }
}

@media (max-width: 480px) {
  :root {
    --text-lg:   1.05rem;
    --text-xl:   1.15rem;
    --text-2xl:  1.25rem;
    --text-3xl:  1.45rem;
    --text-4xl:  1.65rem;
  }
  .container { padding: 0 var(--spacing-3); }
  .btn-lg { padding: var(--spacing-3) var(--spacing-6); font-size: var(--text-sm); }
}

/* ============================================================
   29. ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: high) {
  .card      { border: 2px solid var(--color-navy) !important; }
  .form-control, .form-select { border: 2px solid var(--border-primary) !important; }
  .btn       { border: 2px solid currentColor !important; }
}

/* ============================================================
   30. THEME NOTE
   Almare Lanka Travels is a single dark theme (Golden Night) by design and
   does not switch with the visitor's OS light-mode setting. Print styles
   (Section 31) stay black-on-white, as expected for printed output.
   ============================================================ */

/* ============================================================
   31. PRINT STYLES
   ============================================================ */
@media print {
  *, *::before, *::after {
    text-shadow: none !important;
    box-shadow: none !important;
  }
  body { font-size: 12pt; color: #000 !important; background: #fff !important; }
  .btn {
    border: 2px solid #000 !important;
    background: transparent !important;
    color: #000 !important;
  }
  .card { border: 1px solid #000 !important; break-inside: avoid; }
  h1, h2, h3, h4, h5, h6 { color: #000 !important; break-after: avoid; background: none !important; -webkit-text-fill-color: initial !important; }
  .no-print, .d-print-none { display: none !important; }
  .d-print-block { display: block !important; }
}
/* ── WhatsApp & Back-to-Top fixed element safety net ── */
/* z-index 10001 — above loading-overlay(9999) and error-message(10000) */
#tt-wa-widget,
#tt-back-to-top {
    position: fixed !important;
    transform: none !important;
    filter: none !important;
    contain: none !important;
    will-change: auto !important;
}
#tt-wa-widget   { right: 28px !important; bottom: 28px  !important; z-index: 10001 !important; }
#tt-back-to-top { right: 28px !important; bottom: 104px !important; z-index: 10001 !important; }

/* ============================================================
   32. GOLDEN NIGHT SKY
   The live starfield canvas is created by main.js (one canvas per page,
   fixed behind all content). These rules position it and provide the
   shared sky utilities used by templates.
   ============================================================ */
:root {
  /* Star colours as "r, g, b" triplets, read by main.js for the starfield */
  --star-rgb-1: 154, 163, 175;
  --star-rgb-2: 185, 192, 202;
  --star-rgb-3: 15, 59, 140;
  --star-rgb-4: 61, 111, 209;
  --star-rgb-5: 200, 162, 74;
  --star-shoot-rgb: 15, 59, 140;
  --star-density: 999999999;      /* px² of screen per star; lower = more stars */
  --star-shoot-every: 6000;  /* ms between shooting stars */
}

.tw-starfield {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  display: block;
}

/* Horizon glow: low warm light along the bottom of a hero or panel */
.tw-sky-glow {
  background-image: var(--gradient-hero);
  background-repeat: no-repeat;
}

/* The one glowing italic word inside a headline */
.tw-glow-word {
  font-family: var(--font-elegant);
  font-style: italic;
  color: var(--color-gold-pale);
  text-shadow: none;
}

/* Premium rounded card: night gradient, hairline border, glow on hover */
.tw-card {
  background: var(--gradient-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-3xl);
  overflow: hidden;
  transition: var(--transition-elegant);
}
.tw-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--color-gold-rgb), 0.55);
  box-shadow: var(--shadow-premium);
}

/* Rounded photo frame: whole rectangle visible, no overlay */
.tw-photo {
  border-radius: var(--radius-3xl);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .tw-card:hover { transform: none; }
}

/* ============================================================
   33. COMPANY PAGES · PREMIUM TOKENS (v7.2)
   Shared by company.css and every company-<page>.css file.
   Child files reference ONLY these names, never raw values.
   ============================================================ */
:root {
  /* Section rhythm */
  --coy-section-pad:        var(--spacing-24);
  --coy-section-pad-sm:     var(--spacing-16);
  --coy-section-pad-mobile: var(--spacing-16);
  --coy-head-gap:           var(--spacing-14);
  --coy-grid-gap:           var(--spacing-6);
  --coy-measure:            44rem;
  --coy-measure-wide:       58rem;

  /* Surfaces */
  --coy-surface:            var(--gradient-card);
  --coy-surface-raised:     linear-gradient(180deg, #FFFFFF 0%, #F6F7F9 100%);
  --coy-surface-alt:        rgba(10, 42, 102, 0.025);
  --coy-glass:              rgba(246, 247, 249, 0.75);
  --coy-glass-strong:       rgba(246, 247, 249, 0.92);
  --coy-panel-glow:         none;
  --coy-panel-glow-bottom:  none;
  --coy-section-glow:       none;

  /* Lines and borders */
  --coy-border:             var(--border-primary);
  --coy-border-soft:        rgba(10, 42, 102, 0.10);
  --coy-border-gold:        rgba(15, 59, 140, 0.22);
  --coy-border-gold-strong: rgba(15, 59, 140, 0.45);
  --coy-hairline:           linear-gradient(90deg, #B9C0CA 0%, #EEF1F4 45%, #9AA3AF 70%, #D9DEE4 100%);
  --coy-hairline-v:         linear-gradient(180deg, #9AA3AF 0%, #EEF1F4 50%, #B9C0CA 100%);

  /* Shape */
  --coy-radius-card:        var(--radius-3xl);
  --coy-radius-photo:       var(--radius-2xl);
  --coy-radius-chip:        var(--radius-full);
  --coy-icon-size:          3.25rem;
  --coy-icon-size-sm:       2.5rem;

  /* Accent fills */
  --coy-icon-bg:            rgba(15, 59, 140, 0.08);
  --coy-icon-ring:          0 0 0 1px rgba(154, 163, 175, 0.55), 0 10px 22px -14px rgba(10, 42, 102, 0.45);
  --coy-gold-text:          var(--gradient-gold);
  --coy-number-glow:        none;
  --coy-card-shadow:        0 18px 36px -26px rgba(10, 42, 102, 0.35);
  --coy-card-shadow-hover:  0 26px 48px -24px rgba(10, 42, 102, 0.40), 0 0 0 1px rgba(154, 163, 175, 0.45);
  --coy-photo-shadow:       0 24px 48px -26px rgba(10, 42, 102, 0.45), 0 0 0 1px rgba(154, 163, 175, 0.35);

  /* Motion */
  --coy-reveal-shift:       28px;
  --coy-reveal-duration:    750ms;
  --coy-reveal-ease:        cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* ============================================================
   34. SILVER SHORE LIGHT THEME (v8.0)
   Pearl and silver surfaces, deep sapphire text, metallic silver
   details, champagne gold on small labels only. Applied over the
   token remap above; all values come from tokens defined here.
   ============================================================ */
:root {
  --color-abyss:            #071C45;
  --color-champagne:        #C8A24A;
  --color-champagne-light:  #E6CF8F;
  --color-champagne-text:   #7A5C17;
  --color-champagne-rgb:    200, 162, 74;
  --color-silver-sheen:     linear-gradient(90deg, #B9C0CA 0%, #EEF1F4 45%, #9AA3AF 70%, #D9DEE4 100%);
  --color-platinum:         #F6F7F9;
  --color-moon:             #DFE4EA;
  --font-wordmark:          'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --color-scrim-rgb:        7, 28, 69;
  --text-shadow-pearl:      0 1px 14px rgba(236, 239, 243, 0.85);

  /* Hero over video (Pearl Glass v2): contrast lives on the letters only,
     never as a box or a scrim across the whole hero. */
  --hero-text-stroke:       rgba(var(--color-scrim-rgb), 0.9);
  --hero-text-shadow:       0 0 1px rgba(var(--color-scrim-rgb), 1), 0 1px 2px rgba(var(--color-scrim-rgb), 0.95), 0 2px 8px rgba(var(--color-scrim-rgb), 0.8), 0 0 28px rgba(var(--color-scrim-rgb), 0.6);
  --hero-text-halo:         radial-gradient(ellipse at 30% 60%, rgba(var(--color-scrim-rgb), 0.55) 0%, rgba(var(--color-scrim-rgb), 0.32) 38%, rgba(var(--color-scrim-rgb), 0) 70%);
  --hero-mark-shadow:       0 1px 4px rgba(var(--color-scrim-rgb), 0.6);
  --hero-logo-shadow:       drop-shadow(0 4px 10px rgba(var(--color-scrim-rgb), 0.45));
  --hero-btn-shadow:        0 10px 26px -10px rgba(var(--color-scrim-rgb), 0.8);
  --hero-focus-ring:        0 0 0 5px rgba(var(--color-scrim-rgb), 0.5);
  --ease-premium:           cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Silver Lagoon, Lagoon and Ocean Light from the Silver Shore design
     system (small accents only), plus a slow glide curve for sliders. */
  --color-lagoon:           #2F7F86;
  --color-lagoon-rgb:       47, 127, 134;
  --color-lagoon-mist:      #DCE7EA;
  --color-ocean:            #3D6FD1;
  --color-ocean-rgb:        61, 111, 209;
  --ease-glide:             cubic-bezier(0.77, 0, 0.175, 1);

  /* Text on photos. Used site-wide for any label, chip or caption that
     sits on an image, so it stays readable on bright sky and sand as well
     as on dark forest. Contrast comes from a small dark-glass chip or a
     shade that sits only behind the text, never across the whole photo. */
  --photo-text:             #ffffff;
  --photo-text-soft:        rgba(255, 255, 255, 0.92);
  --photo-accent:           var(--color-champagne-light);
  --photo-chip-bg:          rgba(7, 28, 69, 0.74);
  --photo-chip-bg-hover:    rgba(7, 28, 69, 0.88);
  --photo-chip-border:      rgba(255, 255, 255, 0.24);
  --photo-chip-blur:        blur(10px) saturate(1.2);
  --photo-text-shadow:      0 1px 2px rgba(7, 28, 69, 0.85), 0 2px 14px rgba(7, 28, 69, 0.55);
  --photo-shade-bottom:     linear-gradient(180deg, rgba(7, 28, 69, 0) 38%, rgba(7, 28, 69, 0.50) 66%, rgba(7, 28, 69, 0.90) 100%);
  --photo-shade-top:        linear-gradient(180deg, rgba(7, 28, 69, 0.42) 0%, rgba(7, 28, 69, 0) 34%);
  --photo-tone-gold:        var(--color-champagne-light);
  --photo-tone-lagoon:      #9FD4D8;
  --photo-tone-silver:      #EEF1F4;

  /* Inner-page hero veil (template-hero-section look), shared by the
     package and destination detail heroes. */
  --hero-chip-bg:           rgba(246, 247, 249, 0.88);
  --hero-chip-shadow:       0 10px 22px -16px rgba(10, 42, 102, 0.55);
  --hero-veil-wide:         linear-gradient(90deg, rgba(236, 239, 243, 0.97) 0%, rgba(236, 239, 243, 0.90) 34%, rgba(236, 239, 243, 0.66) 54%, rgba(236, 239, 243, 0) 76%), linear-gradient(180deg, rgba(246, 247, 249, 0.55) 0%, rgba(246, 247, 249, 0) 22%);
  --hero-veil-tablet:       linear-gradient(90deg, rgba(236, 239, 243, 0.96) 0%, rgba(236, 239, 243, 0.86) 45%, rgba(236, 239, 243, 0.30) 78%, rgba(236, 239, 243, 0.10) 100%);
  --hero-veil-phone:        linear-gradient(180deg, rgba(236, 239, 243, 0.25) 0%, rgba(236, 239, 243, 0.78) 38%, rgba(236, 239, 243, 0.96) 62%, rgba(236, 239, 243, 0.98) 100%);
  --hero-wave:              no-repeat center bottom / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0,34 C240,64 480,4 720,30 C960,58 1200,10 1440,32 L1440,64 L0,64 Z' fill='%23ECEFF3'/%3E%3Cpath d='M0,34 C240,64 480,4 720,30 C960,58 1200,10 1440,32' fill='none' stroke='%23B9C0CA' stroke-width='1.2' opacity='.7'/%3E%3C/svg%3E");

  /* Header, Sapphire Night (template-header.css): deep sapphire glass,
     champagne gold accents, light mega panels */
  --hdr-night:              #071C45;
  --hdr-sapphire:           #0A2A66;
  --hdr-glass-hero:         rgba(7, 28, 69, 0.85);
  --hdr-glass-solid:        rgba(7, 28, 69, 0.93);
  --hdr-glass-blur:         blur(18px) saturate(1.4);
  --hdr-band:               linear-gradient(90deg, #071C45 0%, #0A2A66 50%, #071C45 100%);
  --hdr-rail:               linear-gradient(180deg, #071C45 0%, #0A2A66 100%);
  --hdr-text:               #F6F7F9;
  --hdr-text-soft:          rgba(246, 247, 249, 0.80);
  --hdr-text-mute:          rgba(246, 247, 249, 0.60);
  --hdr-hair:               rgba(230, 207, 143, 0.38);
  --hdr-hair-soft:          rgba(230, 207, 143, 0.18);
  --hdr-hair-fade:          linear-gradient(90deg, rgba(230, 207, 143, 0) 0%, rgba(230, 207, 143, 0.38) 18%, rgba(230, 207, 143, 0.38) 82%, rgba(230, 207, 143, 0) 100%);
  --hdr-edge:               linear-gradient(90deg, rgba(200, 162, 74, 0) 0%, #C8A24A 30%, #E6CF8F 50%, #C8A24A 70%, rgba(200, 162, 74, 0) 100%);
  --hdr-gold:               #C8A24A;
  --hdr-gold-light:         #E6CF8F;
  --hdr-gold-deep:          #9C7A2C;
  --hdr-gold-wash:          rgba(200, 162, 74, 0.12);
  --hdr-gold-btn:           linear-gradient(135deg, #E6CF8F 0%, #C8A24A 55%, #9C7A2C 100%);
  --hdr-gold-btn-shadow:    0 10px 26px rgba(200, 162, 74, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  --hdr-gold-btn-shadow-up: 0 16px 34px rgba(200, 162, 74, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  --hdr-sheen:              linear-gradient(110deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 70%);
  --hdr-logo-ring:          conic-gradient(from 210deg, #9C7A2C, #E6CF8F, #C8A24A, #E6CF8F, #9C7A2C);
  --hdr-logo-shadow:        0 10px 30px rgba(0, 0, 0, 0.35);
  --hdr-bar-shadow:         0 18px 40px rgba(7, 28, 69, 0.28);
  --hdr-panel:              #F6F7F9;
  --hdr-panel-alt:          #ECEFF3;
  --hdr-panel-line:         #DFE4EA;
  --hdr-panel-ink:          #1B2740;
  --hdr-panel-ink-soft:     #4A5671;
  --hdr-panel-title:        #0A2A66;
  --hdr-panel-link:         #0F3B8C;
  --hdr-panel-label:        #7A5C17;
  --hdr-panel-border:       rgba(200, 162, 74, 0.35);
  --hdr-panel-shadow:       0 40px 90px -20px rgba(7, 28, 69, 0.45);
  --hdr-panel-topline:      linear-gradient(90deg, #0F3B8C 0%, #9FD4D8 40%, #E6CF8F 75%, #C8A24A 100%);
  --hdr-photo-shade:        linear-gradient(180deg, rgba(7, 28, 69, 0) 35%, rgba(7, 28, 69, 0.90) 100%);
  --hdr-photo-shade-hover:  linear-gradient(180deg, rgba(15, 59, 140, 0.15) 20%, rgba(7, 28, 69, 0.92) 100%);
  --hdr-scrim:              rgba(7, 28, 69, 0.55);
  /* header: solid at the top, fading into the hero at the bottom; silver shine */
  --hdr-fade-reach:         72px;
  --hdr-fade:               linear-gradient(180deg, rgba(7, 28, 69, 0.97) 0%, rgba(7, 28, 69, 0.92) 40%, rgba(7, 28, 69, 0.80) calc(100% - 110px), rgba(7, 28, 69, 0.48) calc(100% - 58px), rgba(7, 28, 69, 0.16) calc(100% - 24px), rgba(7, 28, 69, 0) 100%);
  --hdr-sweep:              linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(238, 241, 244, 0.06) 45%, rgba(255, 255, 255, 0.20) 50%, rgba(238, 241, 244, 0.06) 55%, rgba(255, 255, 255, 0) 62%);
  --hdr-sweep-mask:         linear-gradient(180deg, #000 0%, #000 55%, rgba(0, 0, 0, 0) 100%);
  --hdr-silver-line:        linear-gradient(90deg, rgba(223, 228, 234, 0) 0%, rgba(223, 228, 234, 0.42) 18%, rgba(223, 228, 234, 0.42) 82%, rgba(223, 228, 234, 0) 100%);
  --hdr-silver-streak:      linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(238, 241, 244, 0.65) 35%, #FFFFFF 50%, rgba(238, 241, 244, 0.65) 65%, rgba(255, 255, 255, 0) 100%);
  --hdr-silver-glow:        drop-shadow(0 0 3px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 9px rgba(201, 208, 218, 0.7));
  --hdr-wordmark-sheen:     linear-gradient(100deg, #F6F7F9 0%, #F6F7F9 42%, #FFFFFF 46%, #B9C0CA 50%, #FFFFFF 54%, #F6F7F9 58%, #F6F7F9 100%);
  /* footer (template-footer.css): gold bar on the top edge with a travelling sparkle */
  --ftr-bar-height:         3px;
  --ftr-gold-bar:           linear-gradient(90deg, #9C7A2C 0%, #E6CF8F 22%, #C8A24A 50%, #E6CF8F 78%, #9C7A2C 100%);
  --ftr-gold-streak:        linear-gradient(90deg, rgba(255, 248, 225, 0) 0%, rgba(255, 248, 225, 0.85) 38%, #FFFFFF 50%, rgba(255, 248, 225, 0.85) 62%, rgba(255, 248, 225, 0) 100%);
  --ftr-gold-glow:          drop-shadow(0 0 4px rgba(230, 207, 143, 0.75)) drop-shadow(0 0 12px rgba(200, 162, 74, 0.45));
  --ftr-star:               radial-gradient(circle, #FFFFFF 0 2px, rgba(255, 244, 214, 0.9) 3.5px, rgba(230, 207, 143, 0) 9px), linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%) center / 100% 1.5px no-repeat, linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%) center / 1.5px 100% no-repeat;
  --ftr-star-glow:          drop-shadow(0 0 4px rgba(255, 244, 214, 1)) drop-shadow(0 0 10px rgba(230, 207, 143, 0.9)) drop-shadow(0 0 22px rgba(200, 162, 74, 0.6));
  --ftr-sweep-mask:         linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 30%, #000 70%, rgba(0, 0, 0, 0) 100%);
}
html, body { background: var(--bg-primary); color: var(--text-secondary); }
::selection { background: rgba(var(--color-gold-rgb), 0.18); color: var(--text-primary); }

/* ============================================================
   END OF MAIN.CSS — Almare Lanka Travels v8.0.0 (Silver Shore)
   www.almarelanka.com
   Brand: Inbound Tour Operator & Tourist Transport · Imaduwa, Sri Lanka
   Palette: Pearl · Silver · Deep sapphire · Champagne gold (Silver Shore)
   ============================================================ */