/* RODSPEED Advanced Automotive — Design Tokens
 * Dark theme. Scarlet red accent. Race-inspired square geometric type.
 *
 * Webfonts loaded via Google Fonts (substitutions — flagged in README):
 *   - Saira (display / brand)
 *   - Barlow (body / UI)
 *   - JetBrains Mono (mono, used for spec sheets & VIN-style labels)
 */

@import url("https://fonts.googleapis.com/css2?family=Saira:wght@500;600;700;800;900&family=Barlow:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  /* -------------------------------------------------------------------------
   * COLOR — neutrals
   * Near-black background with successively lighter surfaces.
   * No pure black — keeps photos and chrome separable.
   * ------------------------------------------------------------------------- */
  --rs-bg:            #0A0A0A;   /* page background */
  --rs-bg-elev:       #111111;   /* section bands behind content */
  --rs-surface:       #161616;   /* cards, panels */
  --rs-surface-2:     #1C1C1C;   /* hovered/active card surface */
  --rs-line:          #232323;   /* hairline borders */
  --rs-line-strong:   #2E2E2E;   /* divider, input border */

  /* COLOR — foreground */
  --rs-fg:            #FFFFFF;   /* primary text on dark */
  --rs-fg-2:          #E6E6E6;   /* secondary text */
  --rs-fg-3:          #9A9A9A;   /* tertiary / supporting copy */
  --rs-fg-4:          #6A6A6A;   /* labels, footnotes, captions */

  /* COLOR — accent (scarlet, from the RODSPEED logotype) */
  --rs-red:           #E5141F;   /* primary scarlet */
  --rs-red-hi:        #FF2A35;   /* hover/active */
  --rs-red-lo:        #B30E18;   /* pressed */
  --rs-red-tint:      rgba(229, 20, 31, 0.12);   /* low-alpha wash for glows */
  --rs-red-stroke:    rgba(229, 20, 31, 0.40);   /* hairline ring */

  /* COLOR — inverse (light-on-light, for placards over photos) */
  --rs-inv-bg:        #F4F4F4;
  --rs-inv-fg:        #0A0A0A;

  /* COLOR — semantic */
  --rs-success:       #2BB673;
  --rs-warning:       #F0A93B;
  --rs-info:          #5DA9E9;
  --rs-star:          #FFCB05;   /* Google review stars */

  /* -------------------------------------------------------------------------
   * TYPE — families
   * ------------------------------------------------------------------------- */
  --rs-font-display:  "Saira", "Eurostile", "Bank Gothic", system-ui, sans-serif;
  --rs-font-body:     "Barlow", "Helvetica Neue", Arial, sans-serif;
  --rs-font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* TYPE — weights */
  --rs-w-regular:     400;
  --rs-w-medium:      500;
  --rs-w-semibold:    600;
  --rs-w-bold:        700;
  --rs-w-black:       900;

  /* TYPE — scale (fluid clamps for hero, fixed for body) */
  --rs-fs-display:    clamp(56px, 8vw, 128px);   /* hero h1 */
  --rs-fs-h1:         clamp(40px, 5vw, 72px);    /* section h1 */
  --rs-fs-h2:         clamp(28px, 3.2vw, 44px);  /* section h2 / card title */
  --rs-fs-h3:         22px;
  --rs-fs-h4:         18px;
  --rs-fs-lg:         18px;
  --rs-fs-body:       16px;
  --rs-fs-sm:         14px;
  --rs-fs-xs:         12px;
  --rs-fs-eyebrow:    13px;   /* the small uppercase label above each section title */

  /* TYPE — leading */
  --rs-lh-tight:      1.02;
  --rs-lh-snug:       1.15;
  --rs-lh-body:       1.55;
  --rs-lh-loose:      1.7;

  /* TYPE — tracking */
  --rs-tr-tight:      -0.02em;
  --rs-tr-normal:     0;
  --rs-tr-wide:       0.04em;
  --rs-tr-eyebrow:    0.22em;   /* very wide on small uppercase labels */

  /* -------------------------------------------------------------------------
   * SPACING — 4px base
   * ------------------------------------------------------------------------- */
  --rs-s-1:           4px;
  --rs-s-2:           8px;
  --rs-s-3:           12px;
  --rs-s-4:           16px;
  --rs-s-5:           24px;
  --rs-s-6:           32px;
  --rs-s-7:           48px;
  --rs-s-8:           64px;
  --rs-s-9:           96px;
  --rs-s-10:          128px;

  /* Section padding — vertical rhythm */
  --rs-section-y:     clamp(64px, 9vw, 128px);
  --rs-container:     1280px;
  --rs-gutter:        clamp(20px, 4vw, 48px);

  /* -------------------------------------------------------------------------
   * RADII — small, almost industrial. No pill buttons by default.
   * ------------------------------------------------------------------------- */
  --rs-r-0:           0;
  --rs-r-1:           2px;
  --rs-r-2:           4px;
  --rs-r-3:           8px;
  --rs-r-4:           12px;
  --rs-r-pill:        999px;   /* only for chips / tags */

  /* -------------------------------------------------------------------------
   * BORDERS
   * ------------------------------------------------------------------------- */
  --rs-bd:            1px solid var(--rs-line);
  --rs-bd-strong:     1px solid var(--rs-line-strong);
  --rs-bd-red:        1px solid var(--rs-red);

  /* -------------------------------------------------------------------------
   * SHADOWS
   * No drop shadows on dark cards by default — use borders or red glows.
   * ------------------------------------------------------------------------- */
  --rs-shadow-card:       0 1px 0 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.45);
  --rs-shadow-cta:        0 8px 24px rgba(229, 20, 31, 0.35);
  --rs-shadow-cta-hi:     0 10px 32px rgba(229, 20, 31, 0.55);
  --rs-glow-red:          0 0 0 1px var(--rs-red-stroke), 0 0 24px var(--rs-red-tint);

  /* -------------------------------------------------------------------------
   * GRADIENTS — image protection + section transitions
   * ------------------------------------------------------------------------- */
  --rs-grad-hero:         linear-gradient(90deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.15) 100%);
  --rs-grad-photo-bottom: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(10,10,10,0.95) 100%);
  --rs-grad-photo-top:    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 60%);

  /* -------------------------------------------------------------------------
   * MOTION — quick, mechanical. No bounce.
   * ------------------------------------------------------------------------- */
  --rs-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --rs-ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --rs-dur-fast:      120ms;
  --rs-dur-base:      220ms;
  --rs-dur-slow:      420ms;

  /* -------------------------------------------------------------------------
   * Z-INDEX
   * ------------------------------------------------------------------------- */
  --rs-z-nav:         50;
  --rs-z-overlay:     80;
  --rs-z-modal:       100;
}

/* ============================================================================
 * BASE
 * ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { background: var(--rs-bg); }

body {
  margin: 0;
  background: var(--rs-bg);
  color: var(--rs-fg);
  font-family: var(--rs-font-body);
  font-size: var(--rs-fs-body);
  line-height: var(--rs-lh-body);
  font-weight: var(--rs-w-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================================
 * SEMANTIC TYPE — drop-in classes & element styles
 * ========================================================================== */

/* Hero display — the "Performance. Unlocked." level headline.
 * Saira 800/900, very tight tracking, near-1.0 leading. */
.rs-display, .rs-h-display {
  font-family: var(--rs-font-display);
  font-weight: var(--rs-w-black);
  font-size: var(--rs-fs-display);
  line-height: var(--rs-lh-tight);
  letter-spacing: var(--rs-tr-tight);
  text-transform: uppercase;
  color: var(--rs-fg);
  margin: 0;
}

h1, .rs-h1 {
  font-family: var(--rs-font-display);
  font-weight: var(--rs-w-bold);
  font-size: var(--rs-fs-h1);
  line-height: var(--rs-lh-snug);
  letter-spacing: var(--rs-tr-tight);
  text-transform: uppercase;
  color: var(--rs-fg);
  margin: 0 0 var(--rs-s-5);
}

h2, .rs-h2 {
  font-family: var(--rs-font-display);
  font-weight: var(--rs-w-bold);
  font-size: var(--rs-fs-h2);
  line-height: var(--rs-lh-snug);
  letter-spacing: var(--rs-tr-tight);
  text-transform: uppercase;
  color: var(--rs-fg);
  margin: 0 0 var(--rs-s-4);
}

h3, .rs-h3 {
  font-family: var(--rs-font-display);
  font-weight: var(--rs-w-semibold);
  font-size: var(--rs-fs-h3);
  line-height: var(--rs-lh-snug);
  letter-spacing: var(--rs-tr-normal);
  text-transform: uppercase;
  color: var(--rs-fg);
  margin: 0 0 var(--rs-s-3);
}

h4, .rs-h4 {
  font-family: var(--rs-font-body);
  font-weight: var(--rs-w-semibold);
  font-size: var(--rs-fs-h4);
  line-height: var(--rs-lh-snug);
  color: var(--rs-fg);
  margin: 0 0 var(--rs-s-2);
}

p, .rs-p {
  font-family: var(--rs-font-body);
  font-size: var(--rs-fs-body);
  line-height: var(--rs-lh-body);
  color: var(--rs-fg-3);
  margin: 0 0 var(--rs-s-4);
  text-wrap: pretty;
}

.rs-lead {
  font-family: var(--rs-font-body);
  font-size: var(--rs-fs-lg);
  line-height: var(--rs-lh-body);
  color: var(--rs-fg-2);
  font-weight: var(--rs-w-regular);
}

/* Eyebrow — uppercase, ultra-wide tracking, red dot prefix is conventional. */
.rs-eyebrow {
  font-family: var(--rs-font-display);
  font-size: var(--rs-fs-eyebrow);
  font-weight: var(--rs-w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--rs-tr-eyebrow);
  color: var(--rs-red);
  display: inline-flex;
  align-items: center;
  gap: var(--rs-s-2);
}
.rs-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--rs-red);
  display: inline-block;
}

/* Stat numbers — huge Saira, white. Often paired with a small caption. */
.rs-stat {
  font-family: var(--rs-font-display);
  font-weight: var(--rs-w-black);
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  letter-spacing: var(--rs-tr-tight);
  color: var(--rs-fg);
}
.rs-stat-suffix { color: var(--rs-red); }
.rs-stat-label {
  font-family: var(--rs-font-body);
  font-size: var(--rs-fs-body);
  text-transform: uppercase;
  letter-spacing: var(--rs-tr-wide);
  color: var(--rs-fg-2);
  margin-top: var(--rs-s-2);
}

/* Mono spec tag — for build sheets, VIN-like markers, "REV 01" etc. */
.rs-mono {
  font-family: var(--rs-font-mono);
  font-size: var(--rs-fs-xs);
  letter-spacing: var(--rs-tr-wide);
  text-transform: uppercase;
  color: var(--rs-fg-4);
}

/* Links */
a, .rs-link {
  color: var(--rs-fg);
  text-decoration: none;
  transition: color var(--rs-dur-fast) var(--rs-ease-out);
}
a:hover, .rs-link:hover { color: var(--rs-red); }

/* Selection */
::selection { background: var(--rs-red); color: #fff; }