/* ============================================================
   AI tvorba kurzů — design tokeny
   Brand: AI tvorba kurzů (ai-tvorba-kurzu.cz)
   Verze: 1.0 (2026-07)
   Použití: importovat jako první stylesheet, všechny barvy
   v aplikaci brát výhradně z těchto proměnných.
   ============================================================ */

:root {
  /* --- Značkové barvy --- */
  --brand-primary:      #4338CA;  /* indigo — hlavní barva značky */
  --brand-primary-dark: #312E81;  /* tmavé indigo — hover, patičky, obálka */
  --brand-primary-soft: #EEF2FF;  /* světlé indigo — pozadí sekcí, zvýraznění */
  --brand-accent:       #F59E0B;  /* jantarová — CTA, kurzor, akcenty. Šetřit s ní. */
  --brand-accent-dark:  #B45309;  /* tmavá jantarová — text na světlém, tmavé pilulky */
  /* Jantar je světlá barva: bílý text na něm dává jen ~2:1. Vyplněná jantarová plocha
     proto nese tmavý text a po najetí se ZESVĚTLUJE (ztmavení by kontrast rozbilo). */
  --brand-accent-ink:   #3B2A08;  /* text na vyplněném jantaru — stejný ve všech motivech */
  --brand-accent-hover: #FBBF24;  /* jantar po najetí */

  /* --- Neutrály --- */
  --ink:        #0F172A;  /* hlavní text */
  --ink-muted:  #64748B;  /* sekundární text, popisky */
  --ink-muted-strong: #475569; /* sekundární text na tónované ploše — WCAG AA */
  --line:       #E2E8F0;  /* rámečky, oddělovače */
  --bg:         #FFFFFF;  /* základní pozadí */
  --bg-soft:    #F8FAFC;  /* alternativní pozadí, karty */

  /* --- Stavové barvy --- */
  --ok:     #047857;
  --ok-soft:#D1FAE5;
  --warn:   #D97706;
  --danger: #DC2626;

  /* --- Doplňkové odstíny značky (knihovna promptů) --- */
  --brand-mid:    #A5B4FC;  /* světlejší indigo — hover rámečky */
  --accent-soft:  #FEF3C7;  /* světlá jantarová — pozadí zámků, workshop */

  /* --- Barvy modalit (cílový výstup promptu) --- */
  --m-text:  #4338CA;
  --m-obraz: #DB2777;
  --m-video: #7C3AED;
  --m-hlas:  #0891B2;
  --m-lms:   #059669;

  /* --- Typografie --- */
  --font-display: "Signika", "Segoe UI", system-ui, sans-serif; /* nadpisy, wordmark */
  --font-body:    "Inter", -apple-system, "Segoe UI", Roboto, sans-serif; /* text, UI */
  --font-mono:    "JetBrains Mono", ui-monospace, Consolas, monospace;    /* prompty, kód */

  /* --- Rozměry --- */
  --radius:    10px;   /* karty, tlačítka */
  --radius-lg: 16px;   /* modály, hero prvky */
  --shadow:    0 1px 3px rgb(15 23 42 / .08), 0 4px 16px rgb(15 23 42 / .06);
  --content-width: 1120px;  /* web */
  --reading-width:  68ch;   /* čtečka — čitelný sloupec */
}

/* --- Sepiový režim (čtečka, knihovna — teplé papírové pozadí, světlá značková paleta) ---
   Značkové barvy (indigo, jantar, modality, stavy) zůstávají světlé záměrně:
   sepia mění jen papír a text, ne identitu. */
[data-theme="sepia"] {
  --ink:                #3B3427;
  --ink-muted:          #726754;
  --line:               #E2D9C5;
  --bg:                 #F8F3E7;
  --bg-soft:            #F1EADA;
  --brand-primary-soft: #EDE7F6;
}

/* --- Tmavý režim (čtečka, volitelně web) --- */
[data-theme="dark"] {
  --brand-primary:      #818CF8;
  --brand-primary-dark: #A5B4FC;
  --brand-primary-soft: #1E1B4B;
  --brand-accent:       #FBBF24;
  --brand-accent-dark:  #F59E0B;
  /* jantar je v tmavém režimu ještě světlejší → hover musí zesvětlit nad něj */
  --brand-accent-hover: #FCD34D;

  --ink:       #E2E8F0;
  --ink-muted: #94A3B8;
  --line:      #334155;
  --bg:        #0F172A;
  --bg-soft:   #1E293B;

  --ok:        #34D399;
  --ok-soft:   #064E3B;
  --brand-mid: #4F46E5;
  --accent-soft:#3B2F0B;

  --m-text:  #A5B4FC;
  --m-obraz: #F472B6;
  --m-video: #C4B5FD;
  --m-hlas:  #67E8F9;
  --m-lms:   #6EE7B7;
}

/* --- Základní aplikace tokenů --- */
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}

h1, h2, h3, .wordmark {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

a { color: var(--brand-primary); }

.btn-primary {
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
  border-radius: var(--radius);
  font-weight: 600;
}
.btn-primary:hover { background: var(--accent-hover); color: var(--brand-accent-ink); }

.btn-secondary {
  background: var(--brand-primary);
  color: #FFFFFF;
  border-radius: var(--radius);
}
.btn-secondary:hover { background: var(--brand-primary-dark); color: #FFFFFF; }

.prompt-block {
  font-family: var(--font-mono);
  font-size: 0.925rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-primary);
  border-radius: var(--radius);
  padding: 16px 20px;
}