/* ===== Základ + design tokeny + téma ===== */
/*
 * Dark je výchozí. Hloubka se dělá VRSTVENÍM LUMINANCE povrchů, ne stíny.
 * Zpětně kompatibilní názvy (--bg, --card, --text, --accent, --line…) zůstávají,
 * aby fungoval stávající kód; nové sémantické tokeny jsou navíc.
 * Linear-style: vše se odvozuje z trojice base / accent / contrast.
 */
:root {
  /* Akcent — acid lime, rezervovaný (max 1 vyplněný primární prvek na obrazovku) */
  --accent:        #d4f23a;
  --accent-muted:  #3a4a18;   /* nízká úroveň heatmapy / hover akcentu */
  /* --accent-ink = akcent použitý jako TEXT / tenká čára / tah grafu.
   * V dark je shodný s --accent (lime na tmavém čte dobře); v light se přelaďuje
   * na tmavší olivově-lime, aby měl na světlém pozadí kontrast (AA / 3:1 pro UI). */
  --accent-ink:    #d4f23a;

  /* Heatmapa — 5 úrovní akcentu (od nejmenší po největší).
   * Pozn.: light režim si tyto úrovně přepisuje v [data-theme="light"] níže,
   * aby 5 stupňů bylo rozlišitelných i na světlém pozadí. */
  --heat-0: #1c2030;
  --heat-1: #3a4a18;
  --heat-2: #7c9426;
  --heat-3: #a8c92f;
  --heat-4: #d4f23a;

  /* Spacing scale (8px základ) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

  /* Radius scale */
  --r-sm: 8px; --r-md: 12px; --r-lg: 14px; --r-xl: 18px;
  --radius: 14px;             /* zpětná kompat. (dřív 18px) */

  /* Type scale */
  --fs-display: 44px; --fs-h1: 22px; --fs-h2: 18px; --fs-h3: 15px;
  --fs-body: 14px; --fs-caption: 12px; --fs-micro: 11px;

  /* Animační tokeny (Fáze A) */
  --dur-fast: 150ms;   /* mikrointerakce */
  --dur:      260ms;   /* přechod sekce / sheet */
  --ease:     cubic-bezier(.4,0,.2,1);       /* standardní */
  --ease-out: cubic-bezier(.25,.46,.45,.94); /* prémiový dojezd */
}

[data-theme="dark"] {
  /* Povrchy — každá vrstva ~5–8 % světlejší */
  --bg:    #0a0b0d;           /* canvas / pozadí stránky */
  --bg2:   #131417;           /* zvednuté plochy, navbar */
  --card:  #17191d;           /* karty, dlaždice */
  --card2: #24272c;           /* inputy, chipy, ovladače */

  /* sémantická jména povrchů (alias na výše) */
  --surface-canvas:  #0a0b0d;
  --surface-raised:  #131417;
  --surface-card:    #17191d;
  --surface-control: #24272c;

  /* Text — off-white, NE čistě bílá (kvůli halaci) */
  --text:   #e6e8eb;          /* primary */
  --muted:  #9aa0a6;          /* secondary (≥4.5:1) */
  --text-tertiary: #6b7079;   /* neaktivní nav, hinty */

  /* Okraje */
  --line:           #26282d;
  --border-hairline: rgba(255,255,255,0.07);
  --border-strong:   rgba(255,255,255,0.12);

  /* Akcent + stavy */
  --accent-text: #1a1f00;     /* tmavý text NA akcentu */
  --danger: #e2554f;
  --good:   #57d977;
  --warn:   #e6b53d;

  /* typy sérií (warmup/dropset/failure) – odlišení, ne dekorace */
  --type-warmup:  #e6b53d;
  --type-dropset: #7aa2ff;
  --type-failure: #e2554f;
}

[data-theme="light"] {
  /* Povrchy — odvozené luminancí: canvas nejtmavší (jemně šedý), karty bílé,
   * ovladače o stupeň tmavší. Hloubka se i ve světlém dělá vrstvením, ne stíny. */
  --bg:    #f4f5f7;
  --bg2:   #ffffff;
  --card:  #ffffff;
  --card2: #eceef1;

  --surface-canvas:  #f4f5f7;
  --surface-raised:  #ffffff;
  --surface-card:    #ffffff;
  --surface-control: #eceef1;

  /* Text — tmavý, ověřeno AA: text 0a0b0d (~17:1), muted 5b616b (~5.6:1),
   * tertiary 6a6f77 (~4.6:1) na bílé kartě. */
  --text:   #0a0b0d;
  --muted:  #5b616b;
  --text-tertiary: #6a6f77;

  --line:           #e2e4e8;
  --border-hairline: rgba(0,0,0,0.10);
  --border-strong:   rgba(0,0,0,0.16);

  /* Akcent zůstává lime pro VÝPLNĚ (tmavý text na lime drží i na světlém),
   * ale jako text / tenká čára / tah grafu používáme tmavší olivově-lime ink. */
  --accent-text: #1a1f00;
  --accent-ink:  #4d6a00;   /* ~4.8:1 na bílé → AA pro text i UI 3:1 */

  --danger: #b91c1c;
  --good:   #15803d;
  --warn:   #b45309;

  --type-warmup:  #b45309;
  --type-dropset: #2563eb;
  --type-failure: #b91c1c;

  /* Heatmapa pro světlé pozadí — 5 rozlišitelných stupňů.
   * Sytost i tmavost rostou s úrovní (vyšší = víc), aby se na bílé neztrácely. */
  --heat-0: #e9ece0;   /* prázdná / nejnižší – jemně odlišená od bílé karty */
  --heat-1: #cfe08c;
  --heat-2: #a6c443;
  --heat-3: #7c9b1f;
  --heat-4: #566f0f;   /* nejvyšší – sytá olivová */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#screen {
  max-width: 520px;
  margin: 0 auto;
  /* safe-area-inset-top: obsah nesmí lézt pod výřez (notch) ve standalone PWA.
   * Spodní padding počítá s tabbarem + home indicatorem (inset-bottom), aby obsah
   * nemizel pod fixním tabbarem. Fallback 0px → na desktopu/Androidu beze změny. */
  padding: calc(22px + env(safe-area-inset-top, 0px)) 16px calc(110px + env(safe-area-inset-bottom, 0px));
}

h1 { font-size: var(--fs-h1); font-weight: 590; letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
h2 { font-size: var(--fs-h2); font-weight: 590; line-height: 1.1; margin: 26px 0 12px; }
h3 { font-size: var(--fs-h3); font-weight: 510; line-height: 1.2; margin: 0; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-caption); }
.center { text-align: center; }
.hidden { display: none !important; }

/* velká čísla („score-first") – těsný záporný tracking */
.big-num, .dash-hodnota, .orb-cislo, .sp-stat-cislo, .pl-stat-cislo {
  letter-spacing: -0.02em;
}

/* inline lucide ikony */
.ic { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ic svg { display: block; width: 1em; height: 1em; stroke: currentColor; }

/* ===== FÁZE 3 – pohyb a polish ===== */

/* Spring „check" mikro-animace při dokončení akce (zápis, odškrtnutí).
 * Lehký scale + fade, ~220 ms, spring easing. Přidává se třída JS helperem
 * (animCheckPop) a po doběhnutí se zase odebere. */
@keyframes anim-check-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.anim-check-pop {
  animation: anim-check-pop .22s cubic-bezier(.34, 1.56, .64, 1) both;
}

/* Heatmapa – buňky se při načtení postupně „nalijou".
 * Buňky s touto třídou startují průhledné a lehce zmenšené; konkrétní
 * animation-delay je inline (style) odvozený z indexu (~20 ms stagger). */
@keyframes anim-heat-in {
  from { opacity: 0; transform: scale(0.55); }
  to   { opacity: 1; transform: scale(1); }
}
.anim-heat-in {
  animation: anim-heat-in .26s ease-out both;
}

/* Sjednocené přechody sekcí – jemné prolnutí při výměně obrazovky */
@keyframes anim-screen-in {
  from { opacity: 0; transform: translateY(10px) scale(0.994); }
  /* Konec MUSÍ být transform:none. Kvůli animation-fill-mode:both si #screen
     po doběhnutí drží poslední snímek; translateY(0) scale(1) je sice opticky
     identita, ale je to pořád non-none transform → #screen se stává
     „containing blockem" pro position:fixed potomky. Plovoucí + (.pl-fab)
     v Kalendáři se pak ukotví ke #screen (krátký v Měsíci), ne k oknu, a
     překrývá kartu Statistiky. transform:none to řeší bez vizuální změny. */
  to   { opacity: 1; transform: none; }
}
.anim-screen-in {
  /* fill-mode 'backwards' (ne 'both'): po doběhnutí se NEdrží poslední snímek,
     takže computed transform na #screen se vrátí na 'none'. S 'both' zůstával
     identity matrix (matrix(1,0,0,1,0,0)), což pořád tvoří containing block pro
     position:fixed potomky a ukotvovalo plovoucí + (.pl-fab) ke #screen místo
     k oknu. Žádná vizuální změna animace – jen úklid po konci. */
  animation: anim-screen-in var(--dur) var(--ease-out) backwards;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* nepodstatné animace plně vypnout (ne jen zkrátit) */
  .anim-check-pop, .anim-heat-in, .anim-screen-in, .banner {
    animation: none !important;
  }
}

/* „Omezit animace" z Nastavení (nastaveni.omezitPohyb) – stejný efekt jako
 * prefers-reduced-motion, ale řízený atributem na <html> (data-omezit-pohyb).
 * View Transitions vypíná přímo router přes mediaReducedMotion(). */
[data-omezit-pohyb] *,
[data-omezit-pohyb] *::before,
[data-omezit-pohyb] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}
[data-omezit-pohyb] .anim-check-pop,
[data-omezit-pohyb] .anim-heat-in,
[data-omezit-pohyb] .anim-screen-in,
[data-omezit-pohyb] .anim-screen-in .card,
[data-omezit-pohyb] .anim-screen-in .list-row,
[data-omezit-pohyb] .banner {
  animation: none !important;
}

/* ===== POHYB – View Transitions ===== */

/* Přepínání záložek: prémiový cross-fade. Staré rychle a krátce zmizí s nepatrným
 * zmenšením, nové plynule najede s jemným posunem + scale → čistý překryv bez „skoku". */
::view-transition-old(root) { animation: vt-out 200ms var(--ease) both; }
::view-transition-new(root) { animation: vt-in  320ms var(--ease-out) 30ms both; }
@keyframes vt-out { to   { opacity: 0; transform: scale(0.992); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(6px) scale(0.994); } }

/* Sdílený prvek – aktivní indikátor v tabbaru se plynule přesune mezi taby. */
::view-transition-old(tab-active),
::view-transition-new(tab-active) { animation-duration: var(--dur); animation-timing-function: var(--ease-out); }

/* Staggered odhalení karet/řádků při renderu obrazovky (strop ~8 položek). */
.anim-screen-in .card,
.anim-screen-in .list-row {
  animation: rise var(--dur-fast) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 35ms);
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* Vypnutí pro uživatele, kteří si přejí méně pohybu (systémové nastavení). */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(tab-active),
  ::view-transition-new(tab-active) { animation: none !important; }
  .anim-screen-in .card,
  .anim-screen-in .list-row { animation: none !important; }
}