/* ============================================================
   Qualanto — Design Tokens (źródło prawdy)
   Marka: Qualanto · „Educational Booster System"
   Kierunek wizualny A „Evidence, ocieplone" — ciepły autorytet.
   Baza JASNA (parchment), navy/teal jako fundament wiarygodności,
   AMBER jako SYGNATURA (kolor wiodący — nie 5% akcent).
   Źródła: branding/05_visual-identity.md · podsumowanie-etapu 2026-06-02.
   ⚠ Zero wartości hardcode w komponentach — wszystko stąd.
   ============================================================ */

/* --- Web fonts (Google Fonts, OFL-1.1, komercyjnie OK) -------------
   Nagłówki: IBM Plex Serif (600/700) — nuta akademicka, autorytet.
   Tekst/UI: Inter (400–700) — humanistyczny sans, PL+EN.
   Zasada: jeden serif (nagłówki) + jeden sans (reszta), bez 3. kroju.
*/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* === COLOR TOKENS — paleta kanoniczna ======================== */
  /* Bazy i akcenty (branding §1) */
  --q-navy:        #0F2A47;  /* baza ciemna — tła sekcji, nagłówki na jasnym */
  --q-navy-700:    #15375C;  /* navy rozjaśniony — powierzchnie na ciemnym */
  --q-teal:        #127E73;  /* akcent chłodny — linki, elementy interaktywne */
  --q-teal-600:    #0E6A61;  /* teal hover/druk */
  --q-amber:       #F2A93B;  /* SYGNATURA — CTA, liczby-bohaterowie, highlight */
  --q-amber-600:   #E0941F;  /* amber hover (CTA) */
  --q-amber-ink:   #95610C;  /* amber „do tekstu" — ciemny, AA na kremie/bieli */
  --q-parchment:   #FAF6EC;  /* BAZA JASNA — główne tło (nie czysta biel) */
  --q-parchment-2: #F3ECDB;  /* parchment cieplejszy — pasy, wgłębienia */
  --q-cream:       #FFFFFF;  /* karty/powierzchnie podniesione na kremie */
  --q-ink:         #1A2330;  /* tekst podstawowy */
  --q-slate:       #5B6675;  /* tekst II / podpisy */
  --q-slate-2:     #8A93A1;  /* tekst III / meta, na jasnym */
  --q-on-dark-2:   #9FB1C2;  /* tekst II / deskryptor NA CIEMNYM (navy) */

  /* Status — semafor (ZAWSZE dublowany ikoną — dostępność) */
  --q-emerald:     #1E9E73;
  --q-status-amber:#F2A93B;
  --q-rose:        #D1495B;

  /* Obrysy / linie na kremie (ciepłe, nie szare) */
  --q-line:        #E6DECB;  /* obrys kart / dividery na kremie */
  --q-line-2:      #EFE8D8;  /* divider miękki */
  --q-line-dark:   rgba(255,255,255,0.14); /* divider na navy */

  /* === SEMANTYCZNE ROLE — MOTYW JASNY jest kanoniczny ========== */
  --bg:            var(--q-parchment); /* domyślne tło strony */
  --bg-2:          var(--q-parchment-2);/* pas/oddech */
  --bg-dark:       var(--q-navy);       /* sekcje ciemne (naprzemienność) */
  --surface:       var(--q-cream);      /* karta na kremie */
  --surface-dark:  var(--q-navy-700);   /* karta na navy */

  --fg-1:          var(--q-ink);    /* tekst główny na jasnym */
  --fg-2:          var(--q-slate);  /* tekst II na jasnym */
  --fg-3:          var(--q-slate-2);/* tekst III / meta na jasnym */
  --fg-on-dark-1:  var(--q-parchment); /* tekst główny na navy */
  --fg-on-dark-2:  var(--q-on-dark-2); /* tekst II / deskryptor na navy */

  --accent:        var(--q-amber);   /* SYGNATURA */
  --accent-hover:  var(--q-amber-600);
  --accent-fg:     var(--q-navy);    /* tekst NA amber (navy — kontrast OK) */
  --accent-ink:    var(--q-amber-ink); /* amber jako kolor tekstu (na jasnym) */
  --accent-cool:   var(--q-teal);    /* akcent chłodny (linki, interaktywne) */
  --accent-cool-hover: var(--q-teal-600);

  --border:        var(--q-line);
  --border-soft:   var(--q-line-2);
  --border-dark:   var(--q-line-dark);
  --focus-ring:    var(--q-teal);

  /* === TYPOGRAFIA ============================================== */
  --font-serif: 'IBM Plex Serif', 'Georgia', 'Times New Roman', serif; /* nagłówki */
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; /* tekst/UI */
  --font-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Skala typografii */
  --fs-display: clamp(40px, 5.2vw, 68px); /* hero h1 */
  --fs-h1:      clamp(34px, 4vw, 52px);
  --fs-h2:      clamp(26px, 3vw, 36px);
  --fs-h3:      clamp(20px, 2vw, 24px);
  --fs-lead:    clamp(18px, 1.6vw, 21px);
  --fs-body:    17px;
  --fs-sm:      15px;
  --fs-caption: 13px;
  --fs-eyebrow: 12px;
  --fs-data:    clamp(40px, 5vw, 64px); /* liczby-bohaterowie (PoC) */

  --lh-tight:   1.08;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-caps:  0.14em; /* eyebrow / kicker */

  /* Wagi krojów */
  --fw-serif:      600; /* nagłówki domyślne */
  --fw-serif-bold: 700;
  --fw-body:       400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;

  /* === SPACING (skala 4pt) ===================================== */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px;

  /* === RADII (umiarkowane zaokrąglenia 8–12px) ================= */
  --radius-0:    0px;
  --radius-1:    6px;   /* chipy, badge, drobne */
  --radius-2:    10px;  /* przyciski, pola, karty (domyślne) */
  --radius-3:    14px;  /* większe panele, hero-karty */
  --radius-pill: 999px;

  /* === CIENIE (oszczędnie — marka jest spokojna i płaska) ====== */
  --shadow-1: 0 1px 2px rgba(15,42,71,0.06);
  --shadow-2: 0 6px 24px rgba(15,42,71,0.10);
  --shadow-card: 0 2px 14px rgba(15,42,71,0.07);

  /* === LAYOUT ================================================== */
  --max-w-prose:   720px;
  --max-w-content: 1200px;
  --gutter:        clamp(20px, 4vw, 40px);

  /* === IKONY / KRESKA ========================================= */
  --stroke: 2px; /* ikony liniowe — spójna grubość ~2px */

  /* === MOTION (stonowane; tylko transform/opacity) ============ */
  --dur-instant: 120ms;
  --dur-fast:    200ms;
  --dur-base:    300ms;
  --dur-slow:    500ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   ELEMENT DEFAULTS — motyw jasny (parchment)
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1, h2, .h2, h3, .h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: var(--q-navy);
}
h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }

.display {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--q-navy);
  margin: 0;
}

p, .body {
  font-family: var(--font-sans);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  margin: 0;
}

.lead {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.eyebrow, .kicker {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-ink); /* amber-ink — czytelne na kremie */
}

.caption, small {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

/* Liczba-bohater (dowód PoC) — duży sans, amber na navy / navy na kremie */
.data-num {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-data);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

a { color: var(--accent-cool); }
a:hover { color: var(--accent-cool-hover); }

::selection { background: var(--q-amber); color: var(--q-navy); }

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