/* ============================================================
   TOKENS — barvy, poloměry, rozestupy, časování.
   Jediné místo, kde se mění paleta a rytmus webu.
   ============================================================ */
:root{
  --bg:        #07090a;
  --bg-2:      #0a0c0e;
  --bg-3:      #0d1012;
  --panel:     #0f1214;
  --panel-2:   #14171a;
  --panel-3:   #1a1e22;
  --line:      #1a1e22;
  --line-2:    #262b30;
  --line-3:    #353c43;
  --ink:       #eef0ec;
  --ink-2:     #fafaf7;
  --ink-dim:   #bcc1ba;        /* zvýšený kontrast kvůli čitelnosti */
  --muted:     #8d938c;        /* WCAG AA na tmavém pozadí */
  --mute-2:    #6b716c;
  --accent:    #b6ff3c;
  --accent-2:  #d6ff7a;
  --accent-dim:#7fbf2a;
  --warn:      #ff8a4c;
  --radius:    6px;
  --radius-lg: 12px;
  --maxw:      1280px;
  --pad:       clamp(20px, 4vw, 56px);
  --ease:      cubic-bezier(.2,.7,.2,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --tap:       44px;            /* minimální dotyková plocha */
}

/* ------------------------------------------------------------
   BREAKPOINTY — web je zatím desktop-first (max-width).
   V provozu jsou tyto hodnoty:

     540 · 640 · 720 · 780 · 820 · 880 · 900 · 920 · 980 · 1080

   Deset breakpointů je moc a odporuje pravidlu 4 (mobile-first).
   Sjednocení na čtyři hodnoty a přepis na min-width je samostatný
   krok — mění se při něm chování layoutu, takže nepatří do
   refactoringu, který má zachovat vzhled 1:1.
   ------------------------------------------------------------ */