/* ============================================================
   Today in Cars — Core Design Tokens
   Import this in any artifact:  <link rel="stylesheet" href="colors_and_type.css">
   ============================================================ */

/* ---------- 1. Fonts ---------- */
/* Lato + Nunito. Local woff2 files shipped in /fonts.
   Fall back to Google Fonts CDN if the local files are missing. */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Lato Regular"), url("../fonts/Lato-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local("Lato Italic"), url("../fonts/Lato-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Lato Bold"), url("../fonts/Lato-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local("Lato Black"), url("../fonts/Lato-Black.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: local("Lato Black Italic"), url("../fonts/Lato-BlackItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Nunito Regular"), url("../fonts/Nunito-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local("Nunito Italic"), url("../fonts/Nunito-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local("Nunito SemiBold"), url("../fonts/Nunito-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Nunito Bold"), url("../fonts/Nunito-Bold.woff2") format("woff2");
}

/* ---------- 2. Tokens ---------- */
:root {
  /* Colors — base palette */
  --ink:          #0F0F10;   /* primary text, masthead, rules */
  --ink-soft:     #2A2A2D;   /* secondary text */
  --paper:        #F6F2E9;   /* default page background (warm off-white) */
  --paper-pure:   #FFFFFF;   /* card / photo background */
  --signal:       #C8102E;   /* racing red — single accent */
  --signal-hover: #A50D26;
  --track:        #0F3D2E;   /* deep racing green — secondary accent */
  --caution:      #E8B73C;   /* warning / breaking label */

  /* Neutrals — "ash" scale */
  --ash-50:       #F0EBE0;
  --ash-100:      #E6E0D2;
  --ash-200:      #D6CFC0;
  --ash-300:      #B7AF9E;
  --ash-500:      #807866;
  --ash-700:      #4A4639;
  --ash-900:      #1F1D17;

  /* Semantic foreground / background */
  --fg-1:         var(--ink);
  --fg-2:         var(--ash-700);
  --fg-3:         var(--ash-500);
  --fg-inverse:   var(--paper);
  --fg-link:      var(--signal);
  --bg-1:         var(--paper);
  --bg-2:         var(--paper-pure);
  --bg-inverse:   var(--ink);
  --rule:         var(--ink);
  --rule-soft:    var(--ash-200);

  /* Type families */
  --font-display: "Lato", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Nunito", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  /* Base type scale (px) */
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-21: 21px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-36: 36px;
  --fs-48: 48px;
  --fs-64: 64px;
  --fs-80: 80px;

  /* Line heights */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.55;
  --lh-loose: 1.75;

  /* Letter-spacing */
  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-eyebrow: 0.12em;

  /* Spacing scale — 8 px base */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;

  /* Radii */
  --r-0:   0;
  --r-1:   4px;
  --r-pill: 999px;

  /* Borders */
  --bw-hair:  1px;
  --bw-rule:  2px;
  --bw-accent: 4px;

  /* Layout */
  --col-narrow:  560px;
  --col-body:    680px;
  --col-wide:    960px;
  --col-page:    1240px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
  --t-fast:   120ms;
  --t-base:   240ms;

  /* Shadows — intentionally minimal */
  --shadow-sticky: 0 1px 0 var(--ash-200);
}

/* ---------- 3. Semantic primitives ---------- */
/* Apply these classes directly, or extend in your component CSS. */

.h-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(48px, 7vw, 80px);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-36);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-12);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--signal);
}

.deck {                  /* sub-headline / story deck */
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-21);
  line-height: 1.35;
  color: var(--fg-2);
}

.body, p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-18);
  line-height: var(--lh-body);
  color: var(--fg-1);
}

.small {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  line-height: var(--lh-body);
  color: var(--fg-3);
}

.mono, .stat {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
}

/* Editorial bits */
.amp {                   /* the iconic ampersand */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  color: var(--signal);
}

.numero::before {
  content: "№\00a0";
  color: var(--signal);
  font-weight: 900;
}

a, .link {
  color: var(--fg-link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--t-fast) var(--ease-out);
}
a:hover, .link:hover {
  text-decoration-thickness: 2px;
}

hr, .rule {
  border: 0;
  border-top: var(--bw-hair) solid var(--rule);
  margin: var(--sp-6) 0;
}

.rule-accent {
  border: 0;
  border-top: var(--bw-accent) solid var(--signal);
  width: 64px;
  margin: 0 0 var(--sp-3);
}