/* ============================================================
   LapaQ — design tokens
   Odvozeno z LapaQ Brand Book & Design System v1.0 (08/2026)
   Poměr ploch 70 / 25 / 5 — uhlová a papírová, neutrální šedé,
   žlutá JEN jako signál. Žlutá nikdy nenese text.
   ============================================================ */

:root {
  /* --- Základní paleta --- */
  --lq-ink:          #101112;  /* uhel — pozadí appky, hlavní text */
  --lq-carbon:       #1C1E20;
  --lq-slate:        #3A3B3D;
  --lq-muted:        #6B6A66;
  --lq-ash:          #A3A19B;  /* linky, nenosné popisky */
  --lq-ash-text:     #7A7872;  /* stejný tón pro text — 4,05:1 na papíru */
  --lq-line:         #E5E3DD;
  --lq-paper:        #F6F5F2;
  --lq-white:        #FFFFFF;

  /* --- Signál a stavy --- */
  --lq-signal:       #FFD400;  /* primární akce, „vyžaduje pozornost“ */
  --lq-signal-deep:  #7D6300;  /* žlutá jako text na světlém podkladu, 5,27:1 */
  --lq-signal-soft:  #FFF3B0;  /* podbarvení řádku nad prahem */
  --lq-alert:        #E4573D;  /* škůdce nad prahem — plochy a sloupce grafu */
  --lq-alert-deep:   #BC3C27;  /* stejný stav tam, kde nese bílý text, 5,51:1 */
  --lq-ok:           #3F9D6E;  /* past v pořádku */
  --lq-info:         #4A7BC8;  /* neutrální informace, odkaz */

  --lq-alert-soft:   #FBE3DE;
  --lq-ok-soft:      #DFF0E8;
  --lq-info-soft:    #E1EAF7;

  /* --- Typografie --- */
  --lq-font-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --lq-font-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --lq-font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --lq-tracking-display: -0.03em;
  --lq-tracking-tight:   -0.02em;
  --lq-tracking-mono:     0.12em;

  /* --- Rádiusy --- */
  --lq-r-card:   14px;
  --lq-r-field:  10px;
  --lq-r-pill:  999px;
  --lq-r-icon:    7px;

  /* --- Mřížka 8 px --- */
  --lq-s1: 4px;  --lq-s2: 8px;  --lq-s3: 12px; --lq-s4: 16px;
  --lq-s5: 24px; --lq-s6: 32px; --lq-s7: 48px; --lq-s8: 64px;
  --lq-s9: 96px;

  /* --- Dotykové prvky --- */
  --lq-touch: 44px;

  /* --- Stíny (jen na světlém podkladu, velmi jemné) --- */
  --lq-shadow-1: 0 1px 2px rgba(16,17,18,.05);
  --lq-shadow-2: 0 4px 16px rgba(16,17,18,.07);
  --lq-shadow-3: 0 12px 40px rgba(16,17,18,.10);

  /* --- Sémantika: SVĚTLÉ TÉMA (web + dashboard) --- */
  --bg:          var(--lq-paper);
  --bg-elevated: var(--lq-white);
  --fg:          var(--lq-ink);
  --fg-muted:    var(--lq-muted);
  --fg-faint:    var(--lq-ash-text);
  --border:      var(--lq-line);
}

/* --- Sémantika: TMAVÉ TÉMA (mobilní appka, hero sekce) --- */
.lq-dark, [data-theme='dark'] {
  --bg:          var(--lq-ink);
  --bg-elevated: var(--lq-carbon);
  --fg:          var(--lq-paper);
  --fg-muted:    var(--lq-ash);
  --fg-faint:    var(--lq-muted);
  --border:      #2A2C2E;
}

/* ============================================================
   Základní sazba
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--lq-font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--lq-signal); color: var(--lq-ink); }

h1, h2, h3, h4 {
  font-family: var(--lq-font-display);
  font-weight: 600;
  letter-spacing: var(--lq-tracking-tight);
  line-height: 1.15;
  margin: 0;
}

.lq-display { font-size: clamp(36px, 6vw, 56px); font-weight: 600; letter-spacing: var(--lq-tracking-display); line-height: 1.05; }
.lq-h1      { font-size: clamp(26px, 4vw, 32px); }
.lq-h2      { font-size: 22px; }
.lq-body    { font-size: 17px; line-height: 1.6; }
.lq-caption { font-size: 14px; color: var(--fg-muted); }

.lq-mono {
  font-family: var(--lq-font-mono);
  font-size: 12px;
  letter-spacing: var(--lq-tracking-mono);
  text-transform: uppercase;
}

/* Latinský název druhu — mono, ale bez verzálek */
.lq-latin {
  font-family: var(--lq-font-mono);
  font-style: normal;
  letter-spacing: 0.02em;
  color: var(--fg-muted);
}

/* Číslo v datech: Archivo 700, jednotka vedle v Plex Sans 400 (pravidlo 2) */
.lq-metric {
  font-family: var(--lq-font-display);
  font-weight: 700;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.lq-unit { font-family: var(--lq-font-body); font-weight: 400; font-size: 0.42em; color: var(--fg-muted); }

/* ============================================================
   Komponenty
   ============================================================ */

/* --- Tlačítka. Pravidlo 1: na obrazovce je vždy jen JEDNA žlutá akce. --- */
.lq-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--lq-s2);
  min-height: var(--lq-touch); padding: 0 var(--lq-s5);
  border: 1px solid transparent; border-radius: var(--lq-r-field);
  font-family: var(--lq-font-body); font-size: 16px; font-weight: 600;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}
.lq-btn:active { transform: translateY(1px); }
.lq-btn:focus-visible { outline: 2px solid var(--lq-signal); outline-offset: 2px; }

.lq-btn--primary   { background: var(--lq-signal); color: var(--lq-ink); }
.lq-btn--primary:hover { background: #F5CB00; }

.lq-btn--outline   { background: transparent; color: var(--fg); border-color: var(--border); }
.lq-btn--outline:hover { border-color: var(--fg-muted); }

.lq-btn--ghost     { background: transparent; color: var(--fg-muted); }
.lq-btn--ghost:hover { color: var(--fg); }

.lq-btn--solid     { background: var(--lq-ink); color: var(--lq-paper); }
.lq-btn--solid:hover { background: var(--lq-carbon); }

.lq-btn[disabled], .lq-btn--disabled {
  background: var(--border); color: var(--lq-ash); cursor: not-allowed; border-color: transparent;
}

.lq-btn--sm { min-height: 36px; padding: 0 var(--lq-s3); font-size: 14px; }

/* --- Štítky a stavy --- */
.lq-tag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 12px; border-radius: var(--lq-r-pill);
  font-family: var(--lq-font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; white-space: nowrap;
  background: var(--border); color: var(--fg-muted);
}
.lq-tag--signal { background: var(--lq-signal); color: var(--lq-ink); }
.lq-tag--soft   { background: var(--lq-signal-soft); color: #6B5500; }
.lq-tag--alert  { background: var(--lq-alert-deep); color: #fff; }
.lq-tag--ok     { background: var(--lq-ok-soft); color: #216B48; }
.lq-tag--info   { background: var(--lq-info-soft); color: #2D558F; }
.lq-tag--offline{ background: transparent; color: var(--fg-faint); border: 1px solid var(--border); }

.lq-dark .lq-tag--ok    { background: rgba(63,157,110,.18); color: #6FCB9B; }
.lq-dark .lq-tag--info  { background: rgba(74,123,200,.18); color: #8FB2E6; }
.lq-dark .lq-tag--soft  { background: rgba(255,212,0,.16); color: var(--lq-signal); }

/* --- Karta --- */
.lq-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--lq-r-card);
  overflow: hidden;
}
.lq-card--flush { padding: 0; }
.lq-card--pad   { padding: var(--lq-s5); }

/* --- Pole --- */
.lq-field { display: block; margin-bottom: var(--lq-s4); }
.lq-label {
  display: block; margin-bottom: 6px;
  font-family: var(--lq-font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-muted);
}
.lq-input, .lq-select {
  width: 100%; min-height: var(--lq-touch); padding: 0 var(--lq-s3);
  background: var(--bg-elevated); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--lq-r-field);
  font-family: var(--lq-font-body); font-size: 16px;
}
.lq-input::placeholder { color: var(--fg-faint); }
.lq-input:focus, .lq-select:focus { outline: none; border-color: var(--fg); }
.lq-input--error { border-color: var(--lq-alert); }
.lq-error { margin-top: 6px; font-size: 14px; color: var(--lq-alert); }

/* --- Přepínač --- */
.lq-switch { position: relative; display: inline-block; width: 48px; height: 28px; flex: none; }
.lq-switch input { opacity: 0; width: 0; height: 0; }
.lq-switch span {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--border); border-radius: var(--lq-r-pill); transition: background .2s;
}
.lq-switch span::before {
  content: ''; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px;
  background: var(--lq-white); border-radius: 50%; transition: transform .2s;
  box-shadow: var(--lq-shadow-1);
}
.lq-switch input:checked + span { background: var(--lq-signal); }
.lq-switch input:checked + span::before { transform: translateX(20px); }

/* --- Řádek seznamu --- */
.lq-row {
  display: flex; align-items: center; gap: var(--lq-s4);
  min-height: 64px; padding: var(--lq-s3) var(--lq-s4);
  border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
}
.lq-row:last-child { border-bottom: none; }
.lq-row:hover { background: rgba(16,17,18,.02); }
.lq-dark .lq-row:hover { background: rgba(246,245,242,.04); }
.lq-row--over { background: var(--lq-signal-soft); }
.lq-dark .lq-row--over { background: rgba(255,212,0,.10); }

/* --- Snímek úlovku: vždy 4:3, nikdy se neořezává do ikonky --- */
.lq-shot { position: relative; width: 100%; aspect-ratio: 4 / 3; background: var(--lq-carbon); overflow: hidden; }
.lq-shot img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* --- Ukazatel jistoty --- */
.lq-conf { display: inline-flex; align-items: center; gap: 6px; }
.lq-conf-bar { width: 44px; height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; }
.lq-conf-bar i { display: block; height: 100%; background: var(--lq-ok); }
.lq-conf--low .lq-conf-bar i { background: var(--lq-signal); }

/* --- Oddělovač sekce --- */
.lq-eyebrow {
  font-family: var(--lq-font-mono); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-faint);
}

/* --- Pomocné --- */
.lq-stack > * + * { margin-top: var(--lq-s4); }
.lq-hstack { display: flex; align-items: center; gap: var(--lq-s3); }
.lq-spread { display: flex; align-items: center; justify-content: space-between; gap: var(--lq-s4); }
.lq-muted { color: var(--fg-muted); }
.lq-faint { color: var(--fg-faint); }
.lq-nowrap { white-space: nowrap; }