/* =============================================================
   AICV.cz — Design Tokens
   Světlý design inspirovaný bachurek_cz.
   Hero a CTA bannery jsou tmavě modré (gradient), zbytek stránky
   je světlý (bílá + velmi světle šedá). Akcent: modrá + fialová.
   Verze: 2.0 | 2026-04-16
   ============================================================= */

:root {
    /* ---------- BARVY — ZÁKLADNÍ PALETA ---------- */

    /* Pozadí — světlé */
    --color-bg-base:        #f8fafc; /* pozadí stránky (body) */
    --color-bg-elevated:    #ffffff; /* karty, sekce — bílá */
    --color-bg-subtle:      #f1f5f9; /* mírně šedé sekce (zebra) */
    --color-bg-surface:     #ffffff; /* povrchy formulářů, inputů */
    --color-bg-overlay:     rgba(15, 23, 42, 0.55); /* modální pozadí */

    /* Text */
    --color-text-primary:   #0f172a; /* hlavní text */
    --color-text-secondary: rgba(15, 23, 42, 0.72);
    --color-text-muted:     rgba(15, 23, 42, 0.55);
    --color-text-disabled:  rgba(15, 23, 42, 0.32);
    --color-text-inverse:   #f8fafc; /* text na tmavém pozadí */

    /* Primární paleta — modrá (bachurek styl) */
    --color-primary:        #2563eb;
    --color-primary-hover:  #1d4ed8;
    --color-primary-light:  #dbeafe;
    --color-primary-dark:   #1e3a5f;

    /* Akcentní paleta — fialovo-modrá (jen jako akcent) */
    --color-accent-500:     #6366f1;
    --color-accent-400:     #818cf8;
    --color-accent-600:     #4f46e5;
    --color-accent-700:     #4338ca;
    --color-violet-400:     #a78bfa;
    --color-violet-500:     #8b5cf6;
    --color-violet-600:     #7c3aed;
    --color-blue-400:       #60a5fa;
    --color-blue-500:       #3b82f6;

    /* Sémantické */
    --color-success:        #22c55e;
    --color-success-bg:     rgba(34, 197, 94, 0.12);
    --color-warning:        #f59e0b;
    --color-warning-bg:     rgba(245, 158, 11, 0.12);
    --color-danger:         #ef4444;
    --color-danger-bg:      rgba(239, 68, 68, 0.12);
    --color-info:           #0284c7;
    --color-info-bg:        rgba(2, 132, 199, 0.1);

    /* Okraje a dělící linie — na světlém pozadí */
    --color-border-subtle:  #e5e7eb;
    --color-border-muted:   #d1d5db;
    --color-border-strong:  #9ca3af;
    --color-border-accent:  rgba(37, 99, 235, 0.35);

    /* ---------- GRADIENTY ---------- */
    --gradient-primary:     linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    --gradient-primary-hover: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    --gradient-accent:      linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
    --gradient-text:        linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    --gradient-hero:        linear-gradient(135deg, #0f172a 0%, #1e3a5f 55%, #1d4ed8 100%);
    --gradient-banner:      linear-gradient(135deg, #1e3a5f 0%, #1e40af 50%, #1d4ed8 100%);
    --gradient-glow:        radial-gradient(ellipse at top, rgba(37, 99, 235, 0.12), transparent 60%);
    --gradient-card:        linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    --gradient-divider:     linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.35), transparent);

    /* ---------- GLASSMORPHISM (pouze pro navbar / decentní efekty) ---------- */
    --glass-bg:             rgba(255, 255, 255, 0.75);
    --glass-bg-hover:       rgba(255, 255, 255, 0.9);
    --glass-bg-strong:      rgba(255, 255, 255, 0.95);
    --glass-border:         1px solid rgba(15, 23, 42, 0.08);
    --glass-border-hover:   1px solid rgba(15, 23, 42, 0.14);
    --glass-blur-sm:        blur(8px);
    --glass-blur-md:        blur(12px);
    --glass-blur-lg:        blur(16px);
    --glass-blur-xl:        blur(24px);
    --glass-saturate:       saturate(180%);

    /* ---------- STÍNY — na světlém pozadí ---------- */
    --shadow-xs:    0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm:    0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md:    0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg:    0 12px 32px rgba(15, 23, 42, 0.1);
    --shadow-xl:    0 24px 64px rgba(15, 23, 42, 0.14);
    --shadow-glow-primary:  0 16px 40px rgba(37, 99, 235, 0.22);
    --shadow-glow-accent:   0 8px 24px rgba(79, 70, 229, 0.28);
    --shadow-inset:         inset 0 1px 0 rgba(255, 255, 255, 0.8);

    /* ---------- TYPOGRAFIE ---------- */
    --font-family-heading:  'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-mono:     'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;

    /* Velikosti — fluid typography */
    --font-size-xs:     0.75rem;   /* 12px */
    --font-size-sm:     0.875rem;  /* 14px */
    --font-size-base:   1rem;      /* 16px */
    --font-size-md:     1.0625rem; /* 17px */
    --font-size-lg:     1.125rem;  /* 18px */
    --font-size-xl:     1.25rem;   /* 20px */
    --font-size-2xl:    1.5rem;    /* 24px */
    --font-size-3xl:    1.75rem;   /* 28px */
    --font-size-4xl:    clamp(1.625rem, 2.8vw, 2.125rem);  /* ~26-34px (bylo 32-45px) */
    --font-size-5xl:    clamp(2rem, 3.5vw, 2.625rem);      /* ~32-42px (bylo 40-56px) */
    --font-size-hero:   clamp(1.875rem, 3.5vw, 2.75rem);   /* ~30-44px (bylo 35-58px) */

    /* Váhy */
    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
    --font-weight-extrabold: 800;

    /* Line-height */
    --line-height-tight:    1.15;
    --line-height-snug:     1.35;
    --line-height-normal:   1.5;
    --line-height-relaxed:  1.7;

    /* Letter-spacing */
    --tracking-tight:       -0.02em;
    --tracking-normal:      0;
    --tracking-wide:        0.04em;
    --tracking-wider:       0.08em;

    /* ---------- SPACING ---------- */
    --space-0:      0;
    --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;
    --space-32:     8rem;

    /* Container padding */
    --container-padding-x:  1.5rem;
    --container-max-width:  1320px; /* odpovídá Bootstrap xl .container (1320px) pro vzdušnější rozložení */

    /* ---------- BORDER RADIUS ---------- */
    --radius-xs:    4px;
    --radius-sm:    8px;
    --radius-md:    12px;
    --radius-lg:    16px;
    --radius-xl:    20px;
    --radius-2xl:   24px;
    --radius-3xl:   32px;
    --radius-full:  9999px;

    /* ---------- TRANSITIONS ---------- */
    --transition-fast:      150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base:      250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:      400ms cubic-bezier(0.22, 0.68, 0, 1.3);
    --transition-spring:    500ms cubic-bezier(0.22, 1, 0.36, 1);

    --ease-in-out:          cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce:          cubic-bezier(0.22, 0.68, 0, 1.3);

    /* ---------- Z-INDEX ---------- */
    --z-base:       1;
    --z-dropdown:   50;
    --z-sticky:     100;
    --z-navbar:     200;
    --z-overlay:    500;
    --z-modal:      1000;
    --z-toast:      1500;
    --z-tooltip:    2000;

    /* ---------- BREAKPOINTY (pro referenci) ---------- */
    --bp-mobile:    360px;
    --bp-tablet:    768px;
    --bp-desktop:   1024px;
    --bp-wide:      1440px;

    /* ---------- WIZARD / PROGRESS ---------- */
    --progress-track:    #e5e7eb;
    --progress-fill:     var(--gradient-primary);

    /* ---------- FOCUS STATE ---------- */
    --focus-ring:        0 0 0 3px rgba(37, 99, 235, 0.18);
    --focus-ring-error:  0 0 0 3px rgba(239, 68, 68, 0.22);

    /* ---------- NAV ---------- */
    --nav-height:        56px;
}

/* ============================================================
   Dark mode — nejdříve jen pro user dashboard / interní sekce
   Pro homepage a landing stránky zůstává světlé téma.
   ============================================================ */
[data-theme="dark"] {
    --color-bg-base:        #0f172a;
    --color-bg-elevated:    #111827;
    --color-bg-subtle:      #1e293b;
    --color-bg-surface:     #1e293b;
    --color-text-primary:   #f8fafc;
    --color-text-secondary: rgba(248, 250, 252, 0.72);
    --color-text-muted:     rgba(248, 250, 252, 0.55);
    --color-border-subtle:  rgba(255, 255, 255, 0.08);
    --color-border-muted:   rgba(255, 255, 255, 0.14);
    --glass-bg:             rgba(15, 23, 42, 0.75);
    --glass-border:         1px solid rgba(255, 255, 255, 0.08);
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast:  0ms;
        --transition-base:  0ms;
        --transition-slow:  0ms;
        --transition-spring: 0ms;
    }
}