@font-face{font-family:'Cairo';font-style:normal;font-weight:200 1000;font-display:swap;src:url('../../fonts/cairo-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cairo';font-style:normal;font-weight:200 1000;font-display:swap;src:url('../../fonts/cairo-arabic.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF;}
/* ==========================================================================
   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:    #0E86C8;
  --thui-navy:    #12365F;
  --thui-amber:   #EFA400;
  --thui-teal:    #17A078;
  --thui-orange:  #E8691E;
  --thui-magenta: #C40055;
  --thui-yellow:  #F2B21B;

  /* --- Neutrals --- */
  --thui-n-0:  #ffffff;
  --thui-n-50: #FAF7F2;
  --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:     #17A078;
  --thui-color-focus:        var(--thui-amber);

  /* --- Category accents (destination cards, badges) ---
     THN1-DS1: every accent now resolves inside the locked brand identity
     (navy / blue / teal / amber / orange). `culture` and `night` previously
     resolved to --thui-magenta (#C40055), which is not in that identity, so a
     "Historical" tour chip rendered magenta on a card sitting next to teal and
     blue chips. --thui-magenta itself is left defined: it is still a primitive
     and is referenced by .thui-card__fav. */
  --thui-cat-diving:  var(--thui-blue);
  --thui-cat-desert:  var(--thui-orange);
  --thui-cat-culture: var(--thui-navy);
  --thui-cat-sea:     var(--thui-teal);
  --thui-cat-night:   var(--thui-color-ink);

  /* --- Typography --- */
  --thui-font-sans: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --thui-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  --thui-font-serif: "PT Serif", Georgia, serif;
  --thui-font-display: "Cairo", system-ui, "Segoe UI", Roboto, sans-serif;

  /* Type scale. THN1-DS1: base/sm/md raised one step. 13px body copy and 13px
     button labels read as "small print" next to peer international travel
     platforms, and the brief is explicit that metadata must not be tiny and
     button and link labels must be comfortably readable. 16/14/12 is the
     readable floor; xs stays 12 and is reserved for true micro-labels
     (eyebrows, chips, legal), never for body copy or controls. */
  --thui-fs-xs:   0.75rem;    /* 12 - micro labels only */
  --thui-fs-sm:   0.875rem;   /* 14 - UI text, metadata, controls */
  --thui-fs-base: 1rem;       /* 16 - body copy */
  --thui-fs-md:   1.125rem;   /* 18 - lede */
  --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;

  /* --- Controls ---
     One height per control size, shared by buttons, inputs, selects and
     quantity steppers so a button and the field beside it always line up.
     48px is the comfortable default and clears the 44px tap-target minimum. */
  --thui-control-h-sm: 40px;
  --thui-control-h:    48px;
  --thui-control-h-lg: 54px;
  --thui-control-pad-x: 0.9rem;
  --thui-control-border: 1px;

  /* --- Section rhythm ---
     Every full-width band uses this so vertical spacing is one decision, not a
     per-template guess. 48px at 390 up to 80px on desktop. */
  --thui-section-y: clamp(3rem, 2rem + 3vw, 5rem);
  --thui-section-y-tight: clamp(2rem, 1.4rem + 2vw, 3rem);

  /* --- 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; }
}