/* ==========================================================================
   JETT — Design Tokens
   --------------------------------------------------------------------------
   BRANDING IS JETT'S OWN, UNCHANGED.
     · Colours are lifted verbatim from jett.com.jo production CSS.
     · Typefaces are the real Myriad Pro + JF Flat files, self-hosted from
       the live site (src/assets/fonts/), not substitutes.
     · The logo is JETT's actual artwork (src/assets/img/jett-logo.png).
     · Photography is JETT's own fleet imagery.

   LAYOUT follows the reference app: a light, photographic, card-led flow.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Typefaces — JETT's real fonts, exactly as the live site serves them.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'MyriadPro';
  src: url('../assets/fonts/MyriadPro-Regular.woff2') format('woff2'),
       url('../assets/fonts/MyriadPro-Regular.woff') format('woff'),
       url('../assets/fonts/MyriadPro-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'JFFlat';
  src: url('../assets/fonts/JFFlat-Regular.woff2') format('woff2'),
       url('../assets/fonts/JFFlat-Regular.woff') format('woff'),
       url('../assets/fonts/JFFlat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root {
  /* ======================================================================
     BRAND COLOURS — verbatim from jett.com.jo
     ====================================================================== */
  --jett-navy: #0b3b4e;      /* primary   — headers, brand surfaces        */
  --jett-petrol: #00648b;    /* secondary — links, accents, gradients      */
  --jett-orange: #ff6000;    /* accent    — primary calls to action        */
  --jett-cyan: #05b0ff;      /* highlight — hover, gradient terminus       */

  /* Tints and shades derived from the four brand values above. Nothing here
     introduces a new hue; each ramp is the brand colour lightened/darkened. */
  --navy-900: #06222d;
  --navy-800: #082e3d;
  --navy-700: #0b3b4e;
  --navy-600: #14536b;
  --navy-500: #1d6b89;
  --navy-100: #e5eff3;       /* the live site's own tint value             */
  --navy-050: #f2f7f9;

  --petrol-700: #004a68;
  --petrol-600: #00648b;
  --petrol-500: #0080ae;
  --petrol-300: #05b0ff;
  --petrol-100: #e2f4fd;

  --orange-700: #c74a00;     /* AA-safe orange text on white (~4.6:1)      */
  --orange-600: #e65600;
  --orange-500: #ff6000;
  --orange-400: #ff7a26;
  --orange-100: #fff0e6;

  /* Neutrals — 6 steps, replacing the live site's twelve near-duplicates.  */
  --n-000: #ffffff;
  --n-050: #f7f9fa;
  --n-100: #eef2f4;
  --n-200: #dfe5e9;
  --n-400: #a8b4bb;
  --n-600: #66757d;
  --n-800: #2b3a42;

  --ok-500: #1faa63;
  --warn-500: #e8a317;
  --danger-500: #d84040;

  /* ======================================================================
     SEMANTIC — light surfaces, matching the reference app
     ====================================================================== */
  --bg-page: #f4f6f7;
  --bg-sheet: var(--n-000);
  --surface: var(--n-000);
  --surface-sunken: var(--n-050);
  --surface-brand: var(--jett-navy);
  --hairline: rgba(11, 59, 78, 0.10);
  --hairline-strong: rgba(11, 59, 78, 0.20);

  --text-1: #10262f;
  --text-2: #566a73;
  --text-3: #8a9aa2;
  --text-on-brand: #ffffff;
  --text-on-accent: #ffffff;

  /* Orange is the conversion path — one primary action per screen.        */
  --action-primary: var(--jett-orange);
  --action-primary-press: var(--orange-600);
  --action-brand: var(--jett-navy);
  --focus-ring: var(--jett-petrol);

  --grad-brand: linear-gradient(135deg, var(--navy-700) 0%, var(--navy-600) 100%);
  --grad-accent: linear-gradient(135deg, var(--orange-500) 0%, var(--orange-400) 100%);
  --grad-petrol: linear-gradient(135deg, var(--petrol-600) 0%, var(--petrol-300) 100%);
  --grad-scrim: linear-gradient(180deg, rgba(6, 34, 45, 0) 0%, rgba(6, 34, 45, 0.82) 100%);
  --grad-sky: linear-gradient(180deg, #1a7fb5 0%, #7cc4e4 55%, #f4f6f7 100%);

  /* ======================================================================
     TYPOGRAPHY
     ====================================================================== */
  --font-latin: 'MyriadPro', 'Myriad Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-arabic: 'JFFlat', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --font-ui: var(--font-latin), var(--font-arabic);
  --font-numeric: var(--font-latin);

  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.9375rem;
  --fs-lg: 1.0625rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.9375rem;
  --fs-4xl: 2.375rem;
  --fs-5xl: 3rem;

  /* Myriad Pro and JF Flat each ship ONE weight. Faux-bolding Arabic damages
     the joins, so hierarchy is carried by size, colour and letter-spacing —
     never by a synthesised bold. --fw-bold stays 400 deliberately.        */
  --fw-regular: 400;
  --fw-bold: 400;

  --lh-tight: 1.15;
  --lh-snug: 1.32;
  --lh-normal: 1.55;
  --ls-wide: 0.16em;   /* the reference's letterspaced small-caps tagline  */

  /* ======================================================================
     SPACE · RADII · ELEVATION · MOTION
     ====================================================================== */
  --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;

  --r-sm: 8px;   --r-md: 12px;  --r-lg: 16px;
  --r-xl: 22px;  --r-2xl: 28px; --r-3xl: 36px; --r-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(11, 59, 78, 0.06);
  --shadow-sm: 0 2px 8px rgba(11, 59, 78, 0.08);
  --shadow-md: 0 8px 24px -8px rgba(11, 59, 78, 0.18);
  --shadow-lg: 0 20px 48px -16px rgba(11, 59, 78, 0.28);
  --shadow-accent: 0 10px 26px -10px rgba(255, 96, 0, 0.5);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 150ms; --dur-base: 260ms; --dur-slow: 420ms;

  --app-max-w: 430px;
  --gutter: var(--sp-5);
  --tabbar-h: 76px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  --z-base: 1; --z-sticky: 20; --z-header: 30; --z-tabbar: 40;
  --z-sheet: 60; --z-toast: 80;
}

/* Sections printed on the brand navy — inverts the text scale. */
.on-brand {
  --text-1: #ffffff;
  --text-2: rgba(255, 255, 255, 0.76);
  --text-3: rgba(255, 255, 255, 0.52);
  --hairline: rgba(255, 255, 255, 0.14);
  --hairline-strong: rgba(255, 255, 255, 0.26);
  --surface: rgba(255, 255, 255, 0.08);
  color: var(--text-1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; }
}