/* @fonts sofia-sans-condensed:700i,800i|saira:400,500,600,700 */
/*
 * Motyw „Motor” — warsztaty samochodowe, komisy, wulkanizacja, części, pomoc drogowa.
 * Prawie biel, wyścigowa czerwień i karbonowa stopka. Nagłówki pochylone i wąskie
 * (Sofia Sans Condensed, kursywa), tekst: Saira. Wyróżnienie premium: czerń flagi startowej.
 */
:root {
  --font-body: "Saira", "Segoe UI", system-ui, sans-serif;
  --font-display: "Sofia Sans Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  --display-weight: 800;
  --display-tracking: 0;

  --bg: #fafafa;
  --surface: #ffffff;
  --surface-2: #efeff1;
  --border: #dcdce0;
  --border-strong: #96969e;
  --text: #111214;
  --text-2: #33353a;
  --muted: #5a5d65;

  --primary: #d40f1c;
  --primary-ink: #ffffff;
  --primary-soft: #fde5e6;
  --link: #b00b16;

  --accent: #1b1c1f;
  --accent-ink: #111214;
  --accent-soft: #e8e8eb;
  --accent-on: #ffffff;

  --ok: #17704c;
  --danger: #a3211a;

  --header-bg: #ffffff;
  --header-text: #111214;
  --header-border: #111214;

  --hero-bg: #ffffff;
  --hero-text: #111214;
  --hero-muted: #33353a;

  --footer-bg: #121315;
  --footer-text: #dfe0e3;
  --footer-muted: #9c9ea6;
  --footer-border: rgba(255, 255, 255, .16);
  --footer-heading: #ffffff;

  --radius: 3px;
  --radius-lg: 4px;
  --shadow: 0 2px 0 0 var(--primary), 0 0 0 1px var(--border-strong);
}

/* wąska kursywa potrzebuje większego stopnia, żeby ważyła tyle co zwykły krój */
h1, h2, h3, .brand, .entry__name, .stat__n, .logo--initial, .logo.is-broken { font-style: italic; }
h1 { font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4rem); line-height: 1; }
h2 { font-size: clamp(1.7rem, 1.35rem + 1.4vw, 2.35rem); line-height: 1.05; }
h3, .entry__name { font-size: 1.375rem; line-height: 1.12; font-weight: 700; }
.brand { font-size: 1.7rem; }
.brand__mark { transform: skewX(-9deg); }
.stat__n { line-height: 1; }

.site-header { border-bottom: 3px solid var(--header-border); }
.hero { border-bottom: 3px solid var(--primary); }
.site-footer { border-top: 4px solid var(--primary); }

.btn { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.1875rem; letter-spacing: .01em; }
.btn--sm { font-size: 1.0625rem; }
.chip { border-radius: var(--radius); }
.site-footer :focus-visible, .site-footer .input:focus { outline-color: var(--footer-text); }