/* ================================================================
   SOUTH INDIA TRAVELS — Travelo-Inspired CSS Variables
   Dark Navy Theme with Teal & Gold Accents
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {

  /* ── BRAND PALETTE (Travelo-inspired dark navy) ───────── */
  --navy:          #0B1D2E;
  --navy-mid:      #122640;
  --navy-light:    #1A3350;
  --navy-pale:     #243D58;

  --teal:          #1AA89C;
  --teal-dark:     #0E8076;
  --teal-mid:      #22BFB2;
  --teal-light:    #5DD6CE;
  --teal-pale:     #E0F7F5;

  --gold:          #F5A623;
  --gold-dark:     #D4881C;
  --gold-light:    #FFB94A;
  --gold-pale:     #FEF3DC;

  --white:         #FFFFFF;
  --off-white:     #F6F9FC;
  --light-gray:    #EDF2F7;
  --mid-gray:      #8FA8BB;
  --text-dark:     #0B1D2E;
  --text-body:     #2C4A5E;
  --text-muted:    #6B8FA5;

  /* ── SEMANTIC ALIASES ─────────────────────────────────── */
  --color-primary:     var(--teal);
  --color-primary-dk:  var(--teal-dark);
  --color-accent:      var(--gold);
  --color-bg:          var(--white);
  --color-bg-alt:      var(--off-white);
  --color-dark-bg:     var(--navy);
  --color-surface:     var(--white);
  --color-text:        var(--text-body);
  --color-text-muted:  var(--text-muted);
  --color-border:      rgba(26,168,156,0.15);
  --color-border-nav:  rgba(255,255,255,0.08);
  --spice:             #E05A2B;
  --spice-mid:         #E87045;
  --spice-dark:        #B84320;
  --teal:              #1AA89C;
  --teal-dark:         #0E8076;
  --teal-mid:          #22BFB2;
  --teal-light:        #5DD6CE;
  --gold:              #F5A623;
  --gold-light:        #FFB94A;
  --gold-bright:       #FFD070;
  --ivory:             #F6F9FC;
  --ivory-dark:        #EDF2F7;
  --dark:              #0B1D2E;
  --text:              #2C4A5E;
  --white:             #FFFFFF;

  /* ── GRADIENTS ──────────────────────────────────────────── */
  --grad-hero:     linear-gradient(160deg, #060F18 0%, #0B1D2E 50%, #0E2840 100%);
  --grad-nav:      linear-gradient(180deg, rgba(11,29,46,0.98) 0%, rgba(11,29,46,0.95) 100%);
  --grad-primary:  linear-gradient(135deg, #0E8076 0%, #22BFB2 100%);
  --grad-accent:   linear-gradient(135deg, #E05A2B 0%, #E87045 100%);
  --grad-gold:     linear-gradient(135deg, #D4881C 0%, #FFB94A 100%);
  --grad-card:     linear-gradient(180deg, transparent 30%, rgba(11,29,46,0.94) 100%);
  --grad-warm:     linear-gradient(180deg, #F6F9FC 0%, #EDF2F7 100%);
  --grad-cta:      linear-gradient(135deg, #071218 0%, #0E2840 100%);

  /* ── TYPOGRAPHY ─────────────────────────────────────────── */
  --font-display:  'Playfair Display', 'Georgia', serif;
  --font-body:     'Outfit', sans-serif;

  --text-xs:    0.72rem;
  --text-sm:    0.85rem;
  --text-base:  1rem;
  --text-lg:    1.1rem;
  --text-xl:    1.3rem;
  --text-2xl:   1.65rem;
  --text-3xl:   2.25rem;
  --text-4xl:   3.2rem;
  --text-5xl:   clamp(2.8rem, 5.5vw, 4.5rem);

  /* ── SPACING ────────────────────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --section-y: 90px;

  /* ── RADIUS ─────────────────────────────────────────────── */
  --radius:     12px;
  --radius-lg:  20px;
  --radius-xl:  32px;
  --radius-pill: 9999px;

  /* ── SHADOWS ────────────────────────────────────────────── */
  --shadow:       0 4px 24px rgba(11,29,46,0.10);
  --shadow-lg:    0 16px 56px rgba(11,29,46,0.20);
  --shadow-card:  0 8px 32px rgba(11,29,46,0.14);
  --shadow-spice: 0 8px 32px rgba(224,90,43,0.30);
  --shadow-gold:  0 8px 28px rgba(245,166,35,0.35);

  /* ── TRANSITIONS ────────────────────────────────────────── */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  150ms;
  --dur-med:   280ms;
  --dur-slow:  460ms;

  /* ── LAYOUT ─────────────────────────────────────────────── */
  --container-max: 1180px;
  --nav-h: 76px;
}