/* ============================================================
   VenAir Design System — Core Tokens
   Tesla-inspired: radical subtraction, photography-first,
   single accent color, generous whitespace.
   ============================================================ */

/* Universal Sans is a Tesla proprietary face. Closest free
   substitute on Google Fonts: Albert Sans (Display + Text via
   weight). Replace with the real Universal Sans when licensed. */
@import url("https://fonts.googleapis.com/css2?family=Albert+Sans:wght@300;400;500;600;700&display=swap");

:root {
  /* ---------- Color: Brand ---------- */
  --color-electric-blue: #3E6AE1;      /* primary CTA, only chromatic color */
  --color-electric-blue-hover: #3457C7; /* subtle darken on hover */
  --color-electric-blue-press: #2B49AC;

  /* ---------- Color: Surfaces ---------- */
  --color-white: #FFFFFF;              /* dominant canvas */
  --color-light-ash: #F4F4F4;          /* alternate section surface */
  --color-cloud: #EEEEEE;              /* light divider lines */
  --color-pale-silver: #D0D1D2;        /* subtle UI borders */
  --color-frosted-glass: rgba(255, 255, 255, 0.75); /* nav backdrop */
  --color-modal-scrim: rgba(128, 128, 128, 0.65);   /* modal overlay */

  /* ---------- Color: Text & Dark Surfaces ---------- */
  --color-carbon: #171A20;             /* headings, nav, dark surface */
  --color-graphite: #393C41;           /* body text */
  --color-pewter: #5C5E62;             /* tertiary text, sublinks */
  --color-silver-fog: #8E8E8E;         /* placeholder, disabled */

  /* ---------- Semantic Color Roles ---------- */
  --fg-1: var(--color-carbon);         /* primary text */
  --fg-2: var(--color-graphite);       /* body text */
  --fg-3: var(--color-pewter);         /* tertiary text */
  --fg-4: var(--color-silver-fog);     /* placeholder, disabled */
  --fg-inverse: var(--color-white);    /* text on dark/hero imagery */

  --bg-1: var(--color-white);          /* page canvas */
  --bg-2: var(--color-light-ash);      /* alternate section */
  --bg-dark: var(--color-carbon);      /* dark sections */

  --border-1: var(--color-cloud);      /* dividers */
  --border-2: var(--color-pale-silver);/* visible borders */

  --accent: var(--color-electric-blue);/* primary CTA */
  --accent-hover: var(--color-electric-blue-hover);
  --accent-press: var(--color-electric-blue-press);

  /* ---------- Type: Family ---------- */
  --font-display: "Albert Sans", "Universal Sans Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-text:    "Albert Sans", "Universal Sans Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* ---------- Type: Scale ---------- */
  --fs-hero: 40px;        /* hero titles (Display 500) */
  --fs-promo: 22px;       /* hero promo text */
  --fs-product: 17px;     /* model/product names */
  --fs-category: 16px;    /* category card label */
  --fs-body: 14px;        /* body, nav, buttons, links */
  --fs-micro: 12px;       /* legal, fine print */

  --fw-regular: 400;
  --fw-medium: 500;       /* only two weights used */

  --lh-tight: 1.20;       /* nav, buttons, hero */
  --lh-body: 1.43;        /* body copy 14/20 */

  /* ---------- Spacing (8px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 21.44px;     /* Tesla's odd in-between */
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ---------- Radius ---------- */
  --radius-0: 0px;        /* default sharp */
  --radius-1: 4px;        /* buttons, nav items, inputs */
  --radius-2: 12px;       /* large category cards */
  --radius-pill: 999px;   /* dots, status only */

  /* ---------- Elevation ----------
     Tesla philosophy: no shadows. Reserved tokens for rare use. */
  --elev-0: none;
  --elev-frost: 0 0 0 1px rgba(0, 0, 0, 0.04);
  --elev-overlay: 0 8px 32px rgba(23, 26, 32, 0.16);

  /* ---------- Motion ---------- */
  --ease-tesla: cubic-bezier(0.5, 0, 0, 0.75);
  --dur-1: 0.25s;
  --dur-2: 0.33s;         /* universal transition timing */

  /* ---------- Layout ---------- */
  --content-max: 1383px;
  --hero-height: 100vh;
  --nav-height: 56px;
}

/* ============================================================
   Semantic element styles
   ============================================================ */

html, body {
  background: var(--bg-1);
  color: var(--fg-2);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

h2, .h2 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  margin: 0;
}

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

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

.promo {
  font-family: var(--font-text);
  font-size: var(--fs-promo);
  font-weight: var(--fw-regular);
  line-height: 0.91;
  color: var(--fg-inverse);
}

.sublink {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--fg-3);
  text-decoration: none;
  transition: color var(--dur-2), box-shadow var(--dur-2) var(--ease-tesla);
}
.sublink:hover {
  color: var(--fg-1);
  box-shadow: inset 0 -1px 0 0 currentColor;
}