/* ==========================================================================
   Legacy Aviation Group — Design tokens
   Palette + type scale mirror the live Webflow build. Values marked LUX are
   the refinements that push the feel more premium without changing the look.
   ========================================================================== */

@font-face {
  font-family: "Switzer";
  src: url("../assets/fonts/Switzer-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ethic New";
  src: url("../assets/fonts/EthicNew-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Ethic New";
  src: url("../assets/fonts/EthicNew-SemiboldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

:root {
  /* The site has no dark theme — without this, a visitor with system dark
     mode on gets a light page but dark-themed native chrome (the <select>
     dropdown popup, scrollbars, autofill highlight), since those follow the
     OS preference by default when a page doesn't declare one. */
  color-scheme: light;

  /* --- Brand ------------------------------------------------------------- */
  --brand-light: #009ed2;
  --brand-medium: #006d91;
  --brand-dark: #00445a;

  /* --- Neutrals --------------------------------------------------------- */
  --black: #000;
  --white: #fff;
  --neutral-darkest: #000;
  --neutral-dark: #3d3c44;
  --neutral-medium: #807373;
  --neutral: #7f7f7f;
  --neutral-light: #f0e5d8;
  --neutral-lightest: #f1f0ea;

  /* --- Alpha ramps ------------------------------------------------------ */
  --white-90: rgb(255 255 255 / 0.9);
  --white-70: rgb(255 255 255 / 0.7);
  --white-50: rgb(255 255 255 / 0.5);
  --white-40: rgb(255 255 255 / 0.4);
  --white-30: rgb(255 255 255 / 0.3);
  --white-15: rgb(255 255 255 / 0.15);
  --white-10: rgb(255 255 255 / 0.1);
  --white-05: rgb(255 255 255 / 0.05);
  --dark-70: rgb(61 60 68 / 0.7);
  --dark-50: rgb(61 60 68 / 0.5);
  --dark-30: rgb(61 60 68 / 0.3);
  --dark-15: rgb(61 60 68 / 0.15);
  --dark-10: rgb(61 60 68 / 0.1);
  --dark-05: rgb(61 60 68 / 0.05);

  /* --- Type ------------------------------------------------------------- */
  --font-body: "Switzer", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Switzer", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-accent: "Ethic New", "Didot", Georgia, serif;

  /* Fluid display scale — clamps replace the live site's fixed rem sizes so
     the ultralight headlines keep their proportions at every width. */
  --h1: clamp(3rem, 7.4vw, 6.375rem);
  --h2: clamp(2.5rem, 5.2vw, 4.5rem);
  --h3: clamp(2rem, 4vw, 3.5rem);
  --h4: clamp(1.5rem, 2.4vw, 2rem);
  --h5: clamp(1.25rem, 1.8vw, 1.625rem);
  --accent-size: clamp(2.75rem, 5vw, 5rem);

  --text-lg: clamp(1.125rem, 1.6vw, 1.625rem);
  --text-md: 1.25rem;
  --text-rg: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;

  --w-display: 200; /* ultralight — the signature of the brand */
  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;

  /* LUX — optical tracking. Big ultralight type needs negative tracking to
     read as couture rather than as default browser text. */
  --track-display: -0.03em;
  --track-h2: -0.022em;
  --track-body: 0;
  --track-eyebrow: 0.18em; /* LUX — was 1px; wider tracking reads more luxury */

  --leading-display: 1.08;
  --leading-heading: 1.15;
  --leading-body: 1.6; /* LUX — was 1.5; airier body copy */

  /* --- Space ------------------------------------------------------------ */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  /* LUX — section rhythm opened up from 7rem / 5rem / 3rem */
  --section-lg: clamp(5rem, 9vw, 9rem);
  --section-md: clamp(4rem, 6vw, 6.5rem);
  --section-sm: clamp(2.5rem, 4vw, 4rem);

  --container: 85rem;
  --container-narrow: 52rem;
  --gutter: clamp(1.25rem, 4vw, 4rem);

  /* --- Lines & radii ---------------------------------------------------- */
  --hairline: 1px;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-pill: 999px;

  /* --- Motion ----------------------------------------------------------- */
  /* LUX — long, decelerating curves. Luxury motion is slow to start moving
     and slow to settle; nothing snaps. */
  --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  /* Steeper decelerate, for things that travel a long way and must not feel
     like they are coasting — the slider's jet, mainly. */
  --ease-glide: cubic-bezier(0.16, 1, 0.3, 1);
  /* A single soft overshoot. Used sparingly: buttons and the active dot. */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 220ms;
  --dur-md: 480ms;
  --dur-slow: 900ms;
  --dur-reveal: 1200ms;

  /* Hero beat cross-fade. Its own token rather than --dur-slow because it is
     doing a different job: an Apple TV aerial screensaver dissolve, which is
     far longer than any UI transition on the site and should not drag anything
     else along if it is retuned. The headline fades out and back in half this,
     so the two together fill exactly one dissolve. main.js reads the same
     numbers — keep them in step. */
  --dur-hero-dissolve: 1600ms;

  /* Featured-aircraft slider.
     This used to mirror the live build exactly (data-duration="900",
     data-easing="ease"). It now deliberately diverges: the same left-to-right
     move, but decelerating properly, with the jet and the name travelling on
     their own timings instead of rigidly with the track. `ease` in particular
     is what made the original read as a stock carousel. */
  --dur-slide: 820ms;
  --ease-slide: var(--ease-glide);
  /* The jet trails the track slightly and settles after it. */
  --dur-jet: 1000ms;
  --dur-ac-label: 640ms;

  --nav-h: 6.25rem;
  --z-nav: 900;
  --z-overlay: 800;
  /* Above the nav and the phone action bar — both sit at --z-nav, and a modal
     that they paint over is not a modal. */
  --z-modal: 1000;
}