/* =====================================================================
   msulawiak.pl — wspólny system projektowy (strona główna + podstrony)
   Tokeny, kroje, podstawy, komponenty wspólne. Bez zależności zewnętrznych.
   Kolory zmieniasz TYLKO w sekcji „Tokeny” — reszta korzysta ze zmiennych.
   ===================================================================== */

/* ---------- Kroje (self-hosted, licencja SIL OFL 1.1 — pliki LICENSE-* w assets/fonts) ----------
   Kroje pierwszego ekranu: font-display: optional + <link rel="preload"> w <head> — font zdąży przy
   pierwszym renderze albo strona zostaje przy kroju zastępczym (bez „przeskoku” = brak przesunięć układu).
   Tekst ciągły (Inter 400): swap — podmienia się, zanim czytelnik do niego dojdzie. */
@font-face { font-family: "Inter Display"; src: url("../fonts/InterDisplay-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: optional; }
@font-face { font-family: "Inter Display"; src: url("../fonts/InterDisplay-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: optional; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: optional; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/InstrumentSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: optional; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: optional; }
/* Kroje zastępcze dopasowane metrycznie do Inter (gdyby font nie zdążył) */
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 107.3%; ascent-override: 90.3%; descent-override: 22.5%; line-gap-override: 0%; }
@font-face { font-family: "Inter Display Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 100.2%; ascent-override: 96.7%; descent-override: 24.1%; line-gap-override: 0%; }

/* ---------- Tokeny ---------- */
:root {
  color-scheme: dark;
  /* Kolory — motyw ciemny (domyślny) */
  --c-bg: #05070b;            /* tło strony */
  --c-bg-2: #080b11;          /* tło sekcji naprzemiennych */
  --c-surface: #0d121b;       /* karty */
  --c-surface-2: #111722;     /* karty — wyróżnione */
  --c-line: rgba(255, 255, 255, .08);
  --c-line-2: rgba(255, 255, 255, .15);
  --c-text: #eef1f6;          /* kontrast 17,8:1 na tle */
  --c-text-2: #c4ccd8;        /* 12,5:1 */
  --c-muted: #8d97a8;         /* 6,8:1 — tekst drugorzędny */
  --c-accent: #f2b45a;        /* bursztyn = decyzja człowieka. Tło przycisku. */
  --c-accent-2: #ffd394;      /* jaśniejszy akcent (gradienty, poświata) */
  --c-accent-ink: #1a1206;    /* tekst na akcencie — 10,1:1 */
  --c-accent-text: #f6c27a;   /* akcent jako kolor tekstu na ciemnym — 12,4:1 */
  --c-signal: #7cc8ff;        /* chłodny „sygnał” agentów */
  --c-ok: #5ad69c;
  --c-no: #ff8b7b;
  --c-focus: #ffd394;
  --c-todo-bg: rgba(242, 180, 90, .12);

  /* Typografia */
  --f-display: "Inter Display", "Inter Display Fallback", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-text: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-hero: clamp(1.75rem, 3.2vw, 2.9rem);
  --fs-h1: clamp(2.15rem, 1.25rem + 3.1vw, 4.25rem);
  --fs-h2: clamp(1.8rem, 1.2rem + 2vw, 3rem);
  --fs-h3: clamp(1.15rem, 1rem + .5vw, 1.375rem);
  --fs-lead: clamp(1.125rem, 1rem + .5vw, 1.4rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-micro: .75rem;
  --tracking-display: -.035em;

  /* Rytm i kształty */
  --maxw: 76rem;
  --pad: clamp(1.25rem, 4.5vw, 3rem);
  --space-section: clamp(5rem, 11vw, 9.5rem);
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 24px 60px -24px rgba(0, 0, 0, .7);
}

/* Motyw jasny (podstrony; przełącznik w nagłówku) */
:root[data-theme="light"] {
  color-scheme: light;
  --c-bg: #f6f5f1;
  --c-bg-2: #efede7;
  --c-surface: #ffffff;
  --c-surface-2: #fbfaf7;
  --c-line: rgba(12, 16, 23, .09);
  --c-line-2: rgba(12, 16, 23, .17);
  --c-text: #0c1017;          /* 17,5:1 */
  --c-text-2: #2c3340;        /* 11,6:1 */
  --c-muted: #545d6b;         /* 6,1:1 */
  --c-accent-text: #8a5300;   /* 5,8:1 */
  --c-signal: #1f6fb2;        /* 4,8:1 */
  --c-ok: #1d7a4f;
  --c-no: #b4372a;
  --c-focus: #b86a00;
  --c-todo-bg: rgba(138, 83, 0, .09);
  --shadow-card: 0 1px 2px rgba(12, 16, 23, .05), 0 18px 40px -24px rgba(12, 16, 23, .25);
}

/* ---------- Podstawy ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1.5rem; }
body {
  margin: 0; background: var(--c-bg); color: var(--c-text);
  font: 400 var(--fs-body)/1.6 var(--f-text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "calt" 1;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
button { font: inherit; color: inherit; }
::selection { background: rgba(242, 180, 90, .35); color: var(--c-text); }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .6rem 1rem; border-radius: var(--radius-s);
  background: var(--c-text); color: var(--c-bg); font-weight: 600; text-decoration: none; transition: top .2s;
}
.skip-link:focus { top: 1rem; }

/* Etykieta nad nagłówkiem (mono, wersaliki) */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font: 400 var(--fs-micro)/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted);
}
.eyebrow::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 10px var(--c-accent); }

/* Znacznik treści do potwierdzenia — widoczny celowo */
.todo {
  display: inline; padding: .05em .45em; border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  font: 400 .78em/1.5 var(--f-mono); letter-spacing: .02em; color: var(--c-accent-text);
  background: var(--c-todo-bg); border: 1px dashed color-mix(in srgb, var(--c-accent-text) 55%, transparent);
  vertical-align: .08em;
}

/* ---------- Przyciski ---------- */
.btn {
  --btn-bg: var(--c-surface-2); --btn-fg: var(--c-text); --btn-bd: var(--c-line-2);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 3.25rem; padding: .85rem 1.5rem; border-radius: 999px; border: 1px solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg); font: 600 1rem/1.2 var(--f-text); letter-spacing: -.005em;
  text-decoration: none; cursor: pointer; isolation: isolate;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background-color .2s;
}
.btn__arrow { transition: transform .25s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn--accent {
  --btn-bg: linear-gradient(180deg, var(--c-accent-2), var(--c-accent)); --btn-fg: var(--c-accent-ink); --btn-bd: rgba(255, 220, 160, .85);
  background: var(--btn-bg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 10px 30px -10px rgba(242, 180, 90, .55);
}
.btn--accent:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 16px 40px -12px rgba(242, 180, 90, .75); }
.btn--accent:active { transform: translateY(0); }
.btn[hidden] { display: none; }

/* ---------- Stopka ---------- */
.site-footer { border-top: 1px solid var(--c-line); padding: 2.25rem 0 2.75rem; color: var(--c-muted); font-size: var(--fs-small); }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2.5rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.site-footer a { color: var(--c-text-2); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s var(--ease-out), color .2s; }
.site-footer a:hover { color: var(--c-text); background-size: 100% 1px; }

/* ---------- Przełącznik języka PL/EN (nagłówek i stopka) ----------
   Zwykłe linki: każda wersja ma własny adres (/?lang=pl, /en/), działa bez JS. Pole dotyku 44 px. */
.lang { display: flex; align-items: center; gap: .25rem; font: 400 var(--fs-micro)/1 var(--f-mono); letter-spacing: .12em; }
.lang a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 .6rem;
  border-radius: 999px; color: var(--c-muted); text-decoration: none; background: none; transition: color .2s, background-color .2s;
}
.lang a:hover { color: var(--c-text); }
.site-footer .lang { margin-inline: -.8rem; }   /* tekst PL/EN równo z krawędzią treści mimo pola dotyku */
.lang a[aria-current] { color: var(--c-text); text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 1px; text-underline-offset: .45em; }

/* ---------- Ruch: szacunek dla prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}