/* ==========================================================================
   Listing Rent A Car — Design Tokens
   Single source of truth for color, type, spacing, radii, motion.
   Everything else in the site consumes these custom properties.
   ========================================================================== */

/* Vendored general-purpose UI face (Sansation). Self-hosted woff2 — no CDN at
   runtime. Specialized display faces (Plaster for the intro/brand wordmark,
   Raleway for the hero headline) are declared separately and unaffected. */
@font-face {
  font-family: 'Sansation';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/sansation-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Sansation';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/sansation-700.woff2') format('woff2');
}

/* Vendored heading face (Raleway) — self-hosted woff2, no Google Fonts CDN at
   runtime. Weights 600/700/800 are the only ones the site uses (splash headline
   + panel names/numbers/prices). */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/raleway-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/raleway-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/raleway-800.woff2') format('woff2');
}

:root {
  /* --- Color: brand palette ------------------------------------------- */
  /* ONLY these four brand colors appear on the site (plus achromatic
     black→white neutrals for surfaces/text, and the WhatsApp green).
     DOMINANCE ORDER (excluding black): canary-yellow > tiger-flame > raspberry.
       black         #000000   (canvas)
       canary-yellow #E5FF00   (DOMINANT accent)
       tiger-flame   #ff5a1f   (secondary / highlight)
       dark-raspberry#950952   (dim accent ONLY)                            */

  /* Black canvas + translucent gray "glass" surfaces (see-through over black). */
  --color-bg:            #000000;                  /* page background, opaque (black) */
  --color-bg-raised:     rgba(255, 255, 255, 0.05);/* cards, raised surfaces */
  --color-bg-hover:      rgba(255, 255, 255, 0.09);/* hover on raised surfaces */
  --color-line:          rgba(255, 255, 255, 0.12);/* hairline borders / dividers */
  --color-line-strong:   rgba(255, 255, 255, 0.20);/* stronger borders */

  /* Text — achromatic neutrals for legibility on the black canvas. */
  --color-text:          #f4f5f7;   /* primary text (near-white) */
  --color-text-muted:    #b3b3b3;   /* secondary text (gray) */
  --color-text-faint:    #777777;   /* tertiary / captions (gray) */

  /* Accent ramp — canary-yellow leads, tiger-flame second, raspberry dim only. */
  --color-accent:        #E5FF00;   /* DOMINANT accent (canary-yellow) */
  --color-accent-hi:     #ff5a1f;   /* highlight / hover (tiger-flame) */
  --color-accent-dim:    #950952;   /* dim accent ONLY (dark-raspberry) */
  --color-accent-contrast:#000000;  /* text on accent surfaces (black) */

  /* Functional */
  --color-whatsapp:      #25d366;   /* WhatsApp brand green, used sparingly */
  --color-focus:         #E5FF00;   /* focus ring (canary-yellow) */
  --intro-orange:        #ff5a1f;   /* homepage intro reveal overlay (tiger-flame) */

  /* FloatingLines gradient stops (black → gray → tiger-flame → canary-yellow;
     yellow is the bright dominant end). Consumed by JS via getComputedStyle. */
  --lines-stop-1:        #000000;
  --lines-stop-2:        #3a3a3a;
  --lines-stop-3:        #ff5a1f;
  --lines-stop-4:        #E5FF00;

  /* --- Typography ------------------------------------------------------ */
  --font-sans: "Sansation", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-display: "Sansation", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Fluid type scale (mobile-first, clamps to desktop) */
  --fs-100: 0.75rem;                              /* 12px caption */
  --fs-200: 0.875rem;                             /* 14px small */
  --fs-300: 1rem;                                 /* 16px body */
  --fs-400: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);     /* lead */
  --fs-500: clamp(1.25rem, 1vw + 1rem, 1.5rem);          /* h4 */
  --fs-600: clamp(1.5rem, 2vw + 1rem, 2rem);             /* h3 */
  --fs-700: clamp(2rem, 4vw + 1rem, 3rem);               /* h2 */
  --fs-800: clamp(2.5rem, 6vw + 1rem, 4.5rem);           /* h1 / hero */
  --fs-900: clamp(3rem, 9vw + 1rem, 6.5rem);             /* display */

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;   /* uppercase eyebrows */

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

  /* --- Spacing scale (8px base) ---------------------------------------- */
  --space-2xs: 0.25rem;   /* 4 */
  --space-xs:  0.5rem;    /* 8 */
  --space-sm:  0.75rem;   /* 12 */
  --space-md:  1rem;      /* 16 */
  --space-lg:  1.5rem;    /* 24 */
  --space-xl:  2rem;      /* 32 */
  --space-2xl: 3rem;      /* 48 */
  --space-3xl: 4.5rem;    /* 72 */
  --space-4xl: 7rem;      /* 112 */

  /* --- Layout ---------------------------------------------------------- */
  --container-max: 80rem;     /* 1280px */
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --header-h: 4.5rem;

  /* --- Radii ----------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* --- Elevation ------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.55);

  /* --- Motion ---------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   480ms;

  /* --- Z-index ladder -------------------------------------------------- */
  --z-lines:   0;
  --z-car:     1;
  --z-hero-ui: 2;
  --z-header:  100;
  --z-overlay: 200;
  --z-intro:   1000;   /* first-load reveal overlay, above everything */
}