/* ═══════════════ DevOstro — WSPÓLNY motyw „Kartka/Zeszyt" dla podstron ═══════════════
   Ładowany NA KOŃCU <head> (wygrywa kaskadą z <style> strony). Homepage ma własny, pełny blok.
   ⚠ NIE podpinać na stronach KURSÓW / wieża / proba-dnia / goblin (#93 — kursy nietknięte).
   Tokeny = system Kodostro: papier #F4EFE3 · atrament #1A2A44 · długopis #D6402B · marker #FFE87C. */

/* ── suwak motywu (wstawia theme.js) — kopia stylu z homepage ── */
.theme-toggle {
  position: relative; width: 68px; height: 32px; flex-shrink: 0;
  border: 1.5px solid #00c8ff66; background: rgba(255,255,255,.06); border-radius: 999px;
  cursor: pointer; padding: 0; transition: background .2s, border-color .2s, box-shadow .2s;
  box-shadow: 0 0 14px #00c8ff22;
}
.theme-toggle:hover { border-color: #00c8ff; box-shadow: 0 0 18px #00c8ff44; }
.theme-toggle .tt-ico { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:14px; line-height:1; pointer-events:none; }
.theme-toggle .tt-knob { overflow:hidden;
  position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #00c8ff; box-shadow: 0 1px 4px rgba(0,0,0,.45);
  transition: transform .26s cubic-bezier(.34,1.4,.5,1), background .26s;
}
[data-theme="light"] .theme-toggle { border-color: #D6402B66; box-shadow: 0 0 12px rgba(214,64,43,.15); background: #FFFCF3; }
[data-theme="light"] .theme-toggle:hover { border-color: #D6402B; }
[data-theme="light"] .theme-toggle .tt-knob { overflow:hidden; transform: translateX(38px); background: linear-gradient(135deg, #FFE87C, #D6402B); }

.theme-toggle .tt-knob .tt-r { display:none; }
[data-theme="light"] .theme-toggle .tt-knob .tt-l { display:none; }
[data-theme="light"] .theme-toggle .tt-knob .tt-r { display:flex; }
/* strony bez <nav> → pływający suwak w rogu */
.theme-toggle.tt-float { position: fixed; top: 14px; right: 14px; z-index: 300; }
/* hint pierwszej wizyty */
.theme-toggle.tt-pulse { animation: tt-ping 1.6s ease-out 3; }
@keyframes tt-ping { 0% { box-shadow: 0 0 0 0 #00c8ff66; } 70% { box-shadow: 0 0 0 9px #00c8ff00; } 100% { box-shadow: 0 0 0 0 #00c8ff00; } }
.theme-hint {
  position: absolute; top: 40px; right: 0; white-space: nowrap; z-index: 320;
  background: #1a1f2a; color: #dee5f0; border: 1px solid #2a3646; border-radius: 8px;
  padding: 7px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
  box-shadow: 0 8px 24px rgba(0,0,0,.35); animation: tt-hint-in .3s ease-out;
}
.theme-hint::before { content: ''; position: absolute; top: -5px; right: 22px; width: 9px; height: 9px;
  background: #1a1f2a; border-left: 1px solid #2a3646; border-top: 1px solid #2a3646; transform: rotate(45deg); }
@keyframes tt-hint-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
[data-theme="light"] .theme-hint { background:#FFFCF3; color:#1A2A44; border-color:#D5CDB8; box-shadow:2px 4px 12px rgba(26,42,68,.22); }
[data-theme="light"] .theme-hint::before { background:#FFFCF3; border-color:#D5CDB8; }
@media (prefers-reduced-motion: reduce) { .theme-toggle.tt-pulse { animation: none; } }

/* ── KARTKA: wspólne tokeny (standardowy system --bg/--bg2/… używany przez artykuły bloga,
      autor, start, paywall, kontakt, dlaczego-my, privacy, regulamin) ── */
:root[data-theme="light"] {
  --bg:#F4EFE3; --bg2:#FFFCF3; --bg3:#EDE6D3;
  --text:#1A2A44; --muted:#5C5142; --border:#D5CDB8;  /* muted ciemniejszy/cieplejszy = czytelny tekst opisów */
  --purple:#D6402B; --purple2:#D6402B; --cyan:#D6402B;
  --green:#2E7D4F; --yellow:#B4540A; --red:#D6402B;
  /* system blog-index (inne nazwy) */
  --panel:#FFFCF3; --ink:#1A2A44; --line:#D5CDB8; --lav:#D6402B; --cyanb:#D6402B;
  /* --k-* (kurs = cappuccino przez course-kartka.css) → TU zmapowane na paletę MARKETINGOWĄ, żeby edytor praktyki
     (practice.css [data-theme=light] używa --k-*) świecił w barwach marketingu na stronach na theme-kartka (np. wieża).
     Strony marketingowe bez praktyki tych zmiennych nie używają → zero efektu ubocznego. */
  --k-mleko:#FFFCF3; --k-pianka:#FBF6EC; --k-papier:#F4EFE3; --k-latte:#EDE6D3; --k-linia:#D5CDB8;
  --k-espresso50:#5C5142; --k-espresso:#1A2A44; --k-espresso900:#1A2A44;
  --k-terakota:#D6402B; --k-terakota-tx:#B23520; --k-ochra:#B4540A;
  --k-wanilia-bg:#FBF3D9; --k-wanilia-br:#E4D29F; --k-wanilia-tx:#806018;
  --k-szalwia-bg:#E6F1E6; --k-szalwia-br:#C2D4BC; --k-szalwia-tx:#2E7D4F; --k-szalwia-solid:#2E7D4F;
  --k-roz-bg:#F7E5DF; --k-roz-br:#E0C0B6; --k-roz-tx:#9C4A38;
  --k-lawenda-bg:#EAE4F0; --k-lawenda-br:#CFC4DE; --k-lawenda-tx:#695A86;
  --k-kod-keyword:#7A3E9D; --k-kod-string:#2E7D4F; --k-kod-fn:#0B6BB8; --k-kod-num:#B0AA96; --k-kod-comment:#6B7280; --k-kod-op:#43362B;
  --marker:#FFE87C;   /* żółty „mazak" (highlight pod nagłówkami — blog/homepage) */
}
/* numery linii edytora = wyraźnie INNY (przygaszony) kolor niż kod (żądanie właściciela) */
[data-theme="light"] .cwa-num { color:var(--k-kod-num); }

/* magnet e-mail (.dvo-magnet, np. capture goblina na zagraj-snake) — twarde ciemne hexy → papier */
[data-theme="light"] .dvo-magnet { background:var(--bg2); border-color:var(--border); border-left-color:var(--green); color:#43362B; }
[data-theme="light"] .dvo-magnet h3 { color:var(--text); }
[data-theme="light"] .dvo-magnet h3 span { color:var(--green); }
[data-theme="light"] .dvo-magnet p.dvo-sub { color:#43362B; }
[data-theme="light"] .dvo-magnet-form input { background:var(--bg2); border-color:var(--border); color:var(--text); }
[data-theme="light"] .dvo-magnet-form input:focus { border-color:var(--green); }
[data-theme="light"] .dvo-magnet-form button { background:var(--green); color:#fff; }
[data-theme="light"] .dvo-magnet-consent { color:var(--muted); }

/* papier + kratka zamiast ciemnych gradientów/zdjęcia (bije <style> strony kaskadą — plik ładowany później) */
[data-theme="light"] body {
  background:
    linear-gradient(rgba(70,110,160,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70,110,160,.11) 1px, transparent 1px),
    var(--bg);
  background-size: 26px 26px, 26px 26px, auto; background-attachment: fixed;
  color: var(--text); font-family: 'Segoe UI', system-ui, sans-serif;
}
/* czerwony margines zeszytu */
[data-theme="light"] body::before {
  content:''; position:fixed; top:0; bottom:0; left:clamp(34px, 6vw, 84px); width:2px;
  background:rgba(214,64,43,.38); z-index:60; pointer-events:none;
}
@media (max-width: 900px) { [data-theme="light"] body::before { display:none; } }

[data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3 {
  font-family: Georgia, 'Times New Roman', serif !important; color: var(--text);
}
/* logo/wordmark = maszyna do pisania (spójne 1:1 z homepage: Courier, spacja 3px, rozmiar 1.5rem) */
[data-theme="light"] .nav-logo, [data-theme="light"] .logo, [data-theme="light"] .footer-logo {
  font-family: 'Courier New', Courier, monospace !important; font-weight: 700; letter-spacing: 3px;
  font-size: 1.5rem; color: var(--text);
}
[data-theme="light"] .footer-logo { font-size: 1.1rem; }   /* stopka mniejsza, jak na homepage */
/* TOP jaśniejszy niż papier (jak homepage #FFFDF7) — wyodrębnia nagłówek od treści */
[data-theme="light"] nav { background: rgba(255,253,247,.9); border-bottom-color: var(--border); }
[data-theme="light"] nav a { color: var(--muted); }
[data-theme="light"] nav a:hover { color: var(--text); }
/* logo OSTRO: flat długopis zamiast gradientu */
[data-theme="light"] .ostro, [data-theme="light"] .nav-logo .o, [data-theme="light"] .logo .o {
  background: none !important; -webkit-text-fill-color: #D6402B; color: #D6402B;
}
[data-theme="light"] footer { background: #EAE2CC; border-top-color: var(--border); color: var(--muted); }
[data-theme="light"] footer a { color: #D6402B; }

/* typowe komponenty stron (artykuł bloga / karty / CTA) */
[data-theme="light"] article p, [data-theme="light"] p { color: #43362B; }   /* tekst opisów ciemny = czytelny */
/* [BLOG 260723] listy w artykułach BYŁY NIEWIDOCZNE w jasnym: ciemny arkusz dawał im #cdd6e4 (jasny szary) na papierze.
   Dotyczyło WSZYSTKICH artykułów z listą, nie tylko nowych — zgłoszenie właściciela 23.07. */
[data-theme="light"] article ul, [data-theme="light"] article ol,
[data-theme="light"] article li, [data-theme="light"] li { color: #43362B; }
[data-theme="light"] article a { color: #D6402B; }                            /* linki = długopis (ZERO niebieskiego) */
[data-theme="light"] .lead { color: var(--text); }
[data-theme="light"] .quote { background: var(--bg2); border-color: var(--border); border-left-color: #D6402B; color: var(--text); }
[data-theme="light"] .cta { background: var(--bg2); border-color: var(--border); box-shadow: 2px 3px 0 rgba(26,42,68,.08); border-radius: 4px; }
/* ── PRZYCISKI = BEŻ + atrament (jak główna; koniec zielonego/czerwonego) ── */
[data-theme="light"] .btn-primary, [data-theme="light"] .nav-cta, [data-theme="light"] .btn, [data-theme="light"] button.cta {
  background: #F1E8D6 !important; color: #43362B !important; border: 1px solid #D5CDB8 !important;
  box-shadow: 2px 3px 0 rgba(46,36,28,.16); border-radius: 8px;
}
[data-theme="light"] .btn-primary:hover, [data-theme="light"] .nav-cta:hover, [data-theme="light"] .btn:hover { background: #E8DCC4 !important; opacity: 1; }
[data-theme="light"] .card { background: var(--bg2); border-color: var(--border); border-radius: 4px; box-shadow: 2px 3px 0 rgba(26,42,68,.08); }
[data-theme="light"] pre { background: var(--bg2); border: 1px solid var(--border); color: var(--text); }

/* [BLOG-148 260723] żywy kod w artykule bloga — w jasnym motywie „z kawy" (te same tokeny --k-*, co edytor praktyki),
   żeby blok nie był czarną dziurą na papierze. Właściciel 23.07: „zrób jasne ciemne tło, może to z kawy". */
[data-theme="light"] .zyj { background: var(--k-kod-bg, var(--k-mleko)); border-color: var(--k-linia); box-shadow: 2px 3px 0 rgba(46,36,28,.06); }
[data-theme="light"] .zyj-head { background: var(--k-latte); border-bottom-color: var(--k-linia); }
[data-theme="light"] .zyj-plik { color: var(--k-espresso50); }
[data-theme="light"] .zyj-lbl { color: var(--k-terakota-tx, #B0533A); }
[data-theme="light"] .zyj-kod { background: var(--k-kod-bg, var(--k-mleko)); color: var(--k-espresso); }
[data-theme="light"] .zyj-akcje { background: var(--k-kod-bg, var(--k-mleko)); }
[data-theme="light"] .zyj-btn { background: var(--k-szalwia-solid, #6E8B6B); color: var(--k-mleko, #FBF7EF); }
[data-theme="light"] .zyj-hint { color: var(--k-espresso50); }
[data-theme="light"] .zyj-out { background: var(--k-pianka); border-top-color: var(--k-linia); color: var(--k-espresso); }
[data-theme="light"] .zyj-out.pusto { color: var(--k-espresso50); }
[data-theme="light"] .zyj-out.blad { color: #B23B2E; }

/* blog-index (system --panel/--ink): karty i featured na papierze */
[data-theme="light"] .feat, [data-theme="light"] .item {
  background: var(--panel); border-color: var(--line); border-radius: 4px; box-shadow: 2px 3px 0 rgba(26,42,68,.08);
}
[data-theme="light"] .masthead h1 em { color: #D6402B; }
/* /autor/: nazwisko gradient → czarny atrament na kartce */
[data-theme="light"] .hero h1 span { background: none !important; -webkit-text-fill-color: #1A2A44; color: #1A2A44; }
