/* ¤¤¤ Zaklad vzhledu Weazel News: barvy, pisma a logo. Jediny zdroj pro web, panel tvurce, chat, nahled
   i redakci. Redakce z nich sklada barvy Filamentu (public/css/redakce.css, App\Support\Vzhled je cte
   i pro PHP). Barva, pismo nebo tvar se meni jen tady, ostatni styly pouzivaji jen tyto promenne.
   Bez color-mix a oklch, telefon ve hre je Chrome 103, proto maji pruhledne barvy vlastni promenne. ¤¤¤ */
:root {
  /* ¤¤¤ Plochy od nejtmavsi ¤¤¤ */
  --bg-darkest: #0B0818;
  --bg-deep: #120D26;
  --bg: #1A1333;
  --card: #241C44;
  --card-2: #2F2656;
  --card-active: #3A2F6A;
  --line: #3D3366;

  /* ¤¤¤ Text od nejsvetlejsiho ¤¤¤ */
  --white: #FFFFFF;
  --text: #F4F0FA;
  --text-body: #E9E4F3;
  --text-3: #E4DEF0;
  --text-2: #D9D2EC;
  --muted: #B7ADD3;
  --muted-2: #9A90BA;
  --muted-3: #6B6190;

  /* ¤¤¤ Barvy ¤¤¤ */
  --red: #D6281F;
  --red-dark: #B3121B;
  --red-light: #E8372D;
  --amber: #FFB23E;
  --green: #34D399;
  --green-dark: #0F5C4D;
  --blue: #7C9CFF;
  --pink: #F472B6;
  --error: #FF8A80;
  --online: #4ADE80;
  --offline: #F2554C;

  /* ¤¤¤ Pruhledne varianty ¤¤¤ */
  --amber-soft: rgba(255, 178, 62, .12);
  --amber-mark: rgba(255, 178, 62, .28);
  --amber-veil: rgba(255, 178, 62, .94);
  --deep-veil: rgba(18, 13, 38, .55);
  --deep-glass: rgba(18, 13, 38, .86);
  --veil: rgba(11, 8, 24, .93);
  --line-soft: rgba(61, 51, 102, .6);
  --muted-soft: rgba(154, 144, 186, .35);

  /* ¤¤¤ Pisma a mira ¤¤¤ */
  --sans: 'Archivo', 'Arial Narrow', sans-serif;
  --serif: 'Newsreader', Georgia, serif;
  --wrap: 1200px;
  --gutter: 24px;
  color-scheme: dark;
}

/* ¤¤¤ Posuvniky na webu, v redakci i v chatu: v klidu tenky tlumeny jezdec (4 px v pruhu 6 px), pri najeti
   a tazeni cerveny jako prouzek nad chatem. Pri posouvani ho zaklad.js obarvi na cerveno a pak barvu postupne
   vrati do tlumene (promenna --wz-jezdec na posouvanem prvku, u cele stranky na html i body). Kazdy prvek
   promennou nuluje, aby se barva neprenesla do posuvniku uvnitr. Chrome, Opera a telefon ve hre kresli
   ::-webkit-scrollbar (bez sipek), Firefox umi jen scrollbar-*. Ty Chrome nedostane, jinak by kreslil svuj
   posuvnik se sipkami. Pasy se schovanym posuvnikem (scrollbar-width: none u tridy) maji prednost. ¤¤¤ */
* { --wz-jezdec: initial; }
@supports (-moz-appearance: none) {
  * { scrollbar-width: thin; scrollbar-color: var(--wz-jezdec, var(--muted-3)) transparent; }
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { border: 1px solid transparent; border-radius: 3px; background: var(--wz-jezdec, var(--muted-3)) padding-box; }
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background-color: var(--red); }

/* ¤¤¤ Cisla v tabulkach a castky: vsechny cislice stejne siroke, aby stala pod sebou. ¤¤¤ */
.wz-cislo { font-variant-numeric: tabular-nums; }

/* ¤¤¤ Logo (partials/logo): hlavicka a paticka webu, redakce a stranka udrzby. ¤¤¤ */
.logo { display: flex; align-items: center; gap: 16px; }
.logo-mark { width: 62px; height: 62px; background: var(--red); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex-shrink: 0; }
.logo-mark b { font-family: var(--sans); font-size: 44px; font-weight: 900; font-stretch: 62%; line-height: .8; color: var(--white); }
.logo-mark i { width: 32px; height: 4px; background: var(--white); }
.logo-word { display: flex; flex-direction: column; gap: 4px; }
.logo-word strong { font-family: var(--sans); font-size: 44px; font-weight: 900; font-stretch: 62%; line-height: .9; color: var(--white); letter-spacing: .5px; white-space: nowrap; }
.logo-word span { font-size: 14px; color: var(--muted); }
.logo--sm .logo-mark { width: 44px; height: 44px; gap: 3px; }
.logo--sm .logo-mark b { font-size: 31px; }
.logo--sm .logo-mark i { width: 22px; height: 3px; }
.logo--sm .logo-word strong { font-size: 32px; line-height: 1; }
/* ¤¤¤ Nejmensi logo s podtitulem vedle nazvu (horni lista redakce). ¤¤¤ */
.logo--xs { gap: 10px; }
.logo--xs .logo-mark { width: 36px; height: 36px; gap: 2px; }
.logo--xs .logo-mark b { font-size: 25px; }
.logo--xs .logo-mark i { width: 18px; height: 3px; }
.logo--xs .logo-word { flex-direction: row; align-items: baseline; gap: 8px; }
.logo--xs .logo-word strong { font-size: 25px; line-height: 1; }
.logo--xs .logo-word span { font-size: 15px; font-weight: 700; font-stretch: 80%; color: var(--muted); }