/* @fonts red-hat-display:600,700,800|red-hat-text:400,500,600,700 */
/*
 * Motyw „Port” — transport, spedycja, logistyka, firmy technologiczne.
 * Morska zieleń (petrol) z piaskowym tłem pomocniczym i bursztynem jako sygnałem.
 * Krój geometryczny: Red Hat Display w nagłówkach, Red Hat Text w treści.
 */
:root {
  --font-body: "Red Hat Text", "Segoe UI", system-ui, sans-serif;
  --font-display: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.02em;

  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f0e8;
  --border: #dcd8cc;
  --border-strong: #a39d8b;
  --text: #0b2a30;
  --text-2: #2e494f;
  --muted: #51656a;

  --primary: #0b5563;
  --primary-ink: #ffffff;
  --primary-soft: #dbecee;
  --link: #0b5563;

  --accent: #e6a020;
  --accent-ink: #3a2400;
  --accent-soft: #fbefd3;

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

  --header-bg: #ffffff;
  --header-text: #0b2a30;
  --header-border: #dcd8cc;

  --hero-bg: #0a3f4a;
  --hero-text: #ffffff;
  --hero-muted: #c2d8dc;

  --footer-bg: #072e36;
  --footer-text: #d4e4e6;
  --footer-muted: #90b1b6;
  --footer-border: rgba(255, 255, 255, .14);

  --radius: 8px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(11, 42, 48, .06), 0 16px 32px -20px rgba(11, 42, 48, .38);
}

.brand { font-weight: 800; }
.brand__mark { background: var(--accent); color: var(--accent-ink); }

/* w ciemnej sekcji otwierającej przycisk szukania jest bursztynowy — jedyny taki na stronie */
.hero .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.hero .filters label { color: var(--hero-muted); }
.hero :focus-visible, .hero .input:focus, .hero .select:focus { outline-color: var(--hero-text); }