/* =========================================================
   Szpiegomat · Base CSS
   Reset + @font-face (self-hosted DM Sans) + typografia bazowa.
   Zaleznosc: tokens.css (musi byc wczytany wczesniej).
   ========================================================= */

/* ——— @font-face · DM Sans (self-hosted) ——— */
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans/DMSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans/DMSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans/DMSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans/DMSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ——— Reset (modern, minimal) ——— */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; }
a { color: inherit; }

/* ——— Typography helpers ——— */
h1, h2, h3, h4 { margin: 0; color: var(--ink); }

.szp-h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}
.szp-h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-h2);
  text-wrap: balance;
}
.szp-subtitle {
  font-size: var(--fs-h3);
  line-height: 1.4;
  font-weight: var(--fw-medium);
  color: var(--ink);
  opacity: 0.75;
}
.szp-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--brand);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.szp-body {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--muted);
  text-wrap: pretty;
}
.szp-lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}
.szp-accent { color: var(--brand); }

/* ——— Layout helpers ——— */
.szp-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}
.szp-section {
  padding: var(--section-py) var(--page-gutter);
}
.szp-section--white { background: var(--surface); }
.szp-section--soft  { background: var(--bg-soft); }
.szp-section--divider { border-top: 1px solid var(--line); }

.szp-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
}

/* ——— Accessibility (z _s, wartosciowe do zatrzymania) ——— */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: var(--surface);
  clip: auto !important;
  clip-path: none;
  color: var(--ink);
  display: block;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* ——— Responsive fallback (do dopracowania w kolejnych krokach) ——— */
@media (max-width: 1024px) {
  :root { --section-py: 80px; --page-gutter: 32px; --fs-h1: 44px; --fs-h2: 34px; }
  .szp-grid-2 { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 640px) {
  :root { --fs-h1: 36px; --fs-h2: 28px; --page-gutter: 20px; --section-py: 64px; }
}