/* ============================================================
   Roxana Travel — Design Tokens
   Brand palette extracted from the Roxana Travel logo
   (blue -> magenta -> purple gradient).
   ============================================================ */

:root {
  /* ---------- Brand ---------- */
  --brand-purple: #6a4bd1;
  --brand-purple-600: #5b3ec0;
  --brand-purple-700: #4c33a3;
  --brand-magenta: #ec1e9b;
  --brand-magenta-600: #d3128a;
  --brand-magenta-700: #b30f74;
  --brand-blue: #2e7de0;
  --brand-blue-600: #2470cf;
  --brand-gradient: linear-gradient(135deg, #2e7de0 0%, #ec1e9b 55%, #6a4bd1 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(46,125,224,.12) 0%, rgba(236,30,155,.12) 55%, rgba(106,75,209,.12) 100%);

  /* ---------- Neutrals (light) ---------- */
  --ink: #14121f;
  --ink-2: #3a3654;
  --muted: #6b6880;
  --line: #e7e5f0;
  --line-2: #f0eef8;
  --surface: #ffffff;
  --surface-2: #f7f6fc;
  --surface-3: #f0eefa;

  /* ---------- Semantic ---------- */
  --success: #1fa971;
  --warning: #f5a524;
  --danger: #e5484d;
  --info: #2e7de0;
  --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;

  --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(20, 18, 31, .06);
  --shadow-sm: 0 2px 8px rgba(20, 18, 31, .06);
  --shadow-md: 0 8px 24px rgba(20, 18, 31, .08);
  --shadow-lg: 0 18px 48px rgba(20, 18, 31, .12);
  --shadow-xl: 0 30px 70px rgba(20, 18, 31, .16);
  --shadow-brand: 0 14px 34px rgba(106, 75, 209, .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: #f4f2fb;
  --ink-2: #d9d6ea;
  --muted: #a9a5be;
  --line: #2a2540;
  --line-2: #221e37;
  --surface: #171426;
  --surface-2: #12101f;
  --surface-3: #1f1b33;
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .55);
}