/* om-design — vizuální systém pro ondrej-malik.cz/p/
   Swiss struktura + signální vrstva (tmavá plocha, červené podsvícení).
   Vlož celý blok do výstupu a pracuj s proměnnými, ne s hex hodnotami. */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;700&display=swap');

:root {
  /* ---- SVĚTLÁ PLOCHA — reporty, obsahové snímky, běžné stránky ---- */
  --paper:        #FFFFFF;
  --paper-tint:   #F4F4F4;   /* střídavý pruh, zebra */
  --ink:          #0D0D0D;   /* text, plné plochy, osy        19,5:1 */
  --ink-70:       #4A4A4A;   /* sekundární text                8,9:1 */
  --ink-45:       #737373;   /* popisky, metadata, osy         4,7:1 */
  --rule:         #DEDEDE;   /* vlásová linka 1 px */
  --red:          #D40000;   /* signál na světlé               5,5:1 ✓ AA */
  --red-wash:     #FBE8E8;   /* podbarvení jednoho řádku, vzácně */

  /* ---- TMAVÁ PLOCHA — tituly, dělicí snímky, hero, impact ---- */
  --void:         #0A0A0A;   /* hlavní tmavá plocha */
  --void-soft:    #141416;   /* vyvýšená plocha, karta na tmavém */
  --void-rule:    #26262B;   /* linka na tmavém */
  --on-void:      #F5F5F7;   /* text na tmavém                18,2:1 */
  --on-void-45:   #86868F;   /* popisky na tmavém              5,5:1 */
  --red-lift:     #FF3B2E;   /* signál na tmavé                5,6:1 ✓ AA */

  /* Pravidlo: --red patří na bílou, --red-lift na tmavou.
     Prohozené si sednou pod hranici čitelnosti (3,5:1). */

  /* ---- PODSVÍCENÍ ---- */
  --glow-fill:    rgba(255, 59, 46, 0.10);   /* výplň pod kurzorem */
  --glow-edge:    rgba(255, 59, 46, 0.45);   /* svítící hrana */
  --glow-light:   rgba(255, 255, 255, 0.06); /* bílý odlesk */
  --glow-fill-lt: rgba(212, 0, 0, 0.05);     /* totéž na světlé ploše, jemnější */
  --glow-edge-lt: rgba(212, 0, 0, 0.30);

  /* ---- grafy: kategorická (max 5, červená = série ke čtení) ---- */
  --cat-1: #0D0D0D; --cat-2: #6E6E6E; --cat-3: #A8A8A8; --cat-4: #D0D0D0; --cat-5: #D40000;
  /* na tmavé ploše */
  --cat-d1: #F5F5F7; --cat-d2: #9A9AA4; --cat-d3: #5A5A63; --cat-d4: #34343A; --cat-d5: #FF3B2E;

  /* ---- grafy: sekvenční ---- */
  --seq-1: #F4F4F4; --seq-2: #D0D0D0; --seq-3: #A8A8A8; --seq-4: #6E6E6E; --seq-5: #0D0D0D;

  /* ---- typografie ---- */
  --font: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --t-display: clamp(40px, 6vw, 72px);
  --t-h1: 40px; --t-h2: 28px; --t-h3: 20px;
  --t-body: 16px; --t-small: 13px; --t-label: 10px;

  /* ---- prostor: základní jednotka 4px, mezihodnoty se nepoužívají ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px;
  --s-8:32px; --s-12:48px; --s-16:64px; --s-24:96px; --s-32:128px;

  /* ---- mřížka ---- */
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --col-gap: 24px;

  /* ---- linky ---- */
  --line:        1px solid var(--rule);
  --line-strong: 2px solid var(--ink);
  --line-accent: 2px solid var(--red);

  /* ---- pohyb ---- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* radius je 0 a proměnnou nemá — aby nebylo co přepsat */
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* každé číslo tabulkové, jinak sloupce skáčou */
.num, td.num, .kpi-value, table td, table th { font-variant-numeric: tabular-nums; }

h1, h2, h3 { hyphens: none; margin: 0; }
h1 { font-size: var(--t-h1); line-height: 1.0; font-weight: 700; letter-spacing: -0.035em; }
h2 { font-size: var(--t-h2); line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; }
h3 { font-size: var(--t-h3); line-height: 1.2; font-weight: 500; letter-spacing: -0.015em; }
p  { margin: 0; max-width: 68ch; }

.label {
  font-size: var(--t-label); line-height: 1; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-45);
}
.accent { color: var(--red); }

/* na tmavé ploše se barvy překlopí */
.on-void { background: var(--void); color: var(--on-void); }
.on-void .label { color: var(--on-void-45); }
.on-void .accent { color: var(--red-lift); }

@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  table, .kpi, figure, .finding, .points li { break-inside: avoid; }
}