/* @fonts roboto-condensed:600,700|roboto:400,500,700 */
/*
 * Motyw „Antracyt” — przemysł, produkcja, obróbka metalu, hurtownie techniczne.
 * Jasnoszare tło, antracytowy nagłówek i sekcja otwierająca, stonowana mięta jako kolor marki i wyróżnień.
 * Nagłówki: zwarty Roboto Condensed, tekst: Roboto. Prawie proste narożniki, bez cieni.
 */
:root {
  --font-body: "Roboto", "Segoe UI", system-ui, sans-serif;
  --font-display: "Roboto Condensed", "Segoe UI", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: 0;

  --bg: #eceeef;
  --surface: #f9fafa;
  --surface-2: #dde1e3;
  --border: #c5cbce;
  --border-strong: #7d878c;
  --text: #171b1e;
  --text-2: #343b40;
  --muted: #4a5359;

  --primary: #1f6f5c;
  --primary-ink: #ffffff;
  --primary-soft: #d5ebe4;
  --link: #185b4b;

  --accent: #7fcdb4;
  --accent-ink: #0f3d31;
  --accent-soft: #dcf1ea;
  --accent-on: #0d2a22;

  --ok: #17694a;
  --danger: #a3261c;

  --header-bg: #262b2f;
  --header-text: #f1f3f4;
  --header-border: #40474c;

  --hero-bg: #30363b;
  --hero-text: #ffffff;
  --hero-muted: #c9d0d4;

  --footer-bg: #1a1e21;
  --footer-text: #dde1e3;
  --footer-muted: #9aa3a8;
  --footer-border: rgba(255, 255, 255, .16);
  --footer-heading: #8fd6bf;

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

h1, h2 { text-transform: none; letter-spacing: 0; }
h3, .entry__name { font-size: 1.1875rem; }
.brand { font-size: 1.375rem; }
.btn { font-weight: 700; }
.chip, .badge { border-radius: var(--radius); }
/* miętowa kreska spina antracytowy nagłówek z sekcją otwierającą */
.site-header { border-bottom: 3px solid var(--accent); }
.section__head { padding-bottom: 10px; border-bottom: 1px solid var(--border-strong); }
.hero .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.site-header :focus-visible, .site-header .input:focus { outline-color: var(--accent); }
.hero .filters label { color: var(--hero-muted); }
.hero :focus-visible, .hero .input:focus, .hero .select:focus { outline-color: var(--hero-text); }
.site-footer :focus-visible, .site-footer .input:focus { outline-color: var(--footer-text); }