/* ==========================================================================
   THUI — Design Tokens  (Travel Hub UI)
   Single source of truth for color, type, space, radius, shadow, motion.
   Everything else references these variables. Retune the brand here once.
   RTL-ready: components use CSS logical properties; tokens are direction-agnostic.
   ========================================================================== */
:root {
  /* --- Brand primitives (from the Travel Hub Egypt logo) --- */
  --thui-blue:    #1279BD;
  --thui-navy:    #184B7C;
  --thui-amber:   #F4A31D;
  --thui-teal:    #17A18A;
  --thui-orange:  #E9702B;
  --thui-magenta: #C81C6E;
  --thui-yellow:  #F6C63D;

  /* --- Neutrals --- */
  --thui-n-0:  #ffffff;
  --thui-n-50: #F7FAFC;
  --thui-n-100:#EEF3F8;
  --thui-n-200:#E1E8F0;
  --thui-n-300:#CBD6E2;
  --thui-n-400:#9AA8B8;
  --thui-n-500:#6B7B8C;
  --thui-n-600:#4A5A6B;
  --thui-n-700:#33424F;
  --thui-n-800:#1E2A35;
  --thui-n-900:#12181F;

  /* --- Semantic color roles (what components actually use) --- */
  --thui-color-primary:      var(--thui-teal);     /* trust / booking */
  --thui-color-primary-ink:  #0C5C4C;
  --thui-color-accent:       var(--thui-amber);    /* CTA / conversion */
  --thui-color-accent-ink:   #3D2A02;
  --thui-color-ink:          #12263A;              /* headings/body */
  --thui-color-text:         #22303C;
  --thui-color-text-muted:   #5A6B7B;
  --thui-color-bg:           var(--thui-n-50);
  --thui-color-surface:      var(--thui-n-0);
  --thui-color-border:       var(--thui-n-200);
  --thui-color-success:      #1FA855;
  --thui-color-danger:       #D64545;
  --thui-color-whatsapp:     #25A95A;
  --thui-color-focus:        var(--thui-amber);

  /* --- Category accents (destination cards, badges) --- */
  --thui-cat-diving:  var(--thui-blue);
  --thui-cat-desert:  var(--thui-orange);
  --thui-cat-culture: var(--thui-magenta);
  --thui-cat-sea:     var(--thui-teal);

  /* --- Typography --- */
  --thui-font-sans: "HK Grotesk", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --thui-font-display: "Fraunces", Georgia, "Times New Roman", serif;

  --thui-fs-xs:   0.75rem;    /* 12 */
  --thui-fs-sm:   0.8125rem;  /* 13 */
  --thui-fs-base: 0.9375rem;  /* 15 */
  --thui-fs-md:   1.0625rem;  /* 17 */
  --thui-fs-lg:   1.25rem;    /* 20 */
  --thui-fs-xl:   1.5rem;     /* 24 */
  --thui-fs-2xl:  clamp(1.5rem, 1rem + 2vw, 2rem);
  --thui-fs-3xl:  clamp(1.9rem, 1.1rem + 3.2vw, 2.75rem);
  --thui-fs-hero: clamp(2.1rem, 1rem + 4.5vw, 3.5rem);

  --thui-fw-normal: 400;
  --thui-fw-medium: 500;
  --thui-fw-semibold: 600;
  --thui-fw-bold: 700;
  --thui-fw-extrabold: 800;

  --thui-lh-tight: 1.12;
  --thui-lh-snug: 1.3;
  --thui-lh-normal: 1.55;
  --thui-ls-tight: -0.015em;

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

  /* --- Radius --- */
  --thui-radius-sm: 8px;   --thui-radius-md: 12px;  --thui-radius-lg: 16px;
  --thui-radius-xl: 22px;  --thui-radius-full: 999px;

  /* --- Shadows (soft, premium) --- */
  --thui-shadow-sm: 0 6px 18px -10px rgba(18,38,58,.22);
  --thui-shadow-md: 0 14px 34px -16px rgba(18,38,58,.30);
  --thui-shadow-lg: 0 26px 56px -24px rgba(18,38,58,.38);

  /* --- Motion --- */
  --thui-ease: cubic-bezier(.2,.7,.3,1);
  --thui-dur-fast: .14s;
  --thui-dur: .22s;
  --thui-dur-slow: .4s;

  /* --- Layout --- */
  --thui-container: 1200px;
  --thui-container-wide: 1320px;
  --thui-gutter: clamp(1rem, 0.5rem + 2vw, 1.5rem);

  /* --- Z-index scale --- */
  --thui-z-base: 1; --thui-z-sticky: 100; --thui-z-header: 200;
  --thui-z-overlay: 900; --thui-z-modal: 1000; --thui-z-toast: 1100;
}

/* Respect reduced-motion globally */
@media (prefers-reduced-motion: reduce) {
  :root { --thui-dur-fast: 0s; --thui-dur: 0s; --thui-dur-slow: 0s; }
}