/* Design tokens: 1012 Main Street Automotive (source: specs/design.md §2–§4).
   Red and black come from the shop's business card (exact tones still to be matched). */

/* Self-hosted Barlow (Google Fonts, OFL), latin subset, WOFF2. Paths are relative to this file. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/barlow-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/barlow-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/barlow-semi-condensed-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/barlow-semi-condensed-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Black (business card) */
  --dark-950: #111214;
  --dark-900: #1B1C1F;
  --dark-800: #26282C;
  --brand-700: #2A2D33;           /* graphite: focus rings on light, checked form choices */
  /* Red (business card) */
  --accent-600: #D62828;          /* buttons with white text (4.8:1) */
  --accent-700: #B91C1C;          /* red text on light backgrounds (5.8:1) */
  --accent-500: #F04438;          /* dashboard lights, red text on black (5.0:1) */
  --dark-rgb: 17, 18, 20;
  --accent-rgb: 214, 40, 40;
  --accent-hi: #E8423A; --accent-lo: #B51F1F; --accent-hi-hover: #DA3530; --accent-lo-hover: #A21B1B;

  /* Neutrals */
  --paper: #F4F2EE;
  --paper-2: #EAE7E1;
  --white: #FBFAF8;
  --stone-200: #E1DDD5;
  --stone-400: #B3ADA3;
  --ink: #141518;
  --slate-600: #4A4F55;           /* body text on light (7.4:1) */
  --slate-400: #7A7F86;
  --mist: #B8BDC3;                /* body text on dark (9.9:1) */
  --line-dark: #34373C;

  /* Type */
  --font-display: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display: clamp(2.75rem, 1.5rem + 5.2vw, 5.25rem);
  --fs-h1: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  --fs-h2: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --fs-h3: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);
  --fs-lead: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-eyebrow: .8125rem;

  /* Space (4px base) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 160px;

  --section-y: var(--space-8);
  --gutter: 20px;
  --container: 1200px;

  /* Shape */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-hover: 0 1px 2px rgba(var(--dark-rgb), .06), 0 8px 24px rgba(var(--dark-rgb), .08);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 200ms;
  --dur: 250ms;
  --dur-reveal: 700ms;

  --header-h: 64px;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --section-y: var(--space-9); }
}

@media (min-width: 1024px) {
  :root { --gutter: 48px; --section-y: var(--space-10); --header-h: 80px; }
}