/* ==========================================================
   THEME — edit this file to restyle the whole site.
   Colors, fonts, spacing and motion all live here.
   ========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,700&family=Roboto+Mono:ital,wght@0,400;0,500;1,300;1,500&display=swap");

/* ---- Noir Pro (headings) ----
   Safari also matches a locally installed font by its PostScript name ("NoirPro-Bold"); Chrome only
   matches family names, which is why headings fell back to Poppins in Chrome. Declaring the face with
   local() names works in both, and the url() sources load the licensed web font files once they are
   dropped into /fonts (see fonts/README.txt). */
@font-face {
  font-family: "Noir Pro"; font-weight: 700; font-style: normal; font-display: swap;
  src: local("Noir Pro Bold"), local("NoirPro-Bold"),
       url("../fonts/NoirPro-Bold.woff2") format("woff2"), url("../fonts/NoirPro-Bold.woff") format("woff");
}
@font-face {
  font-family: "Noir Pro"; font-weight: 700; font-style: italic; font-display: swap;
  src: local("Noir Pro Bold Italic"), local("NoirPro-BoldItalic"),
       url("../fonts/NoirPro-BoldItalic.woff2") format("woff2"), url("../fonts/NoirPro-BoldItalic.woff") format("woff");
}

:root {
  /* ---- Brand colors (Absolute Motors brand book: Jet Black #262626, Gunmetal #333744, Million Grey #999999, Platinum #E2E2E2, Bright White #FFFFFF, Amber Yellow #FCC00E) ---- */
  --color-bg: #ffffff;
  --color-bg-alt: #E2E2E2;
  --color-surface: #ffffff;
  --color-dark: #262626;
  --color-light: #E2E2E2;
  --color-text: #262626;
  --color-text-muted: #333744;
  --color-text-on-light: #262626;
  --color-text-muted-on-light: #333744;
  --color-eyebrow: #fcc00e;        /* all labels above headings: Amber Yellow (brand book) */
  --color-accent: #fcc00e;
  --color-accent-hover: #fdcf4a;
  --color-accent-text: #fcc00e;    /* brand yellow, also for text on white */
  --color-on-accent: #262626;
  --color-border: rgba(38,38,38,0.14);
  --color-border-on-light: rgba(38,38,38,0.14);
  --color-map-a: #E2E2E2;          /* brand greys: Platinum / Gunmetal / Million Grey */
  --color-map-b: #333744;
  --color-map-c: #999999;
  --white: #ffffff;
  --white-50: rgba(255, 255, 255, 0.5);

  /* ---- Hero overlay (gradient over the hero image/video) ---- */
  --hero-overlay-top: rgba(38,38,38,0.55);
  --hero-overlay-mid: rgba(38,38,38,0.18);
  --hero-overlay-bottom: rgba(38,38,38,0.88);

  /* ---- Fonts ---- */
  --font-main: "Poppins", system-ui, sans-serif;           /* body: Poppins Regular */
  --font-mono: "Roboto Mono", ui-monospace, monospace;      /* subheader / informational: Roboto Mono Medium, uppercase */
  --font-display: "Noir Pro", "Poppins", system-ui, sans-serif;  /* headline: Noir Pro Bold Italic uppercase (Poppins until Noir Pro is licensed) */
  --display-weight: 700;
  --display-transform: uppercase;

  /* ---- Type scale ---- */
  --fs-hero: clamp(1.9rem, 2.4vw, 2.7rem);
  --fs-h2: clamp(1.6rem, 3vw, 2.8rem);
  --fs-statement: clamp(2rem, 3.85vw, 4.6rem);   /* big statement text */
  --fs-h3: clamp(1.05rem, 1.35vw, 1.3rem);
  --fs-body: 1rem;
  --fs-small: 0.78rem;
  --lh-tight: 1.08;
  --lh-body: 1.65;

  /* ---- Layout ---- */
  --container: 2400px;      /* full-width layout like the original */
  --container-padding: clamp(1.25rem, 2.75vw, 3.5rem);
  --section-gap: clamp(4.5rem, 10vw, 9rem);
  --radius: 4px;
  --radius-lg: 14px;
  --header-height: 84px;
  --logo-width: clamp(260px, 42vw, 1000px);  /* big hero logo (reaches the nav, like the original) */
  --logo-width-scrolled: 190px;             /* size once scrolled into the header */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.25s;
  --dur-base: 0.6s;
  --dur-slow: 1.1s;
  --reveal-distance: 40px;
  --reveal-stagger: 0.12s;
  --marquee-speed: 40s;
  --hero-title-fill: 2.4s;         /* progressive text fill duration */
  --hero-slide-interval: 6;        /* seconds, read by js/main.js */
  --hero-zoom: 1.12;               /* Ken-Burns scale on hero slides */
  --parallax-strength: 0.12;       /* read by js/main.js */
  --smooth-scroll-duration: 1.2;   /* read by js/main.js (Lenis) */
}