/* ============================================================================
   brand.css — SDÍLENÉ tokeny a primitiva pro všechny 4 návrhy UI.
   Brand Honzy Šilara (přebíjí refero): Fraunces + Instrument Sans,
   navy #12203c + zlatá #a97e3f + krémová plocha. Light i dark.
   Každý směr si přidává vlastní layout ve smer.css; tohle je společný základ.
   ========================================================================== */

:root {
  color-scheme: light;
  --font-nadpis: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-text: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* světlá — teplá krémová plocha, navy text, zlatý akcent */
  --podklad: #f4f1ea;
  --podklad-2: #efeadf;
  --karta: #fffdf8;
  --karta-2: #faf6ec;
  --karta-okraj: #e9e2d2;
  --text: #16233c;
  --slaby: #5c6675;
  --slaby-2: #9099a6;
  --popisek: #8a8577;
  --cara: #e7e0d3;
  --okraj-pole: #d8d0bd;
  --pole-pozadi: #f8f5ec;
  --pilulka: #ebe5d6;
  --navy: #12203c;
  --zlata: #a97e3f;
  --zlata-svetla: #c39a56;
  --primar: #12203c;
  --primar-tmavy: #0a1526;
  --zelena: #3fa46a;
  --zelena-text: #2f7a4d;
  --jantar: #ef8a3e;
  --jantar-text: #c96f28;
  --nebezpeci: #a8432c;
  --stin: 0 1px 2px rgba(18,32,60,.05), 0 2px 8px rgba(18,32,60,.06);
  --stin-karta: 0 1px 2px rgba(18,32,60,.04), 0 10px 26px -22px rgba(18,32,60,.3);
  --stin-vyrazny: 0 6px 27px rgba(18,32,60,.10);

  --funkcni-dychani: #128a80;
  --holotropni-dychani: #1c3a5e;
  --soma-dech: #6b4a9e;

  --r-karta: 16px;
  --r-pole: 10px;
  --r-pilulka: 999px;
}

:root.tema-dark {
  color-scheme: dark;
  --podklad: #14181f;
  --podklad-2: #10141a;
  --karta: #1c222c;
  --karta-2: #232a35;
  --karta-okraj: #2c333f;
  --text: #e8eaed;
  --slaby: #9aa4b2;
  --slaby-2: #6f7885;
  --popisek: #8b94a3;
  --cara: #2c333f;
  --okraj-pole: #39424f;
  --pole-pozadi: #141a23;
  --pilulka: #242c38;
  --navy: #33507f;
  --zlata: #cca45f;
  --zlata-svetla: #dbb670;
  --primar: #33507f;
  --primar-tmavy: #2a4269;
  --zelena: #3fa46a;
  --zelena-text: #4bb37a;
  --jantar: #ef8a3e;
  --jantar-text: #f6a15b;
  --nebezpeci: #c25a42;
  --stin: 0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.35);
  --stin-karta: 0 1px 2px rgba(0,0,0,.3), 0 10px 26px -20px rgba(0,0,0,.6);
  --stin-vyrazny: 0 6px 27px rgba(0,0,0,.45);
  --funkcni-dychani: #2fb3a8;
  --holotropni-dychani: #7fa3cc;
  --soma-dech: #a98bd6;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-text);
  background: var(--podklad);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
h1, h2, h3, h4 { font-family: var(--font-nadpis); font-weight: 500; margin: 0; line-height: 1.15; letter-spacing: -.01em; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

/* ── NÁVRH banner (fixní, nahoře, injektuje prototyp.js) ─────────────────── */
.navrh-pruh {
  position: sticky; top: 0; z-index: 900;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--navy); color: #fff;
  font-size: 12.5px; padding: 7px 16px;
}
.navrh-pruh strong { color: var(--zlata-svetla); letter-spacing: .04em; }
.navrh-pruh .navrh-odkazy { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.navrh-pruh a {
  text-decoration: none; color: #fff; opacity: .82;
  padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22);
  font-size: 12px;
}
.navrh-pruh a:hover { opacity: 1; background: rgba(255,255,255,.1); }
.navrh-pruh a.je-tady { background: var(--zlata); border-color: var(--zlata); opacity: 1; color: var(--navy); font-weight: 600; }
.navrh-pruh .tema-btn { background: transparent; border: 1px solid rgba(255,255,255,.22); color:#fff; border-radius: 999px; width: 26px; height: 24px; line-height: 1; }

/* ── primitiva ──────────────────────────────────────────────────────────── */
.obor-tecka { width: 8px; height: 8px; border-radius: 999px; display: inline-block; flex: 0 0 auto; }
.obor-stitek {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase; font-weight: 600;
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  background: var(--pilulka); color: var(--slaby); border: 1px solid transparent; white-space: nowrap;
}
.chip.je-aktivni { background: var(--primar); color: #fff; }

.stav-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.kritik {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--zelena-text);
}
.kritik::before { content: '★'; color: var(--zlata); font-size: 11px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: 12px;
  border: 1px solid transparent; background: var(--karta); color: var(--text);
  border-color: var(--okraj-pole); transition: transform .04s ease, background .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primar { background: var(--primar); color: #fff; border-color: var(--primar); }
.btn-zelena { background: var(--zelena); color: #fff; border-color: var(--zelena); }
.btn-jantar { background: transparent; color: var(--jantar-text); border-color: color-mix(in srgb, var(--jantar) 55%, transparent); }
.btn-ghost  { background: transparent; border-color: transparent; color: var(--slaby); }
.btn-maly   { padding: 6px 12px; font-size: 13px; border-radius: 10px; }

.karta {
  background: var(--karta); border: 1px solid var(--karta-okraj);
  border-radius: var(--r-karta); box-shadow: var(--stin-karta);
}

/* náhled vizuálu = placeholder (žádné falešné komplexní obrázky) */
.nahled-placeholder {
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--zlata) 8%, transparent) 0 14px, transparent 14px 28px),
    var(--karta-2);
  color: var(--slaby-2); font-size: 12px; letter-spacing: .04em;
  border-radius: 12px; border: 1px dashed var(--okraj-pole);
}

/* typová ikonka */
.typ-ikona {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto;
  background: var(--pilulka); color: var(--slaby); font-size: 13px;
}

.jemny { color: var(--slaby); }
.jemny-2 { color: var(--slaby-2); }
.mono-cislo { font-variant-numeric: tabular-nums; }

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

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }