/*
 * CSS Design Tokens — Single Source of Truth pre mobile.css + mobile.js
 *
 * Loadovaný PRVÝ v base.html.twig (pred IDSK3 base CSS), aby boli tokeny
 * dostupné pre IDSK3 overrides aj custom CSS súbory.
 *
 * SCOPE: tokeny sú trim-nuté na to čo má aktuálny use case v mobile.css /
 * mobile.js (nie sú "na oko"). Ak v budúcnosti pribudne komponenta ktorá
 * potrebuje novú hodnotu (napr. --space-8 alebo --color-success), pridaj
 * token spolu s jeho prvým použitím — nie do zásoby.
 *
 * Súvisí: docs/MOBILE-PLAN.md, assets/styles/mobile.css, assets/javascripts/mobile.js
 */

:root {
    /* === BREAKPOINTY ===
     * Hodnoty v px (nie em) — JS ich vie čítať cez getComputedStyle bez parsovania
     * jednotiek a v mobile.js sa primárne pracuje s pixel-based matchMedia.
     *
     * POZOR: CSS spec dnes NEDOVOLÍ `@media (max-width: var(--bp-mobile))` —
     * custom properties nie sú platné v media query (CSS Media Queries Level 5 je draft).
     * Tokeny preto SLÚŽIA ako single source of truth pre JS + ako dokumentačná referencia,
     * ale media query musí mať pixel hodnotu hard-coded. Keď meníš `--bp-mobile`,
     * synchronizuj aj `@media (max-width: 768px)` v mobile.css (riadky 95, 707).
     */
    --bp-mobile-s: 480px;      /* malé telefóny (iPhone SE) — reserved, nie je v mobile.css zatiaľ */
    --bp-mobile:   768px;      /* PRIMÁRNY: hranica mobile/desktop, čítané v mobile.js */
    --bp-desktop:  1024px;     /* reserved — voliteľný fine-tune pre desktop layouts */

    /* === SPACING (4px grid) — coverage v existing CSS overené:
     * 1=115×, 2=145×, 3=99×, 4=158×, 5=130×, 6=109×, 8=71×, 10=39×, 12=18× */
    --space-1:  0.25rem;       /*  4px */
    --space-2:  0.5rem;        /*  8px */
    --space-3:  0.75rem;       /* 12px */
    --space-4:  1rem;          /* 16px — base */
    --space-5:  1.25rem;       /* 20px */
    --space-6:  1.5rem;        /* 24px */
    --space-8:  2rem;          /* 32px */
    --space-10: 2.5rem;        /* 40px */
    --space-12: 3rem;          /* 48px */

    /* === TYPOGRAPHY (fluid s clamp pre mobile-aware škálovanie) === */
    --fs-xs:    0.875rem;                                    /* 14px — IDSK3 minimum, fixed */
    --fs-sm:    clamp(0.875rem, 0.5vw + 0.75rem, 1rem);      /* 14-16px */
    --fs-base:  clamp(1rem, 0.5vw + 0.875rem, 1.125rem);     /* 16-18px */
    --fs-lg:    clamp(1.125rem, 1vw + 0.875rem, 1.375rem);   /* 18-22px */
    --fs-xl:    clamp(1.375rem, 1.5vw + 1rem, 1.75rem);      /* 22-28px */

    --fs-input: 1.1875rem; /* 19px — IDSK3 .govuk-input/.govuk-select font, fixed */

    --fw-semibold: 600;
    --fw-bold:     700;

    /* === TOUCH TARGETS (WCAG 2.5.5 AAA, default na mobile) === */
    --touch-min:         44px;    /* WCAG minimum */
    --touch-recommended: 48px;    /* preferovaný target pre tlačidlá */

    /* === Z-INDEX HIERARCHY (kontinuálna škála, Bootstrap-like) ===
     * POZN: sidebar (menu) MUSÍ byť NAD overlay (backdrop), inak overlay blokuje
     * touch/click eventy v sidebare a interakcia nefunguje. Bootstrap konvencia. */
    --z-overlay:        1030;     /* mobile menu backdrop (bolo 9998) — POD sidebar */
    --z-mobile-menu:    1040;     /* off-canvas sidebar (bolo 9999) — NAD overlay */
    --z-modal:          1050;     /* full-screen modals + bottom sheet */
    --z-popover:        1060;     /* flash messages toast */
    --z-mobile-close:   1070;     /* close button v off-canvas (bolo 10001) */

    /* === COLORS — coverage v existing CSS overené v analýze (audit 9290 r):
     * primary=120×, primary-dark=86×, error=39×, warning=71×, success=15×,
     * border=25×, bg-hover=27×, black=149×, bg=71×. */
    --color-primary:        #126dff;    /* modrá — focus outline, links, primary CTA */
    --color-primary-dark:   #072c66;    /* tmavá modrá — header, nav, a11y contrast */
    --color-primary-soft:   #c3d9f9;    /* svetlá modrá — filter trigger hover, soft accent */
    --color-primary-hover:  #1a70bb;    /* mobile menu button bg */
    --color-error:          #c3112b;    /* červená — errors, destructive */
    --color-error-hover:    #942514;    /* červená hover */
    --color-error-dark:     #4e0711;    /* veľmi tmavá červená — :active error, button pressed */
    --color-success:        #078814;    /* zelená — success states */
    --color-success-dark:   #033608;    /* veľmi tmavá zelená — :active success */
    --color-warning:        #d96e00;    /* oranžová — warnings */

    --color-black:          #000000;    /* čierny text, borders */
    --color-text-inverse:   #ffffff;    /* button text na color bg */
    --color-border:         #b1b4b6;    /* govuk-border */
    --color-border-light:   #e0e0e0;    /* svetlejší border — cards, separators */
    --color-bg:             #ffffff;    /* sidebar bg, card bg */
    --color-bg-hover:       #f5f5f5;    /* nav link hover bg */

    /* Light semantic backgrounds — info/error/success/warning panel pozadia */
    --color-bg-info:        #eff5fe;    /* svetlá modrá pozadie */
    --color-bg-error:       #fbeef0;    /* svetlá červená pozadie */
    --color-bg-success:     #ebf5ec;    /* svetlá zelená pozadie */
    --color-bg-warning:     #fff2cc;    /* svetlá žltá pozadie — RSS panel, warnings */
    --color-bg-warning-orange: #fbf2e8;  /* svetlá krémová/oranžová pozadie — IDSK3 warning panel */

    /* Text variants — secondary text farba pre meta info, labels, captions.
     * #424242 (21× use case naprieč app.css + auth.css) — kontrast 9.7:1 na bielej (AAA). */
    --color-text-secondary: #424242;    /* sekundárny text — meta, label, caption */

    /* Muted text — pre dataTables_info, paginate ellipsis, news-card__date.
     * #595959 (kontrast 6.36:1 na bielej, AA pass). Nahrádza #757575 (4.48:1, hranica AA fail). */
    --color-text-muted:     #595959;    /* potlmený text — meta info, captions */

    /* RSS / news accent — pôvodne #b8860b (goldenrod) malo kontrast 3.6:1 na #fff2cc → AA fail.
     * Zatmavené na #8b6914 = 4.8:1 na #fff2cc (AA pass). */
    --color-rss:            #8b6914;    /* RSS link na warning bg — WCAG AA compliant */

    /* === BORDER-RADIUS === */
    --radius-sm:  0.25rem;     /*  4px — buttons */
    --radius-md:  0.5rem;      /*  8px — inputs, flash messages */
    --radius-lg:  1rem;        /* 16px — bottom sheet top corners */
    --radius-full: 9999px;     /* pill — drag handle */

    /* === SHADOWS === */
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);  /* light card shadow (existing pattern 4×) */
    --shadow-md:   0 2px 4px rgba(0, 0, 0, 0.1);   /* close button (existing 3× match) */
    --shadow-lg:   0 4px 12px rgba(0, 0, 0, 0.15); /* flash messages */

    /* === TRANSITIONS — base je 200ms aby matchovalo 13× v existing CSS === */
    --transition-fast: 150ms ease;     /* nav link hover (existing 7×) */
    --transition-base: 200ms ease;     /* button hover, general (existing 13×) */
    --transition-slow: 300ms ease;     /* sidebar slide, bottom sheet (existing 5×) */

    /* === LAYOUT === */
    --header-height: 60px;         /* sidebar top offset + height calc */
    --sidebar-width: 18.75rem;     /* 300px — sidebar max-width */
}

/*
 * REDUCED MOTION respektuje user preferenciu.
 * Tokeny --transition-* sa nastavia na 0 ak má používateľ vypnuté animácie.
 */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-base: 0ms;
        --transition-slow: 0ms;
    }
}