/* reskin.css - Faza 2 rollout nowego designu na stare strony.
   Ladowany PO inline <style> starej strony -> nadpisuje zmienne + fonty.
   Stary CSS jest zmiennowy (var(--bg-deep) itd.), wiec flip ciemny->jasny = override :root.
   Struktura/responsywnosc starej strony NIETKNIETA. Zmiana designu = ten jeden plik. */

/* 1) PALETA: ciemny -> jasny (nowe tokeny CyberRanking) */
:root {
  --bg-deep: #f7fbf9;          /* tlo strony */
  --bg-card: #ffffff;          /* karty */
  --bg-card-hover: #f2f7f5;
  --bg-surface: #f1f5f4;       /* wnetrza (verdict-score) */
  --border: rgba(120,140,170,.18);
  --border-hover: rgba(120,140,170,.34);
  --text-primary: #14203a;     /* ink */
  --text-secondary: #4c586e;   /* muted */
  --text-muted: #6b7688;
  --accent: #047857;           /* green2 (brand) */
  --accent-glow: rgba(4,120,87,.15);
  --green: #12b981;
  --green-muted: rgba(18,185,129,.15);
  --orange: #9a5a12;           /* warn */
  --orange-muted: rgba(154,90,18,.1);
  --red: #c0392b;
}

/* 2) FONTY: Space Grotesk / Inter / Space Mono -> Manrope */
body { font-family: 'Manrope', system-ui, -apple-system, sans-serif; }
.logo,
.article-hero h1,
.article-content h2, .article-content h3,
.verdict-box-title, .verdict-badge, .verdict-score-val,
.product-card-title, .decision-card-title, .verdict-card-title,
.related-card h4, .term-title, .tip-box strong:first-of-type {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif !important;
}
/* eyebrow "dossier //" zostaje mono (celowy edytorialowy akcent de-AI), tylko kolor z tokenu */
.article-content .sec-eyebrow { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* 3) HEADER: hardcoded ciemny -> jasny (nie zmienne) */
header {
  background: rgba(247,251,249,.85) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.logo { letter-spacing: -.3px; color: var(--text-primary); }
.logo span { color: var(--accent); }

/* 4) MOBILE-NAV: ma inline style (ciemne tlo) -> override !important */
.mobile-nav { background: rgba(255,255,255,.97) !important; border-bottom: 1px solid var(--border) !important; }

/* 5) CIENIE hover: ciemne -> lekkie (light mode) */
.related-card:hover { box-shadow: 0 10px 26px -18px rgba(20,32,58,.35) !important; }

/* 6) AKCENTY hardcoded na niebieskim -> zielone */
.info-box { background: rgba(4,120,87,.05); border-color: rgba(4,120,87,.18); }
.info-box strong { color: var(--accent); }
.row-highlight td { background: rgba(4,120,87,.05); }
.score-chip.info { color: var(--accent); border-color: rgba(4,120,87,.3); }
.score-chip.good { border-color: rgba(18,185,129,.35); }
.score-chip.ok { border-color: rgba(154,90,18,.35); }

/* 7) hover-glow CTA: niebieski -> zielony (nadpisuje FAZA2-CTA !important) */
.product-link:hover, .product-link-secondary:hover, .cta-btn:hover, .cta-hover-fade:hover,
.vpn-card-btn:hover, .btn-primary:hover, .product-card-btn:hover, .emergency-btn-secondary:hover {
  box-shadow: 0 8px 22px rgba(4,120,87,.32) !important;
}

/* 8) to-top hover na zielono (uzywa zmiennych, ale accent hardcode w :hover) */
#to-top:hover { border-color: var(--accent); color: var(--accent); }

/* 9) FIX: .term-body strong hardcoded #e6edf3 (near-white) -> niewidoczny na jasnym.
   Globalnie na ink; .term.warn (ciemny terminal) zostaje jasny tekst. */
.term-body strong { color: var(--text-primary); }
.term.warn .term-body strong { color: #e6edf3; }

/* 10) FIX: .view-list li jest flex -> tekst+<strong>+tekst rozbijaja sie na osobne
   flex-itemy (3 kolumny). Blok + dot absolutnie = normalny inline flow. */
.view-list li { display: block; position: relative; padding-left: 16px; }
.view-list li .vl-dot { position: absolute; left: 1px; top: 8px; margin-top: 0; }

/* .term.warn (terminal security) celowo zostaje ciemny - akcent, nie ruszamy */