/* ============================================================ SK Lázně Bělohrad – design tokeny ------------------------------------------------------------ JEDINÝ zdroj pravdy pro barvy, typografii, mezery a stíny. Barevné hodnoty jsou převzaté 1:1 z původního app.css – redesign mění POUŽITÍ barev, ne barvy samotné. Tenhle soubor se linkuje jako PRVNÍ a BEZPODMÍNEČNĚ na každé stránce (včetně /Account/*). Důvod: kategorie si přes TeamCategory.AccentColor() vkládají style="--accent:var(--cat-…)". Kdyby --cat-* na stránce chybělo, --accent by byla "nastavená, ale neplatná" – a var(--accent, var(--green)) by NEspadlo na zálohu (ta platí jen pro NEnastavenou proměnnou). Barevné hrany by tiše zmizely. Proto tu taky ZÁMĚRNĚ NENÍ žádné :root{--accent:…} – maskovalo by přesně tuhle chybu. ============================================================ */ :root { /* ---------- Značka (hodnoty beze změny) ---------- */ --green: #1f9d55; --green-dark: #0c5c33; /* Zelená POUŽITELNÁ JAKO TEXT na světlém podkladu. Samotná --green má s bílým pozadím kontrast jen 3.49:1, tedy pod požadovaných 4.5:1 – ztmavení o 22 % (stejný recept jako u .cat-tab.active a .btn-primary) dá 5.35:1. --green-dark by prošla taky (8.1:1), ale je na drobné popisky moc tmavá. */ --green-text: color-mix(in srgb, var(--green) 78%, #000); --green-deep: #07210f; /* dřív natvrdo v gradientech hlavičky/partnerů/účtu */ --ink: #1a2230; --ink-2: #3d4757; /* NOVÝ: sekundární text – nahrazuje hierarchii tučností */ /* Bylo #6b7280, ale na --bg dávalo kontrast 4.46:1 – těsně pod hranicí WCAG AA (4.5:1) pro běžný text. Ztmaveno na 5.0:1, odstín zachován. */ --muted: #646b76; --bg: #f4f6f8; --surface: #ffffff; --surface-2: #f8fafb; /* dřív natvrdo jako pozadí hlavičky tabulek */ --border: #e3e6ea; /* ---------- Výsledky (beze změny) ---------- */ --win: #1f9d55; --draw: #f2c94c; --loss: #eb5757; --gold: #ffd34d; --info: #2f80ed; /* dřív natvrdo – "nadcházející zápas" */ --info-dark: #1c4fa1; /* Text na žlutém odznaku remízy – bílá by na --draw neměla kontrast. */ --on-draw: #5a4a00; /* ---------- Typ soutěže (dřív ztrojeno v CSS + 2 komponentách) ---------- */ --comp-pohar: #b8860b; --comp-turnaj: #7b2cbf; /* ---------- Kategorie – přesunuto z Models/TeamCategory.cs ---------- Přípony odpovídají TeamCategory.Slug(), takže mapování C# → CSS je AccentColor() => $"var(--cat-{Slug()})" a nemůže se rozejít. */ --cat-muzi-a: #1f9d55; --cat-muzi-b: #2f80ed; --cat-starsi-dorost: #9b51e0; --cat-mladsi-dorost: #7b2cbf; --cat-starsi-zaci: #f2994a; --cat-mladsi-zaci: #eb5757; --cat-starsi-pripravka: #00b8a9; --cat-mladsi-pripravka: #ffb703; /* Varianta JEN pro pilulku s bílým textem. Barvy výše zůstávají plné – na hranách karet a akcentech je bílý text nemá, takže tam problém není. Hodnoty jsou spočítané jako NEJMENŠÍ ztmavení, při kterém bílý text splní WCAG AA (4.5:1); uvedeny jen kategorie, kterým to nevycházelo. Muži A, oba dorosty a Turnaj procházejí v plné barvě, proto tu nejsou. */ --cat-muzi-b-pill: #2b74d8; /* z #2f80ed, 3.87 → 4.56 */ --cat-starsi-zaci-pill: #a56832; /* z #f2994a, 2.23 → 4.55 */ --cat-mladsi-zaci-pill: #ca4b4b; /* z #eb5757, 3.48 → 4.55 */ --cat-starsi-pripravka-pill: #00847a; /* z #00b8a9, 2.49 → 4.56 */ --cat-mladsi-pripravka-pill: #996e02; /* z #ffb703, 1.75 → 4.59 */ --comp-pohar-pill: #996f09; /* z #b8860b, 3.25 → 4.53 */ /* ---------- Tréninková pásma (/treninky) ---------- Kde pásmo odpovídá kategorii, je to teď alias – ať nemůže vzniknout stav "přípravka je na /zapasy jinak oranžová než na /treninky". */ --band-brankari: #64748b; --band-mini: #0ea5e9; --band-pripravka: var(--cat-mladsi-pripravka); /* bylo #fb923c – JEDINÁ změna hexu */ --band-pripravka-zaci: #ec4899; --band-dorost: var(--cat-starsi-dorost); /* bylo #9b51e0 – shodné, teď alias */ --band-muzi: var(--green); --band-garda: #a8763e; /* ---------- Průhlednosti pro color-mix ---------- Nahrazuje ručně psané rgba() dvojníky barev, které se při změně barvy neaktualizovaly (blok pak byl dvoubarevný). */ --tint-1: 8%; --tint-2: 14%; --tint-3: 22%; /* ---------- Písmo ---------- */ --font-sans: 'Barlow', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-display: 'Barlow Condensed', 'Barlow', 'Segoe UI Semibold', 'Segoe UI', sans-serif; /* Devět kroků místo čtyřiceti. Tři fluidní – ty nahrazují ~10 media bloků, jejichž jediná práce bylo zmenšit písmo na mobilu. */ --fs-3xs: 0.6875rem; --fs-2xs: 0.75rem; --fs-xs: 0.8125rem; --fs-sm: 0.875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: clamp(1.125rem, 0.95rem + 0.8vw, 1.375rem); --fs-2xl: clamp(1.375rem, 1.1rem + 1.4vw, 1.875rem); --fs-3xl: clamp(1.75rem, 1.2rem + 2.6vw, 2.75rem); /* skóre – to hlasité */ /* Hierarchii nese velikost + barva, ne tučnost. --fw-black je vyhrazená pro skóre a body v tabulce; jinde se nepoužívá. */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* ---------- Mezery ---------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; /* Fluidní odsazení – --pad-page-* je zároveň jediný zdroj pro .content v MainLayout.razor.css a pro celoplošné odsazení .account-shell, které se dřív dopočítávalo ručně ve dvou souborech (a na mobilu nesedělo o 0.2rem). */ --pad-card: clamp(0.85rem, 0.6rem + 1.2vw, 1.25rem); --pad-page-x: clamp(0.7rem, 0.4rem + 1.4vw, 1rem); --pad-page-y: clamp(0.85rem, 0.6rem + 1vw, 1.25rem); /* ---------- Rádius ---------- */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px; --radius: var(--r-lg); /* ALIAS – drží ~30 stávajících var(--radius) */ /* ---------- Vyvýšení ---------- */ --e-1: 0 1px 2px rgba(16, 24, 40, 0.05); --e-2: 0 1px 3px rgba(16, 24, 40, 0.06), 0 6px 18px rgba(16, 24, 40, 0.05); --e-3: 0 2px 6px rgba(16, 24, 40, 0.07), 0 12px 28px rgba(16, 24, 40, 0.10); --e-4: 0 10px 30px rgba(0, 0, 0, 0.20); --shadow: var(--e-2); /* ALIAS – drží ~30 stávajících var(--shadow) */ /* ---------- Pohyb ---------- */ --dur: 140ms; --ease: cubic-bezier(0.2, 0.6, 0.3, 1); --lift: -2px; } /* ------------------------------------------------------------ Breakpointy (custom properties v @media fungovat NEMOHOU, takže jsou to literály – tenhle přehled je závazný seznam): 640px telefon – víceslupcové mřížky na 1 sloupec, kompaktní odsazení 760px "tabulka se nevejde" – záměna tabulka↔karty, dotykové cíle, tréninková mřížka 960px "dva sloupce se nevejdou" – .two-col, .summary-row 1080px navigace – NEMĚNIT, hlavička je široká (viz app.css / layout.css) Jiné hodnoty se nezavádějí. ------------------------------------------------------------ */