/* ═══════════════════════════════════════════════════════════════
   Design tokeny — abcTitulky / abcCash (484.cz)
   Hodnoty 1:1 z produkce. Vlož do nové aplikace jako první CSS.
   Dark režim: <html data-theme="dark">, persistence v localStorage.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── Písmo ── */
    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system,
                 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco,
                 Consolas, monospace;

    /* ── Neutrální škála (světlý režim: Tailwind gray) ── */
    --white:    #FFFFFF;
    --gray-50:  #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;
    --gray-950: #030712;

    /* ── Primární (brand) — červená ── */
    --primary-50:  #FEF2F2;
    --primary-100: #FEE2E2;
    --primary-200: #FECACA;
    --primary-300: #FCA5A5;
    --primary-400: #F87171;
    --primary-500: #EF4444;
    --primary-600: #DC2626;   /* hlavní brand */
    --primary-700: #B91C1C;   /* hover */
    --primary-800: #991B1B;

    /* ── Semantické (Filament) ── */
    --success-50:  #ECFDF5;
    --success-100: #D1FAE5;
    --success-500: #10B981;
    --success-600: #059669;
    --success-700: #047857;

    --warning-50:  #FFFBEB;
    --warning-100: #FEF3C7;
    --warning-500: #F59E0B;
    --warning-600: #D97706;
    --warning-700: #B45309;

    --danger-50:  #FEF2F2;
    --danger-100: #FEE2E2;
    --danger-500: #EF4444;
    --danger-600: #DC2626;
    --danger-700: #B91C1C;

    --info-50:  #EFF6FF;
    --info-100: #DBEAFE;
    --info-500: #3B82F6;
    --info-600: #2563EB;
    --info-700: #1D4ED8;

    /* ── Zaoblení ── */
    --radius-sm: 6px;    /* malá tlačítka, tooltipy   */
    --radius:    8px;    /* inputy, tlačítka, nav     */
    --radius-lg: 12px;   /* karty, modaly             */

    /* ── Pracovní aliasy (plochy, text, hranice) ── */
    --bg:             var(--gray-50);
    --surface:        var(--white);
    --surface-2:      var(--gray-50);
    --surface-3:      var(--gray-100);
    --surface-hover:  var(--gray-100);
    --border:         var(--gray-200);
    --border-hover:   var(--gray-300);
    --text:           var(--gray-900);
    --text-secondary: var(--gray-600);
    --text-muted:     var(--gray-400);
    --text-faint:     var(--gray-300);

    /* Akcent — v originále pojmenován --blue (historicky), ale je ČERVENÝ.
       Zde nové jméno --accent; --blue ponechán jako kompatibilní alias. */
    --accent:        var(--primary-600);
    --accent-hover:  var(--primary-700);
    --accent-soft:   rgba(220, 38, 38, 0.07);   /* pozadí aktivních prvků  */
    --accent-softer: rgba(220, 38, 38, 0.04);   /* focus ring              */
    --accent-border: rgba(220, 38, 38, 0.25);   /* border aktivního chipu  */
    --blue:        var(--accent);
    --blue-hover:  var(--accent-hover);
    --blue-soft:   var(--accent-soft);
    --blue-softer: var(--accent-softer);
    --blue-border: var(--accent-border);

    /* Soft varianty semantických barev (pozadí 4–7 % alfa) */
    --green:        var(--success-600);
    --green-hover:  var(--success-700);
    --green-soft:   rgba(16, 185, 129, 0.07);
    --green-border: rgba(16, 185, 129, 0.3);
    --green-text:   var(--success-700);
    --yellow:       var(--warning-600);
    --yellow-soft:  rgba(245, 158, 11, 0.07);
    --orange:       var(--warning-600);
    --orange-soft:  rgba(245, 158, 11, 0.07);
    --red:          var(--danger-600);
    --red-soft:     rgba(239, 68, 68, 0.06);

    /* ── Stíny ── */
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
    --shadow-md: 0 1px 3px 0 rgba(0,0,0,.08), 0 1px 2px -1px rgba(0,0,0,.06);

    /* ── Layout metriky ── */
    --topbar-height:   50px;
    --sidebar-width:   230px;
    --content-width:   680px;
    --panel-width:     400px;
}

/* ═══════════════════════════════════════════════════════════════
   DARK REŽIM — Tailwind zinc, „opravdová čerň" bez modrého nádechu
   Aktivace: document.documentElement.setAttribute('data-theme','dark')
   ═══════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
    --bg:             #09090b;   /* zinc-950 */
    --surface:        #18181b;   /* zinc-900 — karty, panely */
    --surface-2:      #27272a;   /* zinc-800 */
    --surface-3:      #3f3f46;   /* zinc-700 */
    --surface-hover:  #27272a;
    --border:         #27272a;
    --border-hover:   #3f3f46;
    --text:           #fafafa;   /* zinc-50  */
    --text-secondary: #d4d4d8;   /* zinc-300 */
    --text-muted:     #a1a1aa;   /* zinc-400 */
    --text-faint:     #71717a;   /* zinc-500 */

    /* Silnější stíny pro kontrast na černé */
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.5);
    --shadow-md: 0 4px 8px -2px rgba(0,0,0,.6), 0 2px 4px -2px rgba(0,0,0,.4);

    /* Inverze gray škály — komponenty psané „světle" fungují beze změn */
    --gray-50:  #18181b;
    --gray-100: #27272a;
    --gray-200: #3f3f46;
    --gray-300: #52525b;
    --gray-400: #71717a;
    --gray-500: #a1a1aa;
    --gray-600: #d4d4d8;
    --gray-700: #e4e4e7;
    --gray-800: #f4f4f5;
    --gray-900: #fafafa;
    --gray-950: #ffffff;

    /* „Bílá" v dark = surface (karty s pozadím var(--white)) */
    --white: #18181b;
}

/* ── Základ dokumentu ── */
html, body {
    transition: background-color 0.2s ease, color 0.2s ease;
}
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Focus vzor (inputy) ──
   .input:focus { border-color: var(--accent);
                  box-shadow: 0 0 0 3px var(--accent-softer); } */