/* ============================================================
   VIAJAR — CSS Custom Properties
   ============================================================ */

:root {
  /* ── Palette ── */
  --sky:          #5EA7D4;
  --teal:         #083F49;
  --teal-mid:     #0d5567;
  --teal-muted:   #88B8BF;
  --gold:         #C9973A;
  --gold-light:   #f0e0bb;
  --black:        #1A1A1A;
  --green:        #94CF8C;
  --cream:        #f2ede6;
  --cream-dark:   #e8e0d4;
  --white:        #ffffff;
  --dark-section: #243040;
  --dark-usp:     #2a3a4a;
  --text-muted:   #888888;
  --border:       #e0d8ce;

  /* ── Typography ── */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Outfit', system-ui, sans-serif;

  /* ── Font sizes ── */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.5rem;
  --fs-4xl:  clamp(2rem, 4vw, 3rem);
  --fs-5xl:  clamp(2.5rem, 5vw, 4rem);
  --fs-hero: clamp(2.75rem, 7vw, 5.75rem);

  /* ── Spacing ── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* ── Section padding ── */
  --section-pad: clamp(3rem, 6vw, 6rem);

  /* ── Border radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:   0 4px 12px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.08);
  --shadow-lg:   0 10px 30px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.10);
  --shadow-xl:   0 20px 50px rgba(0,0,0,.18);
  --shadow-gold: 0 4px 20px rgba(201,151,58,.35);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Navbar ── */
  --navbar-height: 64px;

  /* ── Z-index scale ── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-navbar:   200;
  --z-overlay:  300;
  --z-drawer:   400;
  --z-modal:    500;
  --z-chat:     600;

  /* ── Container ── */
  --container-max: 1320px;
  --container-pad: clamp(1rem, 4vw, 2.5rem);

  /* ── Breakpoints (reference) ── */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1440px;
}