/* ============================================================
   EZRaider USA — Design Tokens
   Colors + Type
   ============================================================ */

/* ---- Web fonts (Google Fonts as nearest-match to the file) ---- */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* ---------------------------------------------------------
     COLOR — the system is intentionally narrow.
     EZRaider is engineered, industrial, professional-first.
     Black is the canvas. White is the ink. Blue is the spark.
     --------------------------------------------------------- */

  /* Surfaces */
  --bg-0:        #000000;   /* page background, hero, dark sections */
  --bg-1:        #0D0D0D;   /* slightly raised black (cards on black) */
  --bg-2:        #1D1D1D;   /* secondary panel */
  --bg-3:        #282828;   /* tertiary / borders on dark */
  --bg-4:        #444444;   /* legacy wireframe gray, divider on dark */

  --bg-inverse:  #FFFFFF;   /* light surface */
  --bg-soft:     #F2F2F2;   /* light-mode panel */
  --bg-muted:    #EEEEEE;   /* light-mode subtle */

  /* Ink (foreground) */
  --fg-0:        #FFFFFF;   /* primary on dark */
  --fg-1:        #EEEEEE;   /* primary muted on dark */
  --fg-2:        #808080;   /* secondary (captions, helper) */
  --fg-3:        #4A4A4A;   /* tertiary, disabled */
  --fg-on-light: #000000;   /* primary on light */

  /* Accent — drawn from the EZRaider logo's parallelograms */
  --accent-cyan:    #016BC1;   /* dominant logo accent — links, focus, primary action highlights */
  --accent-cyan-1:  #1F8FE3;   /* hover/lighter */
  --accent-cyan-2:  #014C8B;   /* pressed/darker */
  --accent-blue:    #2A4FCC;   /* deep logo blue — secondary accent, gradients */

  /* Semantic */
  --semantic-success: #1F8A5B;
  --semantic-warning: #E08A00;
  --semantic-danger:  #C0392B;
  --semantic-info:    var(--accent-cyan);

  /* Strokes */
  --stroke-on-dark:    #FFFFFF;          /* solid 1px hairline used throughout the wireframes */
  --stroke-on-dark-2:  rgba(255,255,255,0.10);  /* whisper border */
  --stroke-on-dark-3:  rgba(255,255,255,0.25);  /* secondary on dark */
  --stroke-on-light:   #282828;

  /* Shadow (used sparingly — brand is mostly flat) */
  --shadow-1: 0 4px 4px 0 rgba(0,0,0,0.25);
  --shadow-2: 0 12px 24px -8px rgba(0,0,0,0.45);

  /* Protection gradients (used over imagery) */
  --gradient-bottom-fade: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000000 60%);
  --gradient-top-fade:    linear-gradient(180deg, #000000 0%, rgba(0,0,0,0) 60%);
  --gradient-radial-vignette: radial-gradient(ellipse at center, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
  --gradient-cyan-blue:   linear-gradient(135deg, #016BC1 0%, #2A4FCC 100%);

  /* -----------------------------------------------------------------
     TYPE — two faces, used with intent.
       Sora   → headlines (display, headings, button labels, stat numbers)
       Inter  → paragraphs (body, descriptions, captions, long-form, FAQ)
     ----------------------------------------------------------------- */

  --font-display: "Sora", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;

  /* Type scale — display caps loud, body steady.
     Mobile is ~70% of these via clamp(). */
  --display-1: clamp(72px, 9vw, 130px);   /* hero supertext */
  --display-2: clamp(48px, 6vw, 96px);    /* section super title */
  --h1:        clamp(40px, 5vw, 60px);    /* section heading */
  --h2:        48px;
  --h3:        32px;
  --h4:        24px;
  --h5:        20px;
  --eyebrow:   16px;
  --body-lg:   20px;
  --body:      18px;
  --body-sm:   16px;
  --caption:   14px;
  --micro:     12px;

  --leading-tight: 1.00;   /* display & big headings */
  --leading-snug:  1.10;
  --leading-body:  1.50;   /* long-form */

  --track-tight: -0.03em;  /* sora display */
  --track-normal: 0;
  --track-wide:   0.04em;
  --track-caps:   0.08em;

  /* ---------- spacing & radius ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 48px;
  --space-12: 64px;
  --space-16: 96px;
  --space-20: 112px;

  --radius-0:   0;      /* default — cards and surfaces are rectangular */
  --radius-1:   2px;
  --radius-2:   4px;
  --radius-pill: 999px; /* buttons only */
}

/* =================================================================
   SEMANTIC TYPE — reach for these in components.
   ================================================================= */

.t-display-1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--display-1);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg-0);
}
.t-display-2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--display-2);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg-0);
}
.t-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h1);
  line-height: var(--leading-tight);
  color: var(--fg-0);
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h2);
  line-height: var(--leading-snug);
  color: var(--fg-0);
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h3);
  line-height: var(--leading-snug);
  color: var(--fg-0);
}
.t-h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h4);
  line-height: var(--leading-snug);
  color: var(--fg-0);
}
.t-h5 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--h5);
  line-height: var(--leading-snug);
  color: var(--fg-0);
}
.t-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--eyebrow);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg-0);
  text-transform: none; /* "Three models. One professional standard." */
}
.t-eyebrow-caps {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--micro);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}
.t-body-lg {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--body-lg);
  line-height: var(--leading-body);
  color: var(--fg-0);
}
.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--body);
  line-height: var(--leading-body);
  color: var(--fg-0);
}
.t-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--body-sm);
  line-height: var(--leading-body);
  color: var(--fg-1);
}
.t-long {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--body);
  line-height: var(--leading-body);
  color: var(--fg-1);
}
.t-caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--caption);
  line-height: var(--leading-body);
  color: var(--fg-2);
}
.t-spec-number {
  /* big numeric callout used for stats — 34 MPH, 441 lb, etc. */
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 6vw, 80px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--fg-0);
}
.t-spec-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--body-sm);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* =================================================================
   ELEMENT DEFAULTS — page-level resets that match the brand
   ================================================================= */

html, body {
  background: var(--bg-0);
  color: var(--fg-0);
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font: 700 var(--h1)/var(--leading-tight) var(--font-display); letter-spacing: var(--track-tight); margin: 0; }
h2 { font: 700 var(--h2)/var(--leading-snug)  var(--font-display); margin: 0; }
h3 { font: 700 var(--h3)/var(--leading-snug)  var(--font-display); margin: 0; }
h4 { font: 700 var(--h4)/var(--leading-snug)  var(--font-display); margin: 0; }
h5 { font: 600 var(--h5)/var(--leading-snug)  var(--font-display); margin: 0; }
p  { font: 400 var(--body)/var(--leading-body) var(--font-body); margin: 0 0 1em; }
a  { color: var(--fg-0); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--accent-cyan-1); }

::selection { background: var(--accent-cyan); color: #fff; }