/* ==========================================================================
   CDKN — tokeny projektowe
   Paleta: alarm -> procedura -> rozwiązanie. Promień 0 px. Hairline 1 px.
   ========================================================================== */

/* Fonty self-hostowane (WOFF2) — wymóg RODO: brak połączenia z serwerami Google,
   więc IP użytkownika nie opuszcza infrastruktury serwisu.
   Pliki umieść w /assets/fonts/ pod nazwami użytymi poniżej. */

@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/archivo-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+2000-206F, U+20A0-20BF;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/archivo-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+2000-206F, U+20A0-20BF;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/archivo-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+2000-206F, U+20A0-20BF;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/archivo-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+2000-206F, U+20A0-20BF;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/source-serif-4-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+2000-206F, U+20A0-20BF;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/source-serif-4-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+2000-206F, U+20A0-20BF;
}
@font-face {
  font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/source-serif-4-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+2000-206F, U+20A0-20BF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/ibm-plex-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+2000-206F, U+20A0-20BF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/ibm-plex-mono-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+2000-206F, U+20A0-20BF;
}

:root {
  /* --- Kolor -------------------------------------------------------------- */
  --color-ink:            #171C24;  /* Atrament  — tekst, nagłówki, stopka   */
  --color-surface:        #E9EAE7;  /* Papier    — tło (chłodny, nie krem)   */
  --color-surface-raised: #F5F6F3;  /* Karta     — tło karty procedury       */
  --color-desk:           #DCDCD8;  /* Biurko    — tło poza kolumną treści   */
  --color-accent:         #DDA01A;  /* Sygnał    — CTA, pasek karty, liczniki*/
  --color-accent-press:   #C68C0F;  /* Sygnał / hover, active                */
  --color-calm:           #26594F;  /* Spokój    — stany rozwiązane          */
  --color-alert:          #96271F;  /* Alarm     — wyłącznie opis problemu   */
  --color-alert-wash:     #F5E7E5;  /* Alarm / tło komunikatu błędu          */
  --color-pencil:         #5D6066;  /* Ołówek    — podpisy, metadane         */
  --color-line:           rgba(23, 28, 36, 0.18); /* hairline 1 px           */
  --color-line-soft:      rgba(23, 28, 36, 0.12);

  /* --- Typografia --------------------------------------------------------- */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body:    'Source Serif 4', Georgia, serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --text-1: 48px; --lh-1: 1.05; --fw-1: 600;  /* H1 desktop                  */
  --text-2: 34px; --lh-2: 1.15; --fw-2: 600;  /* H2                          */
  --text-3: 26px; --lh-3: 1.20; --fw-3: 600;  /* H3                          */
  --text-4: 20px; --lh-4: 1.35; --fw-4: 600;  /* H4, wiersz akordeonu        */
  --text-5: 17px; --lh-5: 1.60; --fw-5: 400;  /* body                        */
  --text-6: 15px; --lh-6: 1.50; --fw-6: 400;  /* body small                  */
  --text-7: 13px; --lh-7: 1.30; --fw-7: 500;  /* mono, etykiety, tracking    */

  /* --- Odstępy (baza 4 px) ----------------------------------------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px;

  /* --- Krawędzie, promienie, cienie -------------------------------------- */
  --radius-none: 0px;   /* domyślny — świat dokumentu nie ma zaokrągleń      */
  --border-hairline: 1px;
  --border-strong: 2px;
  --shadow-1: 0 1px 2px rgba(23, 28, 36, 0.14); /* arkusz na biurku         */
  --shadow-2: 0 2px 6px rgba(23, 28, 36, 0.18); /* megamenu, dialog          */
}

/* --- Punkty łamania: 390 / 768 / 1024 / 1440 (w tw.config.js) ------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-desk);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-5);
  line-height: var(--lh-5);
}

h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.012em; }

a { color: var(--color-ink); text-decoration: none; }
a:hover { color: var(--color-calm); text-decoration: underline; text-underline-offset: 3px; }

button, input, select, textarea { font: inherit; color: inherit; border-radius: var(--radius-none); }

/* Focus: obrys 2 px przesunięty o 2 px — na każdym elemencie interaktywnym */
:focus-visible {
  outline: var(--border-strong) solid var(--color-accent);
  outline-offset: 2px;
}
.on-ink :focus-visible, .on-calm :focus-visible { outline-color: var(--color-surface-raised); }

::selection { background: var(--color-accent); color: var(--color-ink); }

/* Etykieta mono — używana w marginesach sekcji i w kartach procedury */
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-7);
  font-weight: var(--fw-7);
  letter-spacing: 0.08em;
}

.prose { font-family: var(--font-body); text-wrap: pretty; }

/* Link „pomiń do treści" */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 18px; background: var(--color-accent); color: var(--color-ink); font-weight: 600;
}
.skip:focus { left: 0; }

/* --- Reduced motion: rotator i wszystkie przejścia wyłączone -------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Druk: strona tematu musi się sensownie drukować ---------------------- */
@media print {
  @page { margin: 16mm; }
  body { background: #fff; color: #000; font-size: 11pt; }
  [data-print="hide"] { display: none !important; }
  main { width: 100% !important; max-width: none !important; box-shadow: none !important; }
  .proc-card { break-inside: avoid; border: 1px solid #000; }
  .proc-card__rail { background: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}