/**
 * KSSBS.SK - CSS Variables
 * Presné premenné z živého webu kssbs.sk
 */

:root {
    /* PRIMARY COLORS - z originálu */
    --color1: #525fe1;
    --color1-opacity: rgba(82, 95, 225, .1);

    --color2: #231f40;
    --color2-opacity: rgba(35, 31, 64, .1);

    --color3: #6f6b80;
    --color3-opacity: rgba(111, 107, 128, .1);

    --color4: #f5f5f5;
    --color4-opacity: rgba(245, 245, 245, .4);

    --color5: #fdfdfc;
    --color5-opacity: rgba(253, 252, 252, .4);

    --color6: #f53003;
    --color6-opacity: rgba(245, 47, 3, .1);

    --color7: rgba(255, 240, 228, 1);

    /* Bootstrap-like colors */
    --bs-yellow: #FFA500;
    --bs-yellow-opacity: rgba(255, 165, 0, .1);
    --bs-green: #20C996;
    --bs-green-opacity: rgba(32, 201, 150, .1);
    --bs-blue: #0D6EFD;
    --bs-blue-opacity: rgba(13, 110, 253, .1);
    --bs-red: #EB4D57;
    --bs-red-opacity: rgba(235, 77, 87, .1);
    --bs-white: #FFFFFF;

    /* Farby škôl — rovnaké ako v admine (admin/assets/css/admin.css, --sch-*).
       Základná = výplň a bodky, -ink = text a ikony, -tint = jemné pozadie
       štítkov, -on = text na plnej výplni. Tmavý režim v design-system.css. */
    --color-main-ink: #3640b8;
    --color-main-tint: #e8eafd;
    --color-ms: #f2b600;
    --color-ms-ink: #6b4d00;
    --color-ms-tint: #fff3c4;
    --color-ms-on: #3d2c00;
    --color-zs: #7655e6;
    --color-zs-ink: #4f33bd;
    --color-zs-tint: #eeeafd;
    --color-zs-on: #fff;
    --color-wsos: #f07f00;
    --color-wsos-ink: #8a4300;
    --color-wsos-tint: #ffead2;
    --color-wsos-on: #2e1600;
    --color-jedalen: #1c9a4c;
    --color-jedalen-ink: #17643a;
    --color-jedalen-tint: #ddf4e5;
    --color-jedalen-on: #fff;

    /* Typography */
    --font-header: 'Jost', sans-serif;
    --font-text: 'Inter', sans-serif;

    /* Sizes */
    --size-extrasmall: 5px;
    --size-small: 15px;
    --size-normal: 25px;
    --size-large: 35px;
    --size-extralarge: 50px;

    /* Shadows */
    --shadow-header: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px -12px rgba(16, 24, 40, .14);
    --shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -14px rgba(16, 24, 40, .14);

    /* Transitions */
    --transition: 0.2s ease;

    /* Container */
    --container-max: 1280px;
    --container-padding: 1.5rem;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Typography sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;

    /* Font weights */
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Line heights */
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    /* Border radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px;

    /* Shadows extended */
    /* Tiene ako v iOS: tenký kontaktný tieň + veľký, veľmi riedky rozptyl
       (záporný spread drží tieň pod kartou, nie okolo nej). */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.03);
    --shadow-md: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 20px -8px rgba(16, 24, 40, 0.09);
    --shadow-lg: 0 1px 3px rgba(16, 24, 40, 0.04), 0 12px 32px -14px rgba(16, 24, 40, 0.13);
    --shadow-xl: 0 2px 6px rgba(16, 24, 40, 0.04), 0 22px 48px -18px rgba(16, 24, 40, 0.18);
    --shadow-2xl: 0 4px 10px rgba(16, 24, 40, 0.05), 0 32px 64px -24px rgba(16, 24, 40, 0.24);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-slow: 0.5s ease;

    /* Semantic colors */
    --color-primary: var(--color1);
    --color-primary-light: #6366f1;
    --color-secondary: #20C996;
    --color-secondary-light: #1aa87e;
    --color-white: #ffffff;
    --color-body-bg: var(--color5);
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;

    /* Extended colors */
    --color-red-500: #ef4444;
    --color-green-500: #22c55e;
    --color-blue-500: #3b82f6;

    /* Font aliases */
    --font-heading: var(--font-header);
    --font-body: var(--font-text);
}