/* ============================================================
   Finwin Travels
   main.css — Centralized Design System — Single Source of Truth
   Version: 6.0.0 | www.finwintravels.com

   Brand: Finwin Travels — Inbound & Outbound Tourism Specialists
          Est. 2020 | Nikaweratiya, Sri Lanka
   Founder & CEO: Jeewantha Ranathunga

   Palette: Jet Black · 24K Gold · Platinum Silver · v6.0
   Theme: DARK (JET BLACK) — Confident, restrained, modern-premium
   Inspiration: A true near-black page, not a tinted navy or brown, reads as
                confident and authoritative rather than decorative — the
                background stays quiet so gold and silver carry the identity
                and package photography can carry color once it's shot.
                24K Gold remains the primary accent, used sparingly for
                headlines, prices and primary CTAs — never as a gradient or
                foil effect, always a flat, confident fill. Platinum Silver
                (mapped through the former "Royal Blue" token family) is the
                secondary accent and the default body-text color — the
                "silver service" register standing in for Finwin's
                documentation-grade transparency. Every gradient in the
                previous version of this system has been flattened to a
                solid color; there are no background or text gradients
                anywhere in this file by design.

   ⚠️  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.
   ⚠️  Color is restrained by design: reserve solid gold FILLS for headlines
       and primary CTAs only. Everywhere else, use thin borders, small
       labels, or text color — not colored background blocks, and never a
       gradient.
   ============================================================ */

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

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

  /* ─── Finwin Travels JET BLACK · GOLD & SILVER PALETTE ──────────── */
  /*
     Jet Black → True neutral near-black — page background, surfaces, text
                 on light chips. No navy or brown undertone anywhere.
     24K Gold  → Warm metallic gold — the primary accent, used sparingly,
                 always as a flat fill (no gradients or foil effects)
     Platinum  → Cool platinum-silver — secondary accent and default body
                 text color (mapped through the former "Royal Blue" tokens)
     Graphite  → Quiet neutral grey — tertiary accent (former "Platinum/
                 Green" tokens), used for structure, not decoration
  */

  /* Jet Black (Primary / Backgrounds) — true neutral near-black, used for backgrounds, dark-accent sections and text-on-light-surface */
  --color-navy:           #0A0A0A;
  --color-navy-deep:      #050505;
  --color-navy-abyss:     #000000;
  --color-navy-card:      #141414;
  --color-navy-mid:       #232323;
  --color-navy-light:     #3A3A3A;
  --color-navy-soft:      #55555A;
  --color-navy-border:    #2A2A2A;
  --color-navy-rgb:       10, 10, 10;

  /* 24K Gold (Primary Accent / CTA) — warm metallic gold, used sparingly, always flat */
  --color-gold:           #D9B54A;
  --color-gold-light:     #ECD08C;
  --color-gold-pale:      #F3E4B8;
  --color-gold-dark:      #B0913C;
  --color-gold-darker:    #7C6529;
  --color-gold-glow:      rgba(217, 181, 74, 0.22);
  --color-gold-glow-sm:   rgba(217, 181, 74, 0.12);
  --color-gold-bg:        rgba(217, 181, 74, 0.08);
  --color-gold-bg-hover:  rgba(217, 181, 74, 0.14);
  --color-gold-rgb:       217, 181, 74;

  /* Platinum Silver (Secondary Accent) — cool platinum, the default body-text
     color on jet black and the second half of the gold/silver identity.
     Token names kept as --color-royal-* for structural compatibility. */
  --color-royal:          #D7DADE;
  --color-royal-light:    #F3F4F6;
  --color-royal-pale:     #EDEFF1;
  --color-royal-dark:     #ABAEB3;
  --color-royal-darker:   #83868C;
  --color-royal-glow:     rgba(215, 218, 222, 0.20);
  --color-royal-glow-sm:  rgba(215, 218, 222, 0.10);
  --color-royal-bg:       rgba(215, 218, 222, 0.06);
  --color-royal-bg-hover: rgba(215, 218, 222, 0.12);
  --color-royal-rgb:      215, 218, 222;

  /* Graphite (tertiary accent — quiet neutral grey, structure not decoration). Token names kept as --color-green-* for structural compatibility. */
  --color-green:          #6E7176;
  --color-green-light:    #9A9DA3;
  --color-green-pale:     rgba(110, 113, 118, 0.16);
  --color-green-bg:       rgba(110, 113, 118, 0.08);
  --color-green-dark:     #4A4C50;
  --color-green-rgb:      110, 113, 118;

  /* ─── WHITE / NEUTRAL SCALE ───────────────────────────────── */
  --color-white:          #ffffff;
  --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:        #F5F5F4;
  --color-gray-100:       #E8E8E7;
  --color-gray-200:       #D3D3D2;
  --color-gray-300:       #B0B0AF;
  --color-gray-400:       #8A8A89;
  --color-gray-500:       #6B6B6A;
  --color-gray-600:       #4E4E4D;
  --color-gray-700:       #363636;
  --color-gray-800:       #212121;
  --color-gray-900:       #121212;

  /* Dark Overlay Scale — onyx-based, for photo/hero overlays that still need dark-on-image legibility */
  --color-dark-90:        rgba(0, 0, 0, 0.90);
  --color-dark-80:        rgba(0, 0, 0, 0.80);
  --color-dark-70:        rgba(0, 0, 0, 0.68);
  --color-dark-50:        rgba(0, 0, 0, 0.48);
  --color-dark-30:        rgba(0, 0, 0, 0.28);

  /* ─── SEMANTIC / STATUS COLORS — brightened for legibility on jet black ─── */
  --color-success:        #4C9A5B;
  --color-success-light:  rgba(76, 154, 91, 0.16);
  --color-success-dark:   #3A7645;
  --color-success-rgb:    76, 154, 91;

  --color-warning:        #D9B54A;
  --color-warning-light:  rgba(217, 181, 74, 0.16);
  --color-warning-dark:   #B0913C;
  --color-warning-rgb:    217, 181, 74;

  --color-error:          #C1495A;
  --color-error-light:    rgba(193, 73, 90, 0.16);
  --color-error-dark:     #8F3543;
  --color-error-text:     #C1495A;
  --color-error-rgb:      193, 73, 90;

  --color-info:           #6E8DAE;
  --color-info-light:     rgba(110, 141, 174, 0.16);
  --color-info-dark:      #4F6A85;
  --color-info-rgb:       110, 141, 174;

  /* ─── BACKGROUND TOKENS — true jet black, no warm or brown cast ────── */
  --bg-primary:           #030303;
  --bg-secondary:         #101010;
  --bg-tertiary:          #1A1A1A;
  --bg-dark:              var(--color-navy-abyss);
  --bg-overlay:           rgba(0, 0, 0, 0.72);
  --bg-overlay-light:     rgba(0, 0, 0, 0.40);
  --bg-gold-light:        rgba(217, 181, 74, 0.06);
  --bg-green-light:       rgba(110, 113, 118, 0.06);
  --bg-texture-subtle:    var(--bg-primary);

  /* ─── TEXT TOKENS — silver & gold on jet black for maximum 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:         #4E4E4D;
  --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:       #262626;
  --border-secondary:     #1E1E1E;
  --border-light:         rgba(var(--color-royal-rgb), 0.12);
  --border-gold:          rgba(217, 181, 74, 0.35);
  --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:     var(--color-navy);
  --gradient-gold:        var(--color-gold);
  --gradient-gold-hover:  var(--color-gold-light);
  --gradient-royal:       var(--color-royal);
  --gradient-royal-hover: var(--color-royal-light);
  --gradient-green:       var(--color-green);
  /* Hero / photo-overlay — a flat scrim, not a fade, over hero images */
  --gradient-hero:        var(--color-navy-abyss);
  --gradient-depth:       var(--color-navy-abyss);
  /* 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(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.82) 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:     var(--color-navy-mid);
  /* Card fill — flat dark surface, one step above the page */
  --gradient-card:        var(--color-navy-card);
  /* Glass effect — flat translucent black, paired with backdrop-filter blur */
  --gradient-glass:       rgba(10, 10, 10, 0.55);
  --gradient-text:        var(--color-gold);
  --gradient-warm:        var(--color-gold);
  --gradient-button:      var(--gradient-gold);

  /* ─── SHADOWS — on jet 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(0, 0, 0, 0.35);
  --shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.40);
  --shadow-md:            0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-lg:            0 6px 18px rgba(0, 0, 0, 0.50);
  --shadow-xl:            0 12px 30px rgba(0, 0, 0, 0.55);
  --shadow-2xl:           0 20px 44px rgba(0, 0, 0, 0.60);
  --shadow-inner:         inset 0 1px 4px rgba(0, 0, 0, 0.40);
  --shadow-premium:       0 8px 24px rgba(0, 0, 0, 0.45);

  /* Brand shadows — thin definition, not glow */
  --shadow-gold:          0 2px 10px rgba(217, 181, 74, 0.20);
  --shadow-gold-lg:       0 4px 20px rgba(217, 181, 74, 0.18);
  --shadow-navy:          0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-royal:         0 4px 14px rgba(var(--color-royal-rgb), 0.16);
  --shadow-green:         0 2px 10px rgba(110, 113, 118, 0.20);

  /* Glow aliases — used sparingly on hover, kept subtle */
  --glow-navy:            0 6px 20px rgba(0, 0, 0, 0.55);
  --glow-gold:            0 6px 20px rgba(217, 181, 74, 0.26);
  --glow-royal:           0 6px 20px rgba(var(--color-royal-rgb), 0.22);
  --glow-green:           0 6px 18px rgba(110, 113, 118, 0.22);
  --glow-premium:         0 8px 26px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(217, 181, 74, 0.14);
  --glow-soft:            0 3px 12px rgba(0, 0, 0, 0.40);

  --shadow-luxury:        0 10px 30px rgba(0, 0, 0, 0.45), 0 3px 12px rgba(217, 181, 74, 0.12);

  /* ─── TYPOGRAPHY ─────────────────────────────────────────── */
  /*
     Display:  Italiana — a thin, high-fashion display serif with dramatic
               letterforms. Hero titles, section headings, package names.
               Used at large sizes only — the strokes are too fine for
               small text.
     Elegant:  Cormorant Garamond — a lighter, more intimate italic serif for
               pull-quotes, taglines, and founder's-story copy.
     Body:     Jost — a clean geometric sans that stays legible in gold and
               silver on jet black at small sizes. Body copy, navigation,
               UI labels, descriptions.
     Labels:   Cinzel — classical uppercase capitals, projecting the quiet
               institutional credibility of a certified, safety-led operator.
               Section labels, credential badges, nav caps, CTA tracking.
  */
  --font-display:         'Italiana', 'Didot', 'Georgia', serif;
  --font-primary:         'Jost', '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:    1px;
  --radius-sm:    2px;
  --radius-md:    4px;
  --radius-lg:    6px;
  --radius-xl:    8px;
  --radius-2xl:   10px;
  --radius-3xl:   14px;
  --radius-4xl:   20px;
  --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:     var(--color-navy);
  --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 Finwin 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(217, 181, 74, 0.04);
  --orange-100:           rgba(217, 181, 74, 0.08);
  --orange-200:           rgba(217, 181, 74, 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(61, 61, 61, 0.10);
  --teal-50:              rgba(61, 61, 61, 0.04);
  --teal-100:             rgba(61, 61, 61, 0.08);
  --teal-200:             rgba(61, 61, 61, 0.15);
  --teal-300:             rgba(61, 61, 61, 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(110, 113, 118, 0.20);
  --red-300:              rgba(110, 113, 118, 0.40);
  --red-400:              rgba(110, 113, 118, 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:            #f0ebe0;
  --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(61, 61, 61, 0.08);
  --bg-red-light:         var(--color-error-light);
  --bg-overlay-orange:    rgba(217, 181, 74, 0.92);
  --bg-overlay-teal:      rgba(var(--color-navy-rgb), 0.92);
  --bg-overlay-red:       rgba(110, 113, 118, 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:       var(--color-navy-abyss);

  /* 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(110, 113, 118, 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(255, 255, 255, 0.06);
  --glass-royal:          rgba(var(--color-royal-rgb), 0.10);
  --glass-emerald:        rgba(110, 113, 118, 0.08);
  --glass-golden:         rgba(217, 181, 74, 0.10);

  /* 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:     #7c3aed;
  --slide-interval:       5000ms;

  /* Font accent alias — Cinzel for classical Roman-capital uppercase labels/eyebrows */
  --font-accent:          'Cinzel', var(--font-primary);
  --font-label:           'Cinzel', var(--font-primary);

  /* 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;
  /* v6.0: full-brightness gold reads at 8:1+ on jet black — no darker
     variant needed now that the whole theme is dark by design. */
  color: var(--color-gold);
  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 {
  /* v6.0: full gold on jet black — no light-theme AA 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(--color-white); }
.section-navy  { background: var(--color-navy-abyss); color: var(--color-white); }
.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 — restrained Deep Navy CTA with 24K Gold trim (jewellery-box pattern) */
.btn-primary,
.btn-gold,
.btn-cta,
.btn-golden {
  background: var(--color-navy);
  border: 1px solid var(--color-gold-dark);
  color: var(--color-gold-light);
  box-shadow: var(--shadow-sm);
  font-weight: var(--font-weight-bold);
}
.btn-primary:hover,
.btn-gold:hover,
.btn-cta:hover,
.btn-golden:hover {
  background: var(--color-navy-light);
  border-color: var(--color-gold);
  transform: translateY(-1px);
  box-shadow: var(--shadow-gold);
  color: var(--color-gold);
}
.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(--color-white);
  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(--color-white);
}

/* 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(--color-white-80);
}
.btn-outline-navy:hover,
.btn-outline-ocean:hover {
  background: var(--color-navy-light);
  border-color: var(--color-navy-light);
  color: var(--color-white);
  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(--color-white-90);
  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(--color-white);
}

.btn-glass {
  background: var(--gradient-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-white-20);
  color: var(--color-white);
  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(--color-white);
}

/* 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(217, 181, 74, 0.5);
}

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

/* Ocean/Navy card (alias) */
.card-ocean,
.card-navy {
  background: var(--gradient-primary);
  border: 2px solid var(--color-navy);
  color: var(--text-white);
  box-shadow: var(--shadow-navy);
}
.card-ocean .card-title, .card-navy .card-title { color: var(--color-white); }
.card-ocean .card-text,  .card-navy .card-text  { color: var(--color-white-90); }
.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(217, 181, 74, 0.35);
}
.badge-navy,
.badge-ocean {
  background: var(--color-navy);
  color: var(--color-white);
}
.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(110, 113, 118, 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(76, 154, 91, 0.10);
  border-color: rgba(76, 154, 91, 0.20);
  border-left-color: var(--color-success);
}
.alert-warning {
  color: var(--color-gold);
  background: rgba(217, 181, 74, 0.10);
  border-color: rgba(217, 181, 74, 0.20);
  border-left-color: var(--color-gold);
}
.alert-danger,
.alert-error {
  color: var(--color-error-text);
  background: rgba(193, 73, 90, 0.10);
  border-color: rgba(193, 73, 90, 0.20);
  border-left-color: var(--color-error);
}
.alert-info {
  color: var(--color-info);
  background: rgba(110, 141, 174, 0.10);
  border-color: rgba(110, 141, 174, 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-white);
  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-white);
  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-white);
  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-white); }
.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-white);
  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-white);
  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); text-shadow: 0 0 20px rgba(217, 181, 74, 0.55); }

/* 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(217, 181, 74, 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(110, 113, 118, 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(217, 181, 74, 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-white);
  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(217, 181, 74, 0.4); }
  50%       { box-shadow: 0 0 0 10px rgba(217, 181, 74, 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); }

/* ============================================================
   27. SELECTION & FOCUS
   ============================================================ */
::selection      { background: rgba(217, 181, 74, 0.35); color: var(--color-navy-deep); }
::-moz-selection { background: rgba(217, 181, 74, 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
   Finwin Travels is a dark (jet black) brand theme by design and does
   not adapt to the visitor's OS-level light-mode preference. Every
   section is built on the same jet-black ground with flat gold and
   silver accents — there is no separate "dark mode," the whole site
   is this theme. Print styles (Section 31) remain black-on-white,
   which is standard/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; }

/* ============================================================
   END OF MAIN.CSS — Finwin Travels v6.0.0
   www.finwintravels.com
   Brand: Inbound & Outbound Tourism Specialists · Nikaweratiya, Sri Lanka
   Palette: Jet Black · 24K Gold · Platinum Silver — flat fills only, no gradients
   ============================================================ */