/*
 * Designové tokeny (R38).
 *
 * Hodnoty jsou brand StartupJobs — převzaté z kalendáře akcí
 * (gitlab.com/mikschik-filip/calendar), aby těch třicet sedm domén splynulo
 * s hlavním webem a mezi sebou. Zdroj pravdy na straně brandu je
 * `04_brand_guidelines.md` / `22_kalendar_brand_vzor.md`.
 *
 * Pravidlo, které z toho plyne a které se testuje: **barvy a písma jsou
 * jenom tady.** V `app.css` nesmí být ani jeden hex kód — jinak by se
 * přebarvení třiceti sedmi domén dělalo sáhnutím do šablon místo do jednoho
 * souboru.
 *
 * Kalendář má tokeny a komponenty v jednom souboru; u nás jsou oddělené
 * právě kvůli tomu testu. Jména tokenů zůstala naše, protože `app.css` je
 * používá všude — změnila se hodnota, ne slovník.
 *
 * ⚠ Tmavý režim tu NENÍ schválně. Brand StartupJobs je světlý a zadání
 * říká, že web má splynout s hlavním. Tmavá varianta by na půlce zařízení
 * ukázala něco jiného než kalendář, což je přesně to, čemu se tu vyhýbáme.
 */

:root {
    /* ---- brand ----------------------------------------------------------- */
    --c-brand:         #003DFF;   /* SJ modrá */
    --c-brand-ink:     #0030CC;   /* tmavší odstín pro hover */
    --c-brand-tint:    #EAF0FF;   /* podklad chipů a zvýraznění */
    --c-black:         #0A0A0A;
    --c-paper:         #F5F7FF;   /* jemný podklad karet a boxů */

    --c-green:         #00F286;   /* zelená z hlavního webu (`green-400`) */
    --c-red:           #F0153C;   /* odznak u placené nabídky, jako na .cz */
    --c-pink:          #FF5DA2;
    --c-gold:          #FFC24B;

    /* ---- plochy a text --------------------------------------------------- */
    --c-bg:            #ffffff;
    --c-bg-soft:       #F5F7FF;
    --c-surface:       #ffffff;
    /* Dvě síly linek, stejně jako na hlavním webu: světlá u ploch,
       tmavší u ovládacích prvků. */
    --c-border:        #EEEEF2;
    --c-border-strong: #E5E5E9;

    /* Šedý žebřík je převzatý z www.startupjobs.cz, ne odhadnutý. Tři
       odstíny, každý na jinou roli — kdyby byl jeden, meta řádek u nabídky
       by křičel stejně jako text, který se má číst. */
    --c-text:          #000000;   /* hlavní web má text čistě černý */
    --c-text-strong:   #33383F;   /* jméno firmy nad názvem nabídky */
    --c-text-muted:    #6F767E;   /* popisky, data, druhotný text */
    --c-text-soft:     #9A9FA5;   /* meta řádek u nabídky, na hoveru zčerná */
    --c-text-inverse:  #ffffff;

    --c-accent:        #003DFF;
    --c-accent-hover:  #0030CC;
    --c-accent-soft:   #EAF0FF;

    --c-featured:      #FFC24B;
    --c-featured-soft: #FFF3D6;
    --c-featured-ink:  #3a2a00;

    --c-warn-bg:       #FFF3D6;
    --c-warn-border:   #FFC24B;

    --c-focus:         #003DFF;

    /* ---- typografie ------------------------------------------------------ */
    /* Fellix se používat nebude — licence je komerční a Filip si u ní není
       jistý pokrytím (rozhodnuto 20. 9. 2026). Náhradou je Figtree, vybraná
       měřením proti Fellixu, ne dojmem; tabulka odchylek je v fonts.css.
       Jede na nadpisy i na text, protože hlavní web má taky jedno písmo
       na všechno. Inter je druhý v pořadí kvůli azbuce a řečtině, které
       Figtree nemá — prohlížeč si po něm sáhne jen pro ty znaky.
       Písma se hostují u nás, ne z Google Fonts — viz assets/fonts/fonts.css. */
    --font-head: 'Figtree', 'Inter', -apple-system, system-ui, sans-serif;
    --font-body: 'Figtree', 'Inter', -apple-system, system-ui, sans-serif;
    --font-sans: var(--font-body);

    --font-size-base: 16px;
    --line-base: 1.55;

    /* O stupeň níž, než mělo hlavní webu odpovídat 1:1. Naše nadpisy jsou
       celé věty, ne tříslovné slogany, a v jejich sazbě přerůstaly obsah. */
    --fs-h1: clamp(1.75rem, 3.4vw, 2.5rem);
    --fs-h2: 1.375rem;
    --fs-h3: 1.125rem;
    --fs-small: 0.875rem;

    --fw-normal: 400;
    --fw-medium: 600;
    --fw-bold: 700;

    /* Nadpisy mají na hlavním webu stažené prostrkání a nízké proklady. */
    --tracking-head: -0.02em;
    --tracking-eyebrow: 0.16em;
    /* Přesně 110 %, jak to má hlavní web — ne „skoro". U nadpisu přes dva
       řádky je rozdíl mezi 1.08 a 1.10 vidět na první pohled. */
    --line-head: 1.1;
    /* Název nabídky ve výpisu má stažení jen poloviční proti nadpisům. */
    --tracking-title: -0.01em;

    /* ---- rozměry --------------------------------------------------------- */
    --radius-sm: 4px;
    --radius:    8px;      /* SJ vizuál 2026 */
    --radius-lg: 8px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Odměřeno z hlavního webu: kontejner v hlavičce má `max-width: 1440px`
       a `padding: 0 40px`. Dřív tu bylo 1280 — obsah byl o 160 px užší
       a na širokém monitoru to bylo vedle `.cz` hned vidět. */
    --wrap-max: 1440px;
    --wrap-pad: 40px;
    --header-h: 74px;

    --shadow-card: 0 4px 14px rgba(20, 40, 120, 0.08);
    --shadow-pop:  0 12px 30px rgba(20, 40, 120, 0.10);

    /* Linka uvnitř tmavé patičky. Průhledná bílá, aby seděla na černé
       ploše nezávisle na tom, jak se posune --c-black. */
    --c-footer-line: rgba(255, 255, 255, 0.14);
    /* Totéž obráceně: linka na sytém barevném pásu. Průhledná černá sedne
       na zelenou i růžovou, napevno zvolený odstín by na jedné z nich
       vždycky vypadal špatně. */
    --c-line-on-color: rgba(10, 10, 10, 0.18);
    --c-hover-border: #C4D0F2;
}