/* Design tokeny — single source of truth vzhledu (viz DESIGN.md, brand motiv krém/vínová).
   Všechny tokeny jsou CSS custom properties; runtime injekce v _Layout.cshtml přepíše
   tuto statickou sadu hodnotami z DB (ThemeTokenOverrides via ThemeService).
   Pořadí: tokens.css (brand default) → runtime :root override → site.css (var() reference).

   Mapping editor-klíč → CSS proměnná (pro editor 8.3 a allowlist sanitizace):
   ┌──────────────────────────┬───────────────────────┬──────────────────┐
   │ Editor klíč (DESIGN.md)  │ CSS proměnná          │ Brand default    │
   ├──────────────────────────┼───────────────────────┼──────────────────┤
   │ colors.bg                │ --background          │ #EFE6D8          │
   │ colors.surface           │ --surface             │ #FAF4EA          │
   │ colors.surface-sunken    │ --surface-sunken      │ #E4D7C5          │
   │ colors.ink               │ --ink                 │ #241A15          │
   │ colors.ink-muted         │ --ink-muted           │ #6A584C          │
   │ colors.ink-subtle        │ --ink-subtle          │ #97897B          │
   │ colors.accent            │ --primary             │ #8C2231          │
   │ colors.accent-hover      │ --primary-hover       │ #71121F          │
   │ colors.accent-text       │ --accent-text         │ #8C2231          │
   │ colors.border            │ --border              │ #DCCDB8          │
   │ colors.on-primary        │ --on-primary          │ #FFF7EF          │
   │ colors.success           │ --success             │ #3F6B3A          │
   │ colors.warning           │ --warning             │ #8A5A0E          │
   │ colors.error             │ --danger              │ #B5360F          │
   │ colors.info              │ --info                │ #3E5C73          │
   │ typography.fontFamily    │ --font-body           │ Inter, ...       │
   │ typography.fontDisplay   │ --font-display        │ Cormorant, ...   │
   │ rounded.sm               │ --radius-sm           │ 2px              │
   │ rounded.md               │ --radius-md           │ 2px              │
   │ rounded.lg               │ --radius-lg           │ 2px              │
   │ spacing.1                │ --space-1             │ 4px              │
   │ spacing.2                │ --space-2             │ 8px              │
   │ spacing.3                │ --space-3             │ 12px             │
   │ spacing.4                │ --space-4             │ 16px             │
   │ spacing.6                │ --space-6             │ 24px             │
   │ spacing.8                │ --space-8             │ 32px             │
   │ spacing.12               │ --space-12            │ 48px             │
   │ spacing.16               │ --space-16            │ 64px             │
   │ spacing.section-y        │ --space-section-y     │ 72px             │
   │ spacing.page-x           │ --space-page-x        │ 56px             │
   └──────────────────────────┴───────────────────────┴──────────────────┘
*/
:root {
    /* Barvy — brand paleta (teplé krémové neutrály + vínová/crimson akcent) */
    --background: #EFE6D8;        /* teplé krémové pozadí stránky */
    --surface: #FAF4EA;           /* karty, panely, ploché povrchy */
    --surface-sunken: #E4D7C5;    /* zapuštěné plochy (vstupy, taby) */
    --ink: #241A15;               /* hlavní text ≈13.76:1 na --background (AAA) */
    --ink-muted: #6A584C;         /* sekundární text/placeholder ≈5.45:1 (AA) */
    --ink-subtle: #97897B;        /* terciární — jen dekorativní, NIKDY placeholder */
    --primary: #8C2231;           /* vínová/crimson akcent — tlačítka, plochy, lišta */
    --primary-hover: #71121F;     /* hover/active akcentu; on-primary ≈10.95:1 */
    --accent-text: #8C2231;       /* malý akcentní text/odkazy ≈7.11:1 (AA) */
    --border: #DCCDB8;            /* obrysy, dělicí linky — dekorativní (teplé) */
    --on-primary: #FFF7EF;        /* světlý text na vínové výplni ≈8.29:1 */

    /* Stavové barvy — zemité, ≥4.5:1 na --background (AA text) */
    --success: #3F6B3A;
    --warning: #8A5A0E;
    --danger: #B5360F;            /* chyba — oranžovo-červená, hue-odlišná od purpurově-vínové --primary (≈4.85:1 na bg) */
    --info: #3E5C73;

    /* Typografie — Inter tělo, Cormorant (serif) nadpisy/display */
    --font-body: "Inter", 'Helvetica Neue', Arial, system-ui, sans-serif;
    --font-display: "Cormorant Garamond", Georgia, serif;

    /* Spacing — základní jednotka 4px */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;
    --space-section-y: 72px;      /* vertikální rytmus sekcí */
    --space-page-x: 56px;         /* boční okraj obsahu (desktop) */

    /* Tvary — ostré geometrické rohy (Ember identita: max 2px) */
    --radius-sm: 2px;
    --radius-md: 2px;
    --radius-lg: 2px;
    --radius-full: 9999px;        /* zachováno pro kruhové prvky (swatch, avatar) */

    /* Layout */
    --content-max: 1140px;
    --reading-max: 680px;

    /* Elevace — ploché + obrysy; stíny minimální (sticky/modal) */
    --shadow-sticky: 0 2px 8px rgba(22, 19, 15, 0.08);
}