/* ═════════════════════════════════════════════════════════════════════════
   ds-tokens.css — in-energo Hub Design System
   Tokens, base reset, animations, focus styles. Single source of truth.

   Loaded by:
     - templates/base.html         (after tw.css, before main <style> block)
     - templates/task_full.html    (before ds-shared.css, task-full.css)

   Verbatim copy of base.html design system header (formerly inline at :61-151).
   Edit here — both contexts pick up automatically.
   ═════════════════════════════════════════════════════════════════════════ */

:root, [data-theme="dark"] {
  --c-bg:#0c0e14;--c-sf:#141820;--c-sf2:#1c2030;--c-sfh:#1f2436;
  --c-bd:#2a2e3a;--c-bds:#1e2230;
  --c-acc:#F5A800;--c-acc-h:#FFB820;--c-acc-s:rgba(245,168,0,.10);--c-acc-m:rgba(245,168,0,.22);--c-acc-t:#FFD166;
  --c-rail:#0a0c10;--c-railh:#1a1e2a;
  --c-ok:#22c55e;--c-ok-s:rgba(34,197,94,.1);
  --c-fail:#ef4444;--c-fail-s:rgba(239,68,68,.1);
  --c-info:#3b82f6;--c-info-s:rgba(59,130,246,.10);--c-pur:#a855f7;--c-warn:#eab308;--c-warn-s:rgba(234,179,8,.1);
  --c-g1:#f0f2f8;--c-g2:#e4e6ee;--c-g3:#c0c4d4;--c-g4:#9298ae;--c-g5:#7d829a;--c-g6:#525868;--c-g7:#363b50;
  --c-sh:transparent;--c-sidebar:#0f1118;--c-grid:rgba(255,255,255,.06);--c-zebra:rgba(255,255,255,.015);color-scheme:dark;

  /* Typography — text scale (UI) + display scale (hero/KPI). Single source of truth.
     Use via .fs-* utility classes (templates) or var(--fs-*) (component CSS).
     Never hardcode px font-size. Snap policy documented in docs/DESIGN_SYSTEM.en.md §2.3. */
  --fs-3xs:9px;--fs-2xs:10px;--fs-xs:12px;--fs-sm:13px;--fs-base:14px;--fs-md:15px;--fs-lg:17px;--fs-xl:22px;
  --fs-2xl:26px;--fs-3xl:32px;--fs-4xl:42px;--fs-5xl:52px;--fs-6xl:64px;--fs-7xl:84px;
  --lh-tight:1.3;--lh-normal:1.5;--lh-relaxed:1.65;
  --ls-tight:-0.01em;--ls-normal:0;--ls-wide:0.05em;
  --fw-normal:400;--fw-medium:500;--fw-semi:600;--fw-bold:700;

  /* Radii */
  --r-xs:3px;--r-sm:5px;--r-md:6px;--r-lg:8px;--r-xl:10px;--r-2xl:12px;--r-full:999px;

  /* Z-index scale — centralized, never use raw numbers */
  --z-table:5;--z-sticky:10;--z-tabs:30;--z-fab:35;--z-sidebar:40;
  --z-drop:50;--z-drawer:55;--z-drop-over:60;--z-modal:100;--z-popup:200;
  --z-toast:300;--z-loader:999;

  /* Shadows — flat: žádné drop-stíny v app, jen 1px rámeček pro oddělení. */
  --sh-card:0 0 0 1px var(--c-bds);
  --sh-float:0 0 0 1px var(--c-bds);
  --sh-drop:0 0 0 1px var(--c-bds);
  --sh-glow-acc:none;
}
[data-theme="light"] {
  --c-bg:#f9f8f5;--c-sf:#ffffff;--c-sf2:#f4f3f0;--c-sfh:#eceae5;
  --c-bd:rgba(0,0,0,.1);--c-bds:rgba(0,0,0,.06);
  --c-acc:#c08200;--c-acc-h:#a06d00;--c-acc-s:rgba(192,130,0,.08);--c-acc-m:rgba(192,130,0,.16);--c-acc-t:#8a6d00;
  --c-rail:#1a1e2a;--c-railh:#2a2f40;
  --c-ok:#16a34a;--c-ok-s:rgba(22,163,74,.08);
  --c-fail:#dc2626;--c-fail-s:rgba(220,38,38,.08);
  --c-info:#2563eb;--c-info-s:rgba(37,99,235,.08);--c-pur:#9333ea;--c-warn:#ca8a04;--c-warn-s:rgba(202,138,4,.08);
  --c-g1:#0e0e10;--c-g2:#1a1a18;--c-g3:#3a3935;--c-g4:#5a5850;--c-g5:#5f5d56;--c-g6:#6c6960;--c-g7:#716e65;
  --c-sh:transparent;--c-sidebar:#ffffff;--c-grid:rgba(0,0,0,.05);--c-zebra:rgba(0,0,0,.02);color-scheme:light;
}

/* Dark input island — AI chat dock + briefing karta. Theme-independent (vždy tmavá, i v light).
   Jeden zdroj pravdy pro paletu chat chrome (dřív duplikováno v assistant.css/inbox.css/_ai_qa_panel.html).
   fg2 = sekundární text (chipy, preview); amb-fg = text/ikona NA amber tlačítku. */
:root{
  --c-isl-bg:#1B1813;--c-isl-fg:#F4EFDE;--c-isl-fg2:#C7BFA6;--c-isl-mu:#8E8772;
  --c-isl-bd:#3A3325;--c-isl-amb:#E9A532;--c-isl-amb-h:#F5B545;--c-isl-amb-fg:#2A1A04;
}

/* Timer green — brand barva běžícího časovače (header pill, kalendář time-entries,
   KPI Odpracováno). -t = světlá text varianta (jako --c-acc-t k --c-acc).
   Theme-independent; gradient stopy pillu (#20a478/#1a9068) zůstávají lokální. */
:root{ --c-timer:#1D9E75; --c-timer-t:#34d399; }

/* ── Reset & Base ── */
html{height:100%;height:100dvh}
body{margin:0;min-height:100%;min-height:100dvh;background:var(--c-bg);color:var(--c-g3);font-family:"DM Sans",sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
body::before{content:"";position:fixed;top:0;left:0;right:0;height:1px;background:var(--c-bds);z-index:9999;pointer-events:none}
body.overlay-open{overflow:hidden;touch-action:none}
[x-cloak]{display:none !important}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
button{font-family:inherit}
input,select,textarea{font-size:16px !important}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--c-bds);border-radius:var(--r-xs)}::-webkit-scrollbar-thumb:hover{background:var(--c-g7)}
.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}

/* ── Font-size utilities — token-driven, buildless single source of truth ──
   Replace inline style="font-size:Npx" and Tailwind text-[Npx] with these.
   Does NOT apply to input/select/textarea (locked at 16px above for iOS). */
.fs-3xs{font-size:var(--fs-3xs)}.fs-2xs{font-size:var(--fs-2xs)}.fs-xs{font-size:var(--fs-xs)}
.fs-sm{font-size:var(--fs-sm)}.fs-base{font-size:var(--fs-base)}.fs-md{font-size:var(--fs-md)}
.fs-lg{font-size:var(--fs-lg)}.fs-xl{font-size:var(--fs-xl)}.fs-2xl{font-size:var(--fs-2xl)}
.fs-3xl{font-size:var(--fs-3xl)}.fs-4xl{font-size:var(--fs-4xl)}.fs-5xl{font-size:var(--fs-5xl)}
.fs-6xl{font-size:var(--fs-6xl)}.fs-7xl{font-size:var(--fs-7xl)}

/* ── Safe-area insets (iOS notch / status bar) ── */
/* Applied globally so in-browser and PWA behave the same. */
body,.m-hdr{padding-top:env(safe-area-inset-top,0)}
.m-pill{bottom:calc(14px + env(safe-area-inset-bottom,0))}
/* Fullscreen panels/drawers anchored to top: push header below status bar */
.rm-list-panel,.drawer-overlay,.qa-ov{padding-top:env(safe-area-inset-top,0)}

/* ── View Transitions — smooth cross-page navigation ── */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-fade-out .15s ease-out both}
::view-transition-new(root){animation:vt-fade-in .2s ease-in both}
@keyframes vt-fade-out{to{opacity:0;filter:blur(2px)}}
@keyframes vt-fade-in{from{opacity:0;filter:blur(2px)}}

/* ── Native-feel touch feedback ── */
.tap-feedback{transition:transform .08s ease,opacity .08s ease}
.tap-feedback:active{transform:scale(.96);opacity:.85}
.mp-btn:active,.mp-pop-it:active,.m-tb-btn:active,.sb-it:active,.c-ri:active:not(.active){transform:scale(.92);transition:transform .06s ease}

/* ── Animations ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes slideInRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideOutRight{from{transform:translateX(0);opacity:1}to{transform:translateX(100%);opacity:0}}
@keyframes scaleIn{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes pageLoad{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}}
@keyframes voicePulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4)}50%{box-shadow:0 0 0 8px rgba(239,68,68,0)}}
.anim-in{animation:fadeUp .35s ease-out both}
.anim-d1{animation-delay:.05s}.anim-d2{animation-delay:.1s}.anim-d3{animation-delay:.15s}.anim-d4{animation-delay:.2s}
.anim-pulse{animation:pulse 2s ease-in-out infinite}
.anim-scale{animation:scaleIn .2s ease-out both}
button:active:not(:disabled){transform:scale(.97)}
a.c-ri:active{transform:scale(.92) !important}
:focus-visible{outline:2px solid var(--c-acc);outline-offset:2px;border-radius:var(--r-sm)}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline-offset:0}
/* Kontejnery s programovým fokusem (drawer panely, tabindex=-1) outline nedostávají —
   nejsou v tab pořadí, ring je jen vizuální artefakt (projevoval se jako amber svislá
   čára u levé hrany draweru — outline není element, v inspektoru nedohledatelné). */
[tabindex="-1"]:focus-visible{outline:none}