/**
 * CzechRP Web - CSS Proměnné (Design Tokens)
 *
 * Centrální definice barev, fontů, spacingu a ostatních design tokenů.
 * Všechny komponenty a stránky čerpají z těchto proměnných.
 *
 * Barevná paleta: Červená, bílá, tmavě šedá, černá
 * Styl: Dark mode, prémiový, herní, česká identita
 */

:root {
    /* ============================================================
     * BARVY - Hlavní paleta
     * ============================================================ */

    /* Červená - primární akcent (česká vlajka) */
    --color-primary:        #c0392b;
    --color-primary-hover:  #e74c3c;
    --color-primary-dark:   #a93226;
    --color-primary-light:  #e74c3c;
    --color-primary-glow:   rgba(192, 57, 43, 0.3);
    --color-primary-subtle: rgba(192, 57, 43, 0.1);

    /* Pozadí - tmavé odstíny */
    --color-bg-darkest:     #0a0a0b;
    --color-bg-dark:        #0f0f12;
    --color-bg:             #121217;
    --color-bg-light:       #1a1a22;
    --color-bg-lighter:     #22222e;
    --color-bg-card:        #16161e;
    --color-bg-card-hover:  #1c1c28;

    /* Povrchy a border */
    --color-surface:        #1a1a24;
    --color-surface-hover:  #22222e;
    --color-border:         rgba(255, 255, 255, 0.06);
    --color-border-light:   rgba(255, 255, 255, 0.10);
    --color-border-primary: rgba(192, 57, 43, 0.3);

    /* Text */
    --color-text:           #f0f0f5;
    --color-text-secondary: #a0a0b0;
    --color-text-muted:     #6a6a7a;
    --color-text-inverse:   #0a0a0b;

    /* Statusové barvy */
    --color-success:        #27ae60;
    --color-success-bg:     #1a3a2a;
    --color-warning:        #f39c12;
    --color-warning-bg:     #3a2e1a;
    --color-danger:         #e74c3c;
    --color-danger-bg:      #3a1a1a;
    --color-info:           #3498db;
    --color-info-bg:        #1a2a3a;
    --color-neutral:        #6a6a7a;
    --color-neutral-bg:     rgba(106, 106, 122, 0.1);

    /* Discord */
    --color-discord:        #5865F2;
    --color-discord-hover:  #4752c4;

    /* ============================================================
     * TYPOGRAFIE
     * ============================================================ */
    --font-family:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs:         0.75rem;    /* 12px */
    --font-size-sm:         0.875rem;   /* 14px */
    --font-size-base:       1rem;       /* 16px */
    --font-size-md:         1.125rem;   /* 18px */
    --font-size-lg:         1.25rem;    /* 20px */
    --font-size-xl:         1.5rem;     /* 24px */
    --font-size-2xl:        2rem;       /* 32px */
    --font-size-3xl:        2.5rem;     /* 40px */
    --font-size-4xl:        3.25rem;    /* 52px */
    --font-size-5xl:        4rem;       /* 64px */

    --font-weight-light:    300;
    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
    --font-weight-extrabold: 800;
    --font-weight-black:    900;

    --line-height-tight:    1.2;
    --line-height-normal:   1.5;
    --line-height-relaxed:  1.7;

    /* ============================================================
     * SPACING
     * ============================================================ */
    --space-1:  0.25rem;  /* 4px */
    --space-2:  0.5rem;   /* 8px */
    --space-3:  0.75rem;  /* 12px */
    --space-4:  1rem;     /* 16px */
    --space-5:  1.25rem;  /* 20px */
    --space-6:  1.5rem;   /* 24px */
    --space-8:  2rem;     /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */

    /* ============================================================
     * BORDER RADIUS
     * ============================================================ */
    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  16px;
    --radius-xl:  24px;
    --radius-full: 9999px;

    /* ============================================================
     * STÍNY
     * ============================================================ */
    --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg:   0 8px 30px rgba(0, 0, 0, 0.5);
    --shadow-xl:   0 16px 50px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 30px var(--color-primary-glow);

    /* ============================================================
     * TRANSITIONS
     * ============================================================ */
    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow:   400ms ease;

    /* ============================================================
     * GLASS EFEKT
     * ============================================================ */
    --glass-bg:          rgba(22, 22, 30, 0.7);
    --glass-bg-strong:   rgba(22, 22, 30, 0.85);
    --glass-blur:        12px;
    --glass-border:      rgba(255, 255, 255, 0.08);

    /* ============================================================
     * LAYOUT
     * ============================================================ */
    --container-max:     1280px;
    --container-narrow:  900px;
    --navbar-height:     72px;
}