/* === RedSkyCat: Liquid Glass with Red accents (light/dark) === */

/* ---------- LIGHT THEME (default) ---------- */
:root{
  --bg:#F6F7F9;
  --bg-grad-1: rgba(225,29,72,.08);     /* red glow */
  --bg-grad-2: rgba(20,110,180,.08);    /* cool blue glow */

  --glass: rgba(255,255,255,.72);
  --glass-border: rgba(0,0,0,.06);

  --text:#0F1111;
  --muted:#4B5563;

  --brand:#E11D48;
  --brand-2:#F43F5E;

  --link:#146EB4;
  --link-hover:#0F5A94;
  --link-visited:#0B4F82;

  --shadow: 0 12px 34px rgba(17,24,39,.08);
}

/* ---------- DARK THEME ---------- */
html[data-theme="dark"]{
  --bg:#15161A;                        /* near-black with warmth */
  --bg-grad-1: rgba(244,63,94,.18);    /* soft red glow */
  --bg-grad-2: rgba(166,210,255,.18);  /* soft blue glow */

  --glass: rgba(26,28,32,.88);
  --glass-border:#2B2F37;

  --text:#EAEFF5;
  --muted:#B9C2CC;

  --brand:#E11D48;
  --brand-2:#F43F5E;

  --link:#A9D4FF;
  --link-hover:#CBE6FF;
  --link-visited:#8EBBEA;

  --shadow: 0 12px 34px rgba(0,0,0,.38);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 10% -10%, var(--bg-grad-1), transparent 60%),
    radial-gradient(1000px 700px at 85% 0%, var(--bg-grad-2), transparent 65%),
    linear-gradient(#FFFFFF, var(--bg));
  line-height:1.6;
}
html[data-theme="dark"] body{
  background:
    radial-gradient(1150px 650px at 22% 18%, var(--bg-grad-1), transparent 55%),
    radial-gradient(1050px 600px at 78% 24%, var(--bg-grad-2), transparent 60%),
    radial-gradient(1600px 1000px at 50% 120%, rgba(0,0,0,.35), transparent 60%),
    linear-gradient(180deg, #101418 0%, var(--bg) 60%, var(--bg) 100%);
  background-attachment: fixed, fixed, scroll, scroll;
}

.container{max-width:1100px;margin:0 auto;padding:0 20px}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px}

/* ---------- Header (glass) ---------- */
.site-header{
  position:sticky;top:0;z-index:10;
  background: var(--glass);
  border-bottom:1px solid var(--glass-border);
  backdrop-filter: saturate(160%) blur(12px);
}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:800}
.nav a{
  color:var(--text); text-decoration:none; margin-left:18px; opacity:.95;
  border-bottom:2px solid transparent; padding-bottom:2px;
}
.nav a:hover{ border-bottom-color:var(--brand); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 18px;border-radius:14px;
  border:1px solid var(--glass-border);
  text-decoration:none;color:var(--text);font-weight:700;
  background: var(--glass);
  box-shadow: var(--shadow);
  backdrop-filter: saturate(160%) blur(8px);
  transition:.2s transform,.2s opacity,.2s background,.2s box-shadow;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 14px 36px rgba(17,24,39,.10); }
.btn.primary{
  background: linear-gradient(180deg,var(--brand-2) 0%, var(--brand) 100%);
  border:1px solid #8B102B; color:#fff !important;
}
.btn.ghost{ background: rgba(255,255,255,.55); }
html[data-theme="dark"] .btn.ghost{ background: rgba(255,255,255,.07); border-color:#2A2F38; }

/* ---------- Links ---------- */
a{
  color:var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
a:hover{ color:var(--link-hover); text-decoration-thickness:3px; }
a:visited{ color:var(--link-visited); }
.nav a{ text-decoration:none; }

/* ---------- Hero ---------- */
.hero{padding:64px 0 24px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:32px}
.hero h1{font-size: clamp(32px, 4vw, 56px); line-height: 1.1; margin: 10px 0}
.tagline{font-size: clamp(16px,2.2vw,20px);color:var(--muted);max-width:58ch}
.quick-points{display:flex;gap:12px;flex-wrap:wrap;padding:0;margin:14px 0;list-style:none}
.quick-points li{
  background: var(--glass);
  border:1px solid var(--glass-border);
  padding:6px 10px;border-radius:999px;font-size:14px;opacity:.95
}
.hint{color:var(--muted);font-size:14px;margin:8px 0}

html[data-theme="dark"] .hero h1{ color:#FDE7EC; text-shadow:0 1px 0 rgba(0,0,0,.35); }
html[data-theme="dark"] .hero .tagline{ color:#DCC2C8; }

/* ---------- Glass cards ---------- */
.hero-card .card, .kit, .box, .faq details{
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 18px; padding:18px; box-shadow: var(--shadow);
  backdrop-filter: saturate(160%) blur(14px);
}
html[data-theme="dark"] .hero-card .card,
html[data-theme="dark"] .kit,
html[data-theme="dark"] .box,
html[data-theme="dark"] .faq details{
  background: rgba(26,28,32,.92);
  border-color: #2A2F38;
  box-shadow: 0 10px 28px rgba(0,0,0,.4);
}

.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.pill{
  font-size:12px;padding:4px 8px;border-radius:999px;
  background:rgba(255,255,255,.6);border:1px solid var(--glass-border);color:var(--text)
}
html[data-theme="dark"] .pill{ background: rgba(255,255,255,.06); border-color:#2A2F38; color:#DDE5EE; }

.card-body label{display:block;font-size:14px;margin:8px 0 4px;color:var(--muted)}
.card-body select{
  width:100%;padding:10px;border-radius:10px;
  border:1px solid var(--glass-border);background:rgba(255,255,255,.65);color:var(--text);
  backdrop-filter: blur(6px);
}
html[data-theme="dark"] .card-body select{ background:#0F1111; border-color:#2A2F38; }
.card-body select:focus{ outline:3px solid var(--brand); outline-offset:2px; }
.quiz-result{margin-top:10px}

/* ---------- Kits & Guides ---------- */
.kits{padding:20px 0}
.kits-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.product-list{margin:8px 0 0 18px}
.product-list a{ font-weight:600; }

.guides{padding:20px 0 40px}
.guides-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding-left:18px}
.guides-list a{ font-weight:600; }

/* ---------- Category / Article ---------- */
.article{padding:30px 0 40px}
.article .meta{color:var(--muted);font-size:14px;margin-top:-6px}
.article .grid{display:grid;grid-template-columns:2.2fr 1fr;gap:20px}
.compare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.compare .tile{padding:14px;border:1px solid var(--glass-border);border-radius:14px;background:var(--glass)}
.compare .title{font-weight:800;margin:0 0 6px 0}
.badge{display:inline-block;font-size:12px;padding:4px 8px;border-radius:999px;background:linear-gradient(180deg,var(--brand-2),var(--brand));color:#fff;border:1px solid #8B102B}
ul.pros, ul.cons{margin-left:18px}

.cta{display:inline-flex;gap:10px;align-items:center;margin-top:8px}
.cta a{
  color:#fff !important;
  background: linear-gradient(180deg,var(--brand-2) 0%, var(--brand) 100%);
  padding:10px 12px;border-radius:12px;text-decoration:none;font-weight:800;
  border:1px solid #8B102B;
}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.75));
  backdrop-filter: blur(8px);
  padding:18px 0 30px; margin-top:20px
}
html[data-theme="dark"] .site-footer{ background: rgba(26,31,36,.88); }
.footnav a{color:var(--text);opacity:.9;text-decoration:none;margin-left:12px}
.footnav a:hover{ color:#fff; }

/* ---------- Focus accessibility ---------- */
a:focus-visible, button:focus-visible, .btn:focus-visible, select:focus-visible{
  outline:3px solid var(--brand); outline-offset:2px; border-radius:10px;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .kits-grid{grid-template-columns:1fr}
  .guides-list{grid-template-columns:1fr}
  .article .grid{grid-template-columns:1fr}
  .compare-grid{grid-template-columns:1fr}
}

.card-desc {
  margin: 0;
  color: var(--text-secondary);
}

/* definicje zmiennych */
:root {
  --text-primary: #111827;   /* gray-900 */
  --text-secondary: #374151; /* gray-700 */
  --bg: #ffffff;
}
[data-theme="dark"] {
  --text-primary: #f9fafb;   /* gray-50 */
  --text-secondary: #d1d5db; /* gray-300 */
  --bg: #111827;
}