/* ==========================================================================
   WikTymOne - base.css
   Reset, tokeny projektowe, typografia bazowa.
   Kierunek A „Ciśnienie”. Opis i kontrasty: docs/design-tokens.md
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* UWAGA: scroll-behavior celowo NIE jest ustawiane globalnie -
     psuje pomiary ScrollTriggera (lekcja z siteverse.pl, sesje 21-22).
     Płynne przewijanie kotwic obsługuje js/main.js. */
}

body,
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul[class], ol[class] { list-style: none; }

img, picture, video, svg {
  display: block;
  max-width: 100%;
}

/* img { display: block } nadpisuje domyślne [hidden] przeglądarki -
   bez tej linijki ukryte obrazy zostają widoczne (lekcja z projektu
   tapicerskiego). */
[hidden] { display: none !important; }

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; }

/* --- Tokeny --------------------------------------------------------------- */

:root {
  /* Kolory marki - granat i błękit odczytane z oklejenia auta klienta */
  --stal:         #0D141C;   /* tło ciemne dominujące */
  --stal-plus:    #131C26;   /* powierzchnia na ciemnym (karty) */
  --granat:       #12306B;   /* kolor marki */
  --granat-glab:  #0A1A3A;   /* granat przyciemniony, tła sekcji */
  --woda:         #2E7EC0;   /* akcent graficzny: linia instalacji, obrysy */
  --woda-jasna:   #5AA6E0;   /* tekst i odnośniki na ciemnym tle (AA) */
  --sygnal:       #F0A21B;   /* WYŁĄCZNIE sprawy pilne: telefon, awaria */
  --mgla:         #F2F5F8;   /* tło sekcji jasnych */
  --kreda:        #E6EDF5;   /* tekst główny na ciemnym */
  --szron:        #93A7BC;   /* tekst drugorzędny na ciemnym */
  --grafit:       #3E4C5C;   /* tekst drugorzędny na jasnym */
  --rysa:         rgba(230, 237, 245, .14);  /* hairline na ciemnym */
  --rysa-jasna:   rgba(13, 20, 28, .12);     /* hairline na jasnym */

  /* Role - używaj ich w komponentach zamiast kolorów wprost */
  --tlo:          var(--stal);
  --tekst:        var(--kreda);
  --tekst-cichy:  var(--szron);
  --akcent:       var(--woda);
  --link:         var(--woda-jasna);

  /* Typografia */
  --font-naglowek: "IBM Plex Sans Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-tekst:    "IBM Plex Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:     "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-100: 0.75rem;
  --fs-200: 0.8125rem;
  --fs-300: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --fs-400: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-500: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --fs-600: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --fs-700: clamp(1.875rem, 1.35rem + 2.4vw, 3.25rem);
  --fs-800: clamp(2.375rem, 1.4rem + 4.6vw, 5.5rem);

  --lh-ciasny: 0.98;
  --lh-tytul: 1.08;
  --lh-tekst: 1.62;
  --tracking-mono: 0.14em;

  /* Siatka i odstępy */
  --wrap: 78rem;
  --wrap-waski: 46rem;
  --gutter: clamp(1.25rem, 1rem + 2vw, 3rem);
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: clamp(4rem, 3rem + 5vw, 7rem);
  --s-10: clamp(5.5rem, 4rem + 7vw, 10rem);

  --radius: 2px;         /* marka techniczna - prawie brak zaokrągleń */
  --radius-duzy: 4px;

  /* Ruch - tożsamość marki: pewny i szybki, nie kontemplacyjny */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-wyjscie: cubic-bezier(0.55, 0, 0.45, 1);
  --t-szybki: 220ms;
  --t-bazowy: 420ms;
  --t-wolny: 800ms;

  --pasek-h: 3.25rem;    /* wysokość paska pilnego */
}

/* --- Typografia bazowa ---------------------------------------------------- */

body {
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--font-tekst);
  font-size: var(--fs-300);
  line-height: var(--lh-tekst);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--font-naglowek);
  font-weight: 700;
  line-height: var(--lh-tytul);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-800); line-height: var(--lh-ciasny); }
h2 { font-size: var(--fs-700); }
h3 { font-size: var(--fs-500); }

p { text-wrap: pretty; }

strong { font-weight: 600; }

::selection {
  background: var(--sygnal);
  color: var(--stal);
}

/* --- Elementy powtarzalne ------------------------------------------------- */

.etykieta {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--tekst-cichy);
}

.wrap {
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
}

.wrap--waski { width: min(100% - var(--gutter) * 2, var(--wrap-waski)); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Dostępność ----------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--sygnal);
  outline-offset: 3px;
}

.pomin-do-tresci {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 200;
  padding: var(--s-3) var(--s-4);
  background: var(--sygnal);
  color: var(--stal);
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  transform: translateY(-200%);
  transition: transform var(--t-szybki) var(--ease);
}

.pomin-do-tresci:focus-visible { transform: translateY(0); }