/* ══════════════════════════════════════════════════════════════════════════════════════════
   DESIGN SYSTÉM ALFRÉDA — jediný zdroj barev, písma, odstupů, tvarů a pohybu.

   Odkud: vizuální kostra, kterou 14. 8. 2026 dodal Pavel Müller (tiket „Nová vizuální kostra",
   prototyp v příloze). NENÍ to rebrand — zelená #AFCA0B i písma (Utile Display + Inter) jsou
   naše dosavadní, hnědá a krém se liší o jednotky v posledním bajtu. Co je nové, je SYSTÉM:
   místo osmi ručně volených barev je z každé rodiny odstupňovaná škála, a odstupy, velikosti
   písma, rádiusy i stíny přestávají být rozhodnutím na místě.

   ── JAK SE TO POUŽÍVÁ ────────────────────────────────────────────────────────────────────
   • Nové pravidlo píše `var(--space-4)`, ne `16px`; `var(--text-sm)`, ne `14px`.
   • Původní tokeny (`--c-*`, `--barva-*`, `--radius`, `--stin-*`) ŽIJÍ DÁL jako aliasy níž.
     Tisíce hotových pravidel se nepřepisují kvůli přejmenování — přemapují se, a kdo je
     bude příště upravovat, sáhne rovnou po škále.
   • Škála se NEROZŠIŘUJE ad hoc. Když hodnota chybí, patří sem — ne do komponenty.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Barevné rodiny ──────────────────────────────────────────────────────────────────
       Hnědá nese text a tmavé plochy, zelená je akcent (logo), krém je papír pod tím vším. */
    --brown-900: #2e231a;   /* espresso — nejtmavší plochy (levá lišta, horní pruh) */
    --brown-800: #3c2e22;
    --brown-700: #493729;
    --brown-600: #594334;   /* JÁDRO značky — primární text */
    --brown-500: #6b5442;
    --brown-400: #8a7563;   /* tlumený text */
    --brown-300: #b3a291;
    --brown-200: #d8ccbc;
    --brown-100: #e9e0d2;

    --green-700: #7f930a;
    --green-600: #93a909;
    --green-500: #afca0b;   /* zelená z loga */
    --green-400: #c1de0c;
    --green-300: #d6ec5a;
    --green-200: #e8f2ad;
    --green-100: #f2f6d8;

    --cream-50:  #faf7f0;
    --cream-100: #f4efe4;   /* pozadí stránky */
    --cream-200: #ebe3d5;
    --cream-300: #e0d5c3;
    --white: #ffffff;

    /* Stavy. Zelená „v pořádku" je TMAVŠÍ než akcentní — akcent na světlém pozadí neunese text. */
    --success: #7f930a;
    --warning: #c8871f;
    --danger:  #a8412c;

    /* BARVY PRIORIT — číselník `PRIO` z návrhu, JEDNO místo pravdy (20. 8. 2026).
       Kreslí se na dvou místech (`.backlog-pdot` v tabulce, `.backlog-prio-tecka` na kartě
       boardu a v panelu detailu) a ty dvě kopie se rozešly: „Vysoká" měla `--danger`, tedy
       barvu KRITICKÉ, a „Střední" měla `--warning`, tedy barvu vysoké. Každý stupeň tak
       vypadal o jeden alarmující víc, než jaký byl — odznak lhal o stavu a v tabulce vedle
       toho svítila správná barva. Proto tokeny, ne opsané hodnoty. */
    --prio-kriticka: #a8412c;   /* = --danger */
    --prio-vysoka:   #c8871f;   /* = --warning */
    --prio-stredni:  #8a7563;   /* = --brown-400 */
    --prio-nizka:    #b3a291;   /* = --brown-300 */

    /* BARVY DRUHŮ — číselník `DRUH` z návrhu (20. 8. 2026). Čtvereček druhu v drobečku detailu
       tiketu je JEDINÉ místo na obrazovce, kde je druh vidět barvou (jinak se pozná až
       přečtením slova). Tokeny, ne opsané hodnoty: druh se kreslí i v seznamu backlogu
       a dvě sady čísel by znamenaly, že „chyba" má v drobečku jinou barvu než v tabulce.
       Návrh má i `epika` (#493729 = --brown-700); u nás je epika samostatná entita, ne druh
       tiketu (ALF-16), takže tady není. */
    --druh-user_story:      #7f930a;   /* = --green-700 */
    --druh-chyba:           #a8412c;   /* = --danger */
    --druh-feature_request: #6b5442;   /* = --brown-500 (v návrhu „pozadavek") */
    --druh-neurcen:         #b3a291;   /* = --brown-300; neznámý druh nesmí vypadat jako platný */

    --info:    #5a6b7a;

    /* ── Role barev ────────────────────────────────────────────────────────────────────── */
    --color-accent:       var(--green-500);
    --color-accent-hover: var(--green-600);
    --color-accent-press: var(--green-700);
    --color-accent-soft:  var(--green-100);
    --color-accent-ink:   var(--brown-700);

    --text-strong:  var(--brown-900);
    --text-primary: var(--brown-600);
    --text-muted:   var(--brown-400);

    --surface-page:   var(--cream-100);
    --surface-card:   var(--white);
    --surface-sunken: var(--cream-200);
    --surface-dark:   var(--brown-900);
    --surface-dark-2: var(--brown-700);

    --border-hairline: #e2d8c8;
    --border-strong:   var(--brown-300);
    --focus-ring: color-mix(in srgb, var(--green-500) 55%, transparent);

    /* ── Písmo ───────────────────────────────────────────────────────────────────────────
       Utile Display na nadpisy, Inter na text — obojí self-host (@font-face v cimpel.css). */
    --font-display: "Utile Display", "Inter", Georgia, serif;
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "SFMono-Regular", ui-monospace, "Menlo", "Consolas", monospace;

    --text-3xs: 11px;
    --text-2xs: 12px;
    --text-xs:  13px;
    --text-sm:  14px;
    --text-md:  16px;
    --text-lg:  19px;
    --text-xl:  23px;
    --text-2xl: 28px;
    --text-3xl: 34px;
    --text-4xl: 44px;
    --text-5xl: 58px;
    --text-6xl: 76px;

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    --lh-tight:   1.06;
    --lh-snug:    1.22;
    --lh-normal:  1.55;
    --lh-relaxed: 1.7;

    --tracking-tight:  -0.02em;
    --tracking-normal: 0;
    --tracking-wide:   0.04em;
    --tracking-label:  0.14em;   /* KAPITÁLKOVÉ POPISKY */

    /* ── Odstupy ─────────────────────────────────────────────────────────────────────────
       Čtyřkový krok. Číslo v názvu je čtvrtina pixelů: --space-4 = 16 px. */
    --space-0:  0;
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* ── Tvar ────────────────────────────────────────────────────────────────────────────── */
    --radius-xs:   4px;
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   18px;
    --radius-xl:   26px;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(46, 35, 26, .06);
    --shadow-sm: 0 2px 6px rgba(46, 35, 26, .08);
    --shadow-md: 0 6px 20px rgba(46, 35, 26, .10);
    --shadow-lg: 0 18px 48px rgba(46, 35, 26, .14);
    --shadow-focus: 0 0 0 3px var(--focus-ring);

    /* ── Šířky obsahu ───────────────────────────────────────────────────────────────────── */
    --container-sm: 640px;
    --container-md: 880px;
    --container-lg: 1120px;
    --container-xl: 1320px;

    /* ── Pohyb ──────────────────────────────────────────────────────────────────────────── */
    --ease-standard: cubic-bezier(.4, 0, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 360ms;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   MOST NA DOSAVADNÍ TOKENY

   Původní názvy zůstávají platné a ukazují do škály výš. Důvod je prostý: v repu je přes tisíc
   pravidel, která je používají, a hromadné přejmenování by byla nejrizikovější možná změna
   (nic nespadne v překladu, jen se to někde rozsype na obrazovce). Takhle se vzhled srovná
   na jedno místo hned a názvy se dají dočistit postupně.

   ČTYŘI TOKENY MĚNÍ ODSTÍN (jinak by nový systém nemělo smysl zavádět):
     --c-hneda-tmava  #3F2F24 → #2e231a   (tmavé plochy jsou hlubší)
     --c-krem         #F4EFE7 → #f4efe4   (o chlup teplejší papír)
     --c-cihlova      #A6462E → #a8412c   (nebezpečné akce)
     --c-varovani     #E0A500 → #c8871f   (jantar je míň křiklavý)
   Zbytek sedí přesně na to, co jsme měli.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

:root {
    --c-zelena: var(--green-500);
    --c-zelena-tmava: #90A800;          /* tmavší zelená na text — ZŮSTÁVÁ, viz kontrast níž */
    --c-zelena-svetla: var(--green-200);
    --c-hneda: var(--brown-600);
    --c-hneda-tmava: var(--brown-900);
    --c-krem: var(--cream-100);
    --c-seda: #A59C97;                  /* neutrální šedá není v hnědé škále — dekorace, ne text */
    --c-bila: var(--white);
    --c-cihlova: var(--danger);

    --c-ok: var(--success);
    --c-varovani: var(--warning);
    --c-chyba: var(--danger);

    /* Textové varianty NEPŘEBÍRÁME ze škály: --text-muted (#8a7563) má na krému kontrast
       3,4:1, což je pod AA 4,5:1 pro nosný text. Publikum Alfréda je 45+ a čitelnost byla
       vlastní rozhodnutí (viz cimpel.css) — design systém ho nepřebíjí. */
    --barva-tlumeny-text: #736A62;
    --barva-akcent-text: #5F6E00;

    --barva-pozadi: var(--surface-page);
    --barva-povrch: var(--surface-card);
    --barva-text: var(--text-primary);
    --barva-text-tlumeny: var(--barva-tlumeny-text);
    --barva-akcent: var(--c-zelena-tmava);
    --barva-linka: var(--border-hairline);

    --font-nadpis: var(--font-display);
    --font-text: var(--font-body);
    --font-cisla: "Inter Tight", "Inter", -apple-system, "Segoe UI", sans-serif;

    --radius: var(--radius-md);
    --radius-velky: var(--radius-lg);
    --stin-jemny: var(--shadow-sm);
    --stin-zvednuty: var(--shadow-md);

    --prechod: var(--dur-base) var(--ease-standard);
}