/**
 * CSS Variables - Single Source of Truth
 * Created: 2026-02-02
 *
 * Všetky CSS premenné na jednom mieste pre konzistentnosť.
 * Importuj tento súbor PRVÝ pred všetkými ostatnými CSS.
 */

:root {
    /* ==========================================================================
       COLORS - Brand
       ========================================================================== */
    --color-primary: #742A8D;
    --color-primary-light: #B83CDE;
    --color-primary-dark: #5a1f6d;
    --color-primary-gradient-start: #B83CDE;
    --color-primary-gradient-end: #742A8D;
    --color-accent: #ffb400;
    --color-primary-accent: #8b3fb6;
    --color-primary-accent-hover: #9b4fc6;
    --color-primary-accent-dark: #7a2fa8;
    --color-primary-accent-bg: #f3e8ff;
    --color-primary-accent-bg-hover: #ede5ff;
    --color-primary-accent-glow: rgba(139, 63, 182, 0.1);
    --color-primary-accent-glow-hover: rgba(139, 63, 182, 0.2);

    /* ==========================================================================
       COLORS - UI States
       ========================================================================== */
    --color-success: #10b981;
    --color-success-light: #d1fae5;
    /* WCAG 2.1 AA (1.4.3): #10b981 dava 2,54:1 na bielej / 2,23:1 na #f0f0f0 - pod hranicou.
       #146c43 dava 6,45:1 / 5,66:1 (kontrastny audit, uloha T-163). Pouzi pre TEXT/graficke
       plochy vyzadujuce kontrast (napr. rating priemer, distribution bar), NIE ako plosnu
       nahradu --color-success (ta ostava pre plne farebne bloky bez textovej naroky). */
    --color-success-text: #146c43;
    --color-error: #ef4444;
    --color-error-light: #fee2e2;
    /* WCAG 2.1 AA (1.4.3): #ef4444 dava 3,76:1 na bielej / 3,45:1 na #f0f0f0 - pod hranicou.
       #b02a37 dava 6,50:1 / 5,96:1 (kontrastny audit, uloha T-472). Pouzi pre TEXT/graficke
       plochy vyzadujuce kontrast, NIE ako plosnu nahradu --color-error (ta ostava pre plne
       farebne bloky bez textovej naroky). */
    --color-error-text: #b02a37;
    --color-warning: #f59e0b;
    --color-warning-light: #fef3c7;
    /* WCAG 2.1 AA (1.4.3): #f59e0b dava 2,15:1 na bielej / 1,88:1 na #f0f0f0 - pod hranicou.
       #a04a08 dava 6,04:1 / 5,54:1 (kontrastny audit, uloha T-472). Povodna hodnota #b45309
       z T-163 davala 5,02:1 / 4,41:1, co na novom tabulator hover pozadi #f3e8ff kleslo na
       4,26:1 - pod hranicou, preto T-472 hodnotu stmavila. Pouzi pre TEXT/graficke plochy
       vyzadujuce kontrast, NIE ako plosnu nahradu --color-warning. */
    --color-warning-text: #a04a08;
    --color-info: #3b82f6;
    --color-info-light: #dbeafe;
    /* WCAG 2.1 AA (1.4.3): #3b82f6 dava 3,01:1 na --color-info-light (#dbeafe) - pod hranicou.
       #1d4ed8 dava 5,49:1 (kontrastny audit, uloha T-472). Pouzi pre TEXT/graficke plochy
       vyzadujuce kontrast, NIE ako plosnu nahradu --color-info. */
    --color-info-text: #1d4ed8;

    /* ==========================================================================
       COLORS - Text & Background
       ========================================================================== */
    --color-text: #333;
    --color-text-muted: #666;
    /* WCAG 2.1 AA (1.4.3): #999 malo 2,85:1 na #fff a 2,61:1 na --color-bg-alt (#f5f5f5) — pod hranicou.
       #6f6f6f dáva 5,02:1 na #fff a 4,61:1 na #f5f5f5 (kontrastný audit, úloha T-163). */
    --color-text-light: #6f6f6f;
    --color-bg: #fff;
    --color-bg-alt: #f5f5f5;
    --color-bg-hover: #f5e6fa;
    --color-border: #ddd;
    --color-border-focus: #742A8D;
    --color-instructor-photo-border: #f0e8ff;

    /* ==========================================================================
       SIZING - Inputs & Buttons
       ========================================================================== */
    --input-height: 28px;
    --button-height: 28px;
    --tap-target-min: 44px;

    /* ==========================================================================
       SPACING
       ========================================================================== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-2xl: 32px;

    /* ==========================================================================
       TYPOGRAPHY
       ========================================================================== */
    --font-family: Tahoma, Verdana, sans-serif;
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 13px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 24px;

    /* ==========================================================================
       BREAKPOINTS (for reference - use in media queries)
       ========================================================================== */
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    --breakpoint-wide: 1280px;
    --breakpoint-ultrawide: 1440px;

    /* ==========================================================================
       Z-INDEX Scale
       ========================================================================== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 9000;
    --z-nav-drawer: 10000;
    --z-nav-overlay: 9999;

    /* ==========================================================================
       BORDERS & SHADOWS
       ========================================================================== */
    --border-radius-sm: 3px;
    --border-radius: 4px;
    --border-radius-lg: 6px;
    --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --box-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);

    /* ==========================================================================
       CALENDAR Specific
       ========================================================================== */
    --calendar-width-mobile: 1200px;
    --calendar-cell-width-mobile: 155px;
    --calendar-hours-width-mobile: 52px;
    --calendar-cell-height: 34px;
    --calendar-hour-height: 32px;
    --calendar-color-ride: #c0e8a0;
    --calendar-color-additional: #80FFFF;
    --calendar-color-reserved: #a0d0f0;
    --calendar-color-cancelled: #f0c0c0;
    --calendar-color-free: #ffffff;

    /* ==========================================================================
       TABULATOR - Thumbnails
       ========================================================================== */
    --thumb-width: 100px;
    --thumb-height: 60px;
}