/* ============================================================
   BLUE PILL — Foundations: Color + Type
   ------------------------------------------------------------
   Design system inspired by a radically-subtractive, photography-first
   automotive showroom aesthetic. One accent color, three grays, white.
   ------------------------------------------------------------
   FONT SUBSTITUTION NOTE
   The source brand uses "Universal Sans Display / Text" (a proprietary
   commissioned family, not freely licensable). We substitute
   "Hanken Grotesk" — a geometric-humanist sans with engineered
   proportions + subtle humanist terminals — as the nearest free match.
   Replace the @import + --font-* vars below with the licensed family
   when font files are available (drop .woff2 into /fonts and swap to
   @font-face). 
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- COLOR · PRIMARY ---------- */
  --electric-blue:      #3E6AE1;   /* sole chromatic accent — primary CTA only */
  --electric-blue-hover:#3457b8;   /* subtle darkening on hover */
  --pure-white:         #FFFFFF;   /* dominant surface / canvas */

  /* ---------- COLOR · SURFACE ---------- */
  --white-canvas:       #FFFFFF;   /* page, nav, dropdowns, containers */
  --light-ash:          #F4F4F4;   /* barely-there alternate surface */
  --carbon-dark:        #171A20;   /* dark surface + darkest text (warm near-black, blue undertone) */
  --frosted-glass:      rgba(255, 255, 255, 0.75); /* nav backdrop on scroll */

  /* ---------- COLOR · TEXT / NEUTRALS ---------- */
  --text-1:             #171A20;   /* Carbon Dark — headings, nav, model names */
  --text-2:             #393C41;   /* Graphite — body / default paragraph */
  --text-3:             #5C5E62;   /* Pewter — tertiary, sub-links */
  --text-placeholder:   #8E8E8E;   /* Silver Fog — placeholders, disabled */
  --on-dark:            #FFFFFF;   /* text over hero imagery */

  /* ---------- COLOR · LINES ---------- */
  --border-light:       #EEEEEE;   /* Cloud Gray — dividers */
  --border:             #D0D1D2;   /* Pale Silver — UI delineation */

  /* ---------- COLOR · OVERLAY ---------- */
  --overlay-modal:      rgba(128, 128, 128, 0.65); /* modal / cookie scrims */
  --overlay-hint:       rgba(0, 0, 0, 0.05);       /* rare subtle hover hint */

  /* ============================================================
     TYPE
     Two weights only: 500 (medium) for headings/UI, 400 for body.
     No bold, no light, normal letter-spacing everywhere, no transforms.
     ============================================================ */
  --font-display: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-text:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  /* weights */
  --weight-regular: 400;
  --weight-medium:  500;

  /* ---------- TYPE · SCALE (role → size / line-height) ---------- */
  --hero-title-size:   40px;  --hero-title-lh:   48px;  /* Display 500, on dark hero */
  --promo-size:        22px;  --promo-lh:        24px;  /* Text 400, white over hero */
  --product-name-size: 17px;  --product-name-lh: 20px;  /* Text 500, model names */
  --category-size:     16px;  --category-lh:     20px;  /* Text 500, card labels */
  --base-size:         14px;  --base-lh:         20px;  /* Text 400, body / nav / button */

  /* ---------- SPACING (8px base) ---------- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --container-max: 1383px;

  /* ---------- RADIUS ---------- */
  --radius-sharp:   0px;    /* default — sharp edges */
  --radius-control: 4px;    /* buttons, nav items, inputs */
  --radius-card:    12px;   /* category / media cards */
  --radius-round:   50%;    /* carousel dots */

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.5, 0, 0, 0.75);
  --dur:  0.33s;            /* universal interactive timing */
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */
body {
  font-family: var(--font-text);
  font-size: var(--base-size);
  line-height: var(--base-lh);
  font-weight: var(--weight-regular);
  color: var(--text-2);
  background: var(--white-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--hero-title-size);
  line-height: var(--hero-title-lh);
  font-weight: var(--weight-medium);
  color: var(--text-1);
  letter-spacing: normal;
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-text);
  font-size: var(--promo-size);
  line-height: var(--promo-lh);
  font-weight: var(--weight-regular);
  color: var(--text-1);
  margin: 0;
}

h3, .product-name {
  font-family: var(--font-text);
  font-size: var(--product-name-size);
  line-height: var(--product-name-lh);
  font-weight: var(--weight-medium);
  color: var(--text-1);
  margin: 0;
}

p, .body {
  font-size: var(--base-size);
  line-height: var(--base-lh);
  font-weight: var(--weight-regular);
  color: var(--text-2);
  margin: 0;
}

small, .text-tertiary {
  font-size: var(--base-size);
  line-height: var(--base-lh);
  font-weight: var(--weight-regular);
  color: var(--text-3);
}

/* ============================================================
   COMPONENT PRIMITIVES (utility classes)
   ============================================================ */
.btn {
  font-family: var(--font-text);
  font-size: var(--base-size);
  font-weight: var(--weight-medium);
  line-height: var(--base-lh);
  min-height: 40px;
  min-width: 200px;
  padding: 4px 24px;
  border-radius: var(--radius-control);
  border: 3px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: border-color var(--dur), background-color var(--dur),
              color var(--dur), box-shadow 0.25s;
}
.btn-primary {
  background: var(--electric-blue);
  color: var(--on-dark);
}
.btn-primary:hover { background: var(--electric-blue-hover); }

.btn-secondary {
  background: var(--pure-white);
  color: var(--text-2);
}
.btn-secondary:hover { background: var(--light-ash); }

/* on-dark secondary, used over hero imagery */
.btn-secondary--dark {
  background: rgba(255, 255, 255, 0.65);
  color: var(--text-1);
}

.nav-item {
  font-family: var(--font-text);
  font-size: var(--base-size);
  font-weight: var(--weight-medium);
  color: var(--text-1);
  background: transparent;
  border: none;
  border-radius: var(--radius-control);
  padding: 4px 16px;
  min-height: 32px;
  cursor: pointer;
  transition: color var(--dur), background-color var(--dur);
}
.nav-item:hover { background: var(--overlay-hint); }

.text-link {
  font-family: var(--font-text);
  font-size: var(--base-size);
  font-weight: var(--weight-regular);
  color: var(--text-3);
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow var(--dur) var(--ease), color var(--dur);
}
.text-link:hover { color: var(--text-1); text-decoration: underline; }

.input {
  font-family: var(--font-text);
  font-size: var(--base-size);
  color: var(--text-1);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 8px 12px;
}
.input::placeholder { color: var(--text-placeholder); }