/* ============================================================================
   Airport Parking Service — design tokens
   ----------------------------------------------------------------------------
   Direction: "Handover". Light, airy, generously rounded, photography-led,
   with a single deep-navy action colour.

   Every value the rest of the CSS uses is declared here. If you want to
   restyle the site, this is the only file you should need to open.
   ========================================================================= */

:root {

  /* ── Colour ───────────────────────────────────────────────────────────────
     Deep navy leads. One warm accent stops the palette feeling cold and
     corporate; it is used on roughly 2% of the surface and never for body text.
     ---------------------------------------------------------------------- */

  --navy-900: #0F2557;   /* primary buttons, dark band, footer, photo overlays */
  --navy-800: #16305F;
  --navy-700: #1B3A7A;   /* hover, secondary dark surfaces */
  --navy-600: #23499A;

  --action:         #1F5FE0;  /* links, focus rings, active tab */
  --action-hover:   #1A4FBE;
  --action-subtle:  #EDF3FE;  /* tinted button/link background */

  --sky-100: #DCE9FB;    /* chips, badges, icon backplates */
  --sky-50:  #F0F6FE;

  --backdrop: #EAF0F8;   /* the pale tint the rounded blocks float on */
  --paper:    #FFFFFF;   /* default surface, cards, booking bar */
  --mist:     #F5F8FC;   /* alternating section band */

  --warm:        #F2A868;  /* "Most popular" badge, price highlight */
  --warm-soft:   #FDF0E3;
  --warm-ink:    #8A4B12;  /* the only accessible way to set warm as TEXT */

  --verified:      #0E7A5F;  /* secure / insured / paid ticks */
  --verified-soft: #E6F4EF;

  --danger:      #B42318;
  --danger-soft: #FEF3F2;

  --ink:       #0B1320;  /* headings, primary text */
  --ink-body:  #253449;  /* long-form body copy, softer than headings */
  --ink-muted: #5C6B80;  /* labels, captions, secondary text */
  --ink-faint: #8A97A8;  /* placeholder text, disabled */

  --line:        #E2E8F1;  /* hairline rules, card borders */
  --line-strong: #CBD5E3;
  --line-dark:   rgba(255, 255, 255, 0.14);  /* rules on navy */

  /* Text colours for use on navy surfaces */
  --on-dark:        #FFFFFF;
  --on-dark-muted:  rgba(255, 255, 255, 0.72);
  --on-dark-faint:  rgba(255, 255, 255, 0.52);

  /* Scrim laid over photography so overlaid text stays legible whatever
     image is supplied. Applied as a gradient, strongest where text sits. */
  --scrim-hero: linear-gradient(
      100deg,
      rgba(8, 20, 45, 0.82) 0%,
      rgba(8, 20, 45, 0.62) 34%,
      rgba(8, 20, 45, 0.18) 62%,
      rgba(8, 20, 45, 0.30) 100%);
  --scrim-card: linear-gradient(
      to top,
      rgba(8, 20, 45, 0.86) 0%,
      rgba(8, 20, 45, 0.42) 42%,
      rgba(8, 20, 45, 0.02) 78%);


  /* ── Typography ───────────────────────────────────────────────────────────
     Display : Outfit           — geometric, confident, h1/h2 and price figures
     Body    : Plus Jakarta Sans — humanist grotesque, everything else
     Mono    : IBM Plex Mono    — booking references and vehicle registrations
                                  ONLY. Not a decorative motif.
     ---------------------------------------------------------------------- */

  --font-display: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Fluid scale, 1.25 ratio. Min values hold at 360px, max at 1280px. */
  --text-2xs: 0.6875rem;                                    /* 11px  micro-labels */
  --text-xs:  0.75rem;                                      /* 12px  eyebrows */
  --text-sm:  0.8125rem;                                    /* 13px  captions */
  --text-base: 0.9375rem;                                   /* 15px  UI default */
  --text-md:  clamp(1rem,     0.97rem + 0.15vw, 1.0625rem); /* 16–17 body */
  --text-lg:  clamp(1.0625rem, 1rem + 0.3vw,   1.1875rem);  /* 17–19 lead-in */
  --text-xl:  clamp(1.25rem,  1.15rem + 0.45vw, 1.5rem);    /* 20–24 h4 */
  --text-2xl: clamp(1.5rem,   1.3rem + 0.9vw,   2rem);      /* 24–32 h3 */
  --text-3xl: clamp(1.875rem, 1.5rem + 1.6vw,   2.875rem);  /* 30–46 h2 */
  /* The two largest sizes have lower minimums than they did. On a 360px phone
     there is only ~308px of content width, and at the old 44px minimum the
     hero line "Catch the flight." measured ~374px — so it wrapped, breaking
     the deliberate two-line headline into three ragged lines. Desktop sizes
     are unchanged; only the small-screen floor moved. */
  --text-4xl: clamp(2rem,     1.6rem + 2.8vw,   3.75rem);   /* 32–60 h1 */
  --text-5xl: clamp(2.25rem,  1.8rem + 4.2vw,   4.75rem);   /* 36–76 hero */

  --leading-tight:   0.98;   /* big display headlines */
  --leading-snug:    1.15;   /* section headings */
  --leading-normal:  1.45;   /* UI text */
  --leading-relaxed: 1.65;   /* long-form body copy */

  --tracking-display: -0.03em;  /* Outfit needs pulling in at large sizes */
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-label:   0.1em;    /* uppercase micro-labels */

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;


  /* ── Spacing ──────────────────────────────────────────────────────────────
     A 4px base. Section rhythm is deliberately generous — the references all
     breathe, and cramping the spacing is the fastest way to lose the feel.
     ---------------------------------------------------------------------- */

  --space-1:  0.25rem;   /*  4 */
  --space-2:  0.5rem;    /*  8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */
  --space-24: 6rem;      /* 96 */
  --space-32: 8rem;      /* 128 */

  /* ── Vertical rhythm ──────────────────────────────────────────────────
     Fluid, so the same block breathes on a desktop and stays compact on a
     phone. Several of these were previously fixed values — a 64px band
     padding that looked generous at 1440px ate a third of the screen at
     375px, and a fixed 48px under every section heading was heavy on mobile
     and mean on a large display.
     ------------------------------------------------------------------- */

  /* Between major page sections */
  --section-y: clamp(3.5rem, 2rem + 6vw, 8rem);

  /* Under a section heading, before its content */
  --stack-lg: clamp(2rem, 1.4rem + 2.4vw, 3rem);

  /* Between related blocks inside a section */
  --stack-md: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);

  /* Inside full-width bands — the CTA strip and the footer */
  --band-y: clamp(2.75rem, 1.8rem + 3.6vw, 4.5rem);

  /* ── Hero / booking bar geometry ──────────────────────────────────────
     Two separate distances, and they must not be the same value:

       --bar-overlap    how far the bar rides UP over the hero photo
       --bar-clearance  clear space between the hero's buttons and the top
                        of the bar's tabs

     The hero's bottom padding is overlap + clearance. When it was just the
     overlap the two cancelled exactly, leaving 0px, and the "Book parking" /
     "Manage booking" tabs sat flush against the hero buttons above them.
     ------------------------------------------------------------------- */

  --bar-overlap:   var(--space-12);
  --bar-clearance: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);

  /* Horizontal page gutter */
  --gutter: clamp(1rem, 0.5rem + 2.2vw, 2.5rem);

  /* Inset of the floating rounded blocks from the viewport edge */
  --inset: clamp(0.75rem, 0.25rem + 1.6vw, 2rem);

  --container:        1280px;
  --container-narrow: 940px;
  --container-text:   68ch;   /* comfortable measure for long-form copy */


  /* ── Radii ────────────────────────────────────────────────────────────────
     Generous everywhere — this is the single most characteristic property of
     the reference designs.
     ---------------------------------------------------------------------- */

  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;   /* cards, the booking bar */
  --radius-xl:  28px;   /* large cards */
  --radius-2xl: clamp(20px, 1rem + 1.4vw, 32px);  /* hero and photo blocks */
  --radius-pill: 999px; /* every button */


  /* ── Elevation ────────────────────────────────────────────────────────────
     Soft and wide rather than dark and tight. Tinted with the navy hue so
     shadows sit in the palette instead of going grey.
     ---------------------------------------------------------------------- */

  --shadow-xs:   0 1px 2px rgba(15, 37, 87, 0.06);
  --shadow-sm:   0 2px 8px rgba(15, 37, 87, 0.06);
  --shadow-card: 0 4px 20px rgba(15, 37, 87, 0.07), 0 1px 3px rgba(15, 37, 87, 0.05);
  --shadow-lift: 0 14px 34px rgba(15, 37, 87, 0.13), 0 3px 8px rgba(15, 37, 87, 0.06);
  --shadow-bar:  0 18px 44px rgba(9, 24, 60, 0.18), 0 4px 12px rgba(9, 24, 60, 0.08);
  --shadow-pop:  0 24px 60px rgba(9, 24, 60, 0.22);

  --ring: 0 0 0 3px rgba(31, 95, 224, 0.32);  /* focus */


  /* ── Motion ───────────────────────────────────────────────────────────────
     Every duration here resolves to 0 under prefers-reduced-motion, so
     components never need to check for it individually.
     ---------------------------------------------------------------------- */

  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;
  --duration-hero: 700ms;


  /* ── Layering ─────────────────────────────────────────────────────────── */

  --z-base:    1;
  --z-raised:  10;
  --z-barbar:  20;   /* the booking bar, which straddles section edges */
  --z-header:  50;
  --z-drawer:  60;
  --z-overlay: 70;
  --z-toast:   80;


  /* ── Image slots ──────────────────────────────────────────────────────────
     Photography is supplied by the client. Each slot below is a single place
     to point at a file; until one is set the placeholder gradient shows, so
     nothing ever renders as a broken image.

     Set these in this block only — see IMAGES.md for the required aspect
     ratio and pixel size of each slot.

       --img-hero-home: url('/assets/img/hero-home.jpg');

     `*-pos` controls the crop, so you can nudge framing without touching
     any markup. Values are standard object-position / background-position.
     ---------------------------------------------------------------------- */

  --img-placeholder:
      linear-gradient(140deg, #16305F 0%, #0F2557 46%, #091834 100%);

  /* ── Page heroes ──────────────────────────────────────────────────────
     Each already points at its expected filename. Drop the file into
     public_html/assets/img/ with that exact name and it appears — no CSS
     edit needed. Until the file exists the gradient above shows instead,
     which looks deliberate rather than broken.
     ------------------------------------------------------------------- */

  --img-hero-home:        url('/assets/img/hero-home.jpg');
  --img-hero-home-pos:    50% 50%;

  --img-hero-options:     url('/assets/img/hero-parking-options.jpg');
  --img-hero-options-pos: 50% 50%;

  --img-hero-how:         url('/assets/img/hero-how-it-works.jpg');
  --img-hero-how-pos:     50% 50%;

  --img-hero-pricing:     url('/assets/img/hero-pricing.jpg');
  --img-hero-pricing-pos: 50% 50%;

  --img-hero-about:       url('/assets/img/hero-about.jpg');
  --img-hero-about-pos:   50% 50%;

  --img-hero-reviews:     url('/assets/img/hero-reviews.jpg');
  --img-hero-reviews-pos: 50% 50%;

  --img-hero-faqs:        url('/assets/img/hero-faqs.jpg');
  --img-hero-faqs-pos:    50% 50%;

  --img-hero-contact:     url('/assets/img/hero-contact.jpg');
  --img-hero-contact-pos: 50% 50%;

  /* ── Parking options ──────────────────────────────────────────────────
     One photo per service. Used twice: the small cards on the home page
     and quote page, and the large blocks on the Parking Options page. */

  --img-service-meet:     url('/assets/img/service-meet-and-greet.jpg');
  --img-service-park:     url('/assets/img/service-park-and-ride.jpg');
  --img-service-short:    url('/assets/img/service-short-stay.jpg');
  --img-service-long:     url('/assets/img/service-long-stay.jpg');

  /* ── Bento grid — home page and How It Works ────────────────────────── */

  --img-bento-compound:   url('/assets/img/bento-compound.jpg');
  --img-bento-handover:   url('/assets/img/bento-handover.jpg');
  --img-bento-shuttle:    url('/assets/img/bento-shuttle.jpg');
}


/* ── Reduced motion ─────────────────────────────────────────────────────────
   Collapsing the duration tokens disables every transition and animation in
   one place, rather than relying on each component to remember.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration-base: 0.01ms;
    --duration-slow: 0.01ms;
    --duration-hero: 0.01ms;
  }
}