/* ==========================================================================
   UncleTrips — Design tokens
   Single source of truth for colour, type, spacing, radius, shadow, layout.
   Every page in the UncleTrips frontend should load this file first.
   ========================================================================== */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Colour: brand ---------------------------------------------------- */
  --c-navy-950: #05162c;   /* hero base / footer */
  --c-navy-900: #071937;   /* headings, primary text */
  --c-navy-800: #0c2546;   /* active chip, dark surfaces */
  --c-navy-700: #04243d;   /* hero photo blend colour */
  --c-navy-600: #1d3a63;
  --c-navy-100: #eef2f9;   /* cool tint (icon circles) */

  --c-orange-600: #e2581a; /* hover / pressed */
  --c-orange-500: #f26a21; /* primary CTA — use sparingly */
  --c-orange-400: #fa952f; /* rating stars */
  --c-orange-100: #fdf0e7; /* warm tint (icon circles) */

  --c-blue-600: #1466c3;   /* secondary icon accent (search, categories) */

  --c-cream-100: #faf3ec;  /* Ask Uncle band */

  /* ---- Colour: neutrals -------------------------------------------------- */
  --c-white: #ffffff;
  --c-grey-50: #f6f7f9;
  --c-grey-100: #eef0f4;   /* inactive chips */
  --c-grey-200: #e2e6ec;   /* borders */
  --c-grey-300: #cfd5de;
  --c-grey-500: #6b7587;   /* secondary text */
  --c-grey-600: #4c5668;
  --c-text: var(--c-navy-900);
  --c-text-muted: var(--c-grey-500);
  --c-border: var(--c-grey-200);
  --c-success: #2e9e6a;

  /* ---- Typography -------------------------------------------------------- */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto,
    "Noto Sans", "Noto Sans Arabic", Tahoma, "Helvetica Neue", Arial, sans-serif;

  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-h3: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  --fs-h2: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  --fs-h1: clamp(2.125rem, 1.25rem + 3.6vw, 3.875rem);
  --fs-lead: clamp(1rem, 0.9rem + 0.45vw, 1.3125rem);

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

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.55;

  /* ---- Spacing (4px base) ------------------------------------------------ */
  --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;
  --section-gap: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);

  /* ---- Radius ------------------------------------------------------------ */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---- Shadow (restrained) ---------------------------------------------- */
  --sh-xs: 0 1px 2px rgba(7, 25, 55, 0.06);
  --sh-sm: 0 2px 8px rgba(7, 25, 55, 0.07);
  --sh-md: 0 8px 24px rgba(7, 25, 55, 0.1);
  --sh-lg: 0 18px 44px rgba(5, 22, 44, 0.22);

  /* ---- Layout ------------------------------------------------------------ */
  --container: 1240px;
  --gutter: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --header-h: 72px;
  --bottom-nav-h: 64px;
  --tap: 44px;             /* minimum touch target */

  /* Breakpoints (reference only — CSS custom properties can't be used
     inside media queries):  sm 480 · md 768 · lg 1100 · xl 1280 */

  /* ---- Motion ------------------------------------------------------------ */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 180ms;

  /* ---- Layers ------------------------------------------------------------ */
  --z-header: 50;
  --z-dropdown: 60;
  --z-bottom-nav: 70;
  --z-drawer: 80;
  --z-toast: 90;
}

@media (max-width: 767px) {
  :root {
    --header-h: 60px;
  }
}