/* ═══════════════════════════════════════════════════════════════
   RANDU TOURS — CSS DESIGN SYSTEM (variables.css)
   Brand palette: Royal Blue + Crimson Red + White (matches logo)
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Playball&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ── PRIMARY — Royal Blue (logo background) ──────────── */
  --blue:            hsl(220, 68%, 33%);   /* #1A3D8C royal blue */
  --blue-hover:      hsl(220, 68%, 26%);
  --blue-dark:       hsl(220, 72%, 20%);   /* #0D2059 deep navy */
  --blue-darker:     hsl(220, 75%, 13%);   /* near-black navy   */
  --blue-light:      hsl(220, 68%, 48%);   /* lighter for hovers */
  --blue-faint:      hsl(220, 60%, 95%);   /* very light blue bg */
  --blue-glow:       hsla(220, 68%, 33%, 0.35);

  /* ── ACCENT — Crimson Red (logo stripes) ─────────────── */
  --red:             hsl(350, 72%, 45%);   /* #C8102E crimson    */
  --red-hover:       hsl(350, 72%, 36%);
  --red-dark:        hsl(350, 72%, 28%);
  --red-light:       hsl(350, 85%, 58%);   /* brighter red       */
  --red-faint:       hsl(350, 70%, 95%);   /* very soft red bg   */
  --red-glow:        hsla(350, 72%, 45%, 0.35);

  /* ── NEUTRAL ─────────────────────────────────────────── */
  --charcoal:        hsl(220, 26%, 11%);
  --charcoal-card:   hsl(220, 26%, 15%);
  --cream:           hsl(35, 33%, 97%);
  --cream-dark:      hsl(35, 20%, 93%);
  --white:           hsl(0, 0%, 100%);
  --off-white:       hsl(30, 30%, 99%);

  /* ── TEXT ────────────────────────────────────────────── */
  --text-dark:       hsl(220, 50%, 12%);
  --text-mid:        hsl(220, 15%, 35%);
  --text-light:      hsl(220, 10%, 55%);
  --text-white:      hsl(0, 0%, 98%);

  /* ── LEGACY ALIASES (keeps old class references working) */
  --orange:          var(--red);
  --orange-hover:    var(--red-hover);
  --orange-light:    var(--red-faint);
  --orange-glow:     var(--red-glow);
  --teal:            var(--blue);
  --teal-dark:       var(--blue-dark);
  --teal-darker:     var(--blue-darker);

  /* ── GRADIENTS ───────────────────────────────────────── */
  --hero-gradient:   linear-gradient(135deg,
                       hsl(220,72%,15%) 0%,
                       hsl(220,68%,26%) 55%,
                       hsl(350,60%,22%) 100%);

  --blue-gradient:   linear-gradient(135deg,
                       hsl(220,68%,28%) 0%,
                       hsl(220,72%,18%) 100%);

  --red-gradient:    linear-gradient(135deg,
                       hsl(350,72%,50%) 0%,
                       hsl(350,72%,36%) 100%);

  --dark-gradient:   linear-gradient(180deg,
                       hsl(220,26%,11%), hsl(220,26%,8%));

  --card-gradient:   linear-gradient(180deg,
                       transparent 40%,
                       hsla(220,50%,8%,0.95) 100%);

  /* legacy alias for gradient refs */
  --orange-gradient: var(--red-gradient);
  --teal-gradient:   var(--blue-gradient);

  /* ── TYPOGRAPHY ──────────────────────────────────────── */
  --font-script:  'Playball', cursive;
  --font-serif:   'DM Serif Display', Georgia, serif;
  --font-sans:    'Plus Jakarta Sans', system-ui, sans-serif;

  /* ── FONT SIZES (fluid clamp) ────────────────────────── */
  --fs-xs:    clamp(0.65rem,  1vw,    0.75rem);
  --fs-sm:    clamp(0.8rem,   1.5vw,  0.9rem);
  --fs-base:  clamp(0.9rem,   1.8vw,  1rem);
  --fs-md:    clamp(1rem,     2vw,    1.15rem);
  --fs-lg:    clamp(1.1rem,   2.5vw,  1.35rem);
  --fs-xl:    clamp(1.4rem,   3vw,    1.75rem);
  --fs-2xl:   clamp(1.8rem,   4vw,    2.4rem);
  --fs-3xl:   clamp(2.2rem,   5vw,    3.2rem);
  --fs-4xl:   clamp(2.8rem,   6vw,    4.5rem);
  --fs-hero:  clamp(3rem,     8vw,    6.5rem);

  /* ── SPACING ─────────────────────────────────────────── */
  --sp-2:    0.125rem;
  --sp-4:    0.25rem;
  --sp-8:    0.5rem;
  --sp-12:   0.75rem;
  --sp-16:   1rem;
  --sp-20:   1.25rem;
  --sp-24:   1.5rem;
  --sp-32:   2rem;
  --sp-40:   2.5rem;
  --sp-48:   3rem;
  --sp-64:   4rem;
  --sp-80:   5rem;
  --sp-96:   6rem;
  --sp-128:  8rem;

  /* ── BORDER RADIUS ───────────────────────────────────── */
  --r-sm:    6px;
  --r-md:    12px;
  --r-lg:    20px;
  --r-xl:    32px;
  --r-2xl:   48px;
  --r-pill:  9999px;
  --r-arch:  120px 120px 20px 20px;

  /* ── SHADOWS ─────────────────────────────────────────── */
  --sh-sm:   0 2px 8px  hsla(0,0%,0%,0.08);
  --sh-md:   0 4px 20px hsla(0,0%,0%,0.12);
  --sh-lg:   0 8px 40px hsla(0,0%,0%,0.18);
  --sh-xl:   0 16px 60px hsla(0,0%,0%,0.25);
  --sh-blue: 0 8px 32px  hsla(220,68%,33%,0.45);
  --sh-red:  0 8px 32px  hsla(350,72%,45%,0.45);

  /* legacy */
  --sh-orange: var(--sh-red);
  --sh-teal:   var(--sh-blue);

  /* ── TRANSITIONS ─────────────────────────────────────── */
  --ease-smooth:   cubic-bezier(0.25, 1, 0.5, 1);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --t-fast:        0.15s;
  --t-base:        0.3s;
  --t-slow:        0.5s;
  --t-slower:      0.8s;

  /* ── LAYOUT ──────────────────────────────────────────── */
  --container:    1280px;
  --container-md: 960px;
  --header-h:     80px;
  --header-h-sm:  64px;
  --z-base:       1;
  --z-card:       10;
  --z-dropdown:   100;
  --z-overlay:    500;
  --z-modal:      800;
  --z-header:     900;
  --z-preloader:  9999;
}