/* ============================================================
   Eden Tours Egypt — Design Tokens  (Modern Luxury)
   Palette: deep Nile navy + antique gold + warm sand.
   ============================================================ */

:root {
  /* ---------- Brand (navy -> gold) ---------- */
  --brand-purple: #0b2447;          /* primary deep navy */
  --brand-purple-600: #081a33;
  --brand-purple-700: #06132a;
  --brand-magenta: #c9a227;         /* antique gold */
  --brand-magenta-600: #b08d1f;
  --brand-magenta-700: #957715;
  --brand-blue: #123a63;            /* mid navy */
  --brand-blue-600: #0f3054;
  --brand-gradient: linear-gradient(135deg, #0b2447 0%, #17406b 45%, #c9a227 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(11,36,71,.12) 0%, rgba(23,64,107,.12) 45%, rgba(201,162,39,.14) 100%);

  /* ---------- Luxury / Egyptian accents ---------- */
  --gold: #c9a227;
  --gold-600: #ab891c;
  --gold-2: #e2c46a;
  --gold-soft: #f3e6c4;
  --sand: #faf8f3;
  --sand-2: #f4efe4;
  --navy: #0b2447;
  --navy-2: #081a33;
  --dark: #0a1424;
  --dark-2: #0d1c33;
  --terracotta: #b45309;

  /* ---------- Glassmorphism ---------- */
  --glass-bg: rgba(255, 255, 255, .58);
  --glass-bg-strong: rgba(255, 255, 255, .82);
  --glass-border: rgba(255, 255, 255, .75);
  --glass-blur: 18px;
  --glass-shadow: 0 18px 44px rgba(11, 36, 71, .12);
  --glass-shadow-lg: 0 30px 70px rgba(11, 36, 71, .18);

  /* ---------- Neutrals (light) ---------- */
  --ink: #12192a;
  --ink-2: #384152;
  --muted: #6b7284;
  --line: #e8e5dc;
  --line-2: #f1eee6;
  --surface: #ffffff;
  --surface-2: #faf8f3;
  --surface-3: #f3efe6;

  /* ---------- Semantic ---------- */
  --success: #1fa971;
  --warning: #f5a524;
  --danger: #e5484d;
  --info: #123a63;
  --star: #f5a524;

  /* ---------- Typography ---------- */
  --font-heading: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Cormorant Garamond', 'Outfit', Georgia, serif;

  --fs-xs: 0.75rem;    /* 12 */
  --fs-sm: 0.875rem;   /* 14 */
  --fs-base: 1rem;     /* 16 */
  --fs-lg: 1.125rem;   /* 18 */
  --fs-xl: 1.25rem;    /* 20 */
  --fs-2xl: 1.5rem;    /* 24 */
  --fs-3xl: 1.875rem;  /* 30 */
  --fs-4xl: 2.25rem;   /* 36 */
  --fs-5xl: 3rem;      /* 48 */
  --fs-6xl: 3.75rem;   /* 60 */
  --fs-7xl: 4.5rem;    /* 72 */

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.6;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 8rem;

  /* ---------- Radius ---------- */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(18, 25, 42, .06);
  --shadow-sm: 0 2px 8px rgba(18, 25, 42, .06);
  --shadow-md: 0 8px 24px rgba(18, 25, 42, .08);
  --shadow-lg: 0 18px 48px rgba(18, 25, 42, .12);
  --shadow-xl: 0 30px 70px rgba(18, 25, 42, .16);
  --shadow-brand: 0 14px 34px rgba(11, 36, 71, .28);

  /* ---------- Layout ---------- */
  --container: 1200px;
  --container-wide: 1400px;
  --container-narrow: 860px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: .18s;
  --dur: .3s;
  --dur-slow: .55s;

  /* ---------- Z ---------- */
  --z-header: 1000;
  --z-dropdown: 1100;
  --z-modal: 1200;
  --z-toast: 1300;
}

/* ---------- Dark mode (optional / opt-in) ---------- */
[data-theme="dark"] {
  --ink: #f4f1e8;
  --ink-2: #d9d3c4;
  --muted: #a9a596;
  --line: #2a2b33;
  --line-2: #22232b;
  --surface: #14161d;
  --surface-2: #10121a;
  --surface-3: #1c1f29;
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .55);
}