/**
 * Interstellar Ball Manager - CSS Variablen
 * 
 * Zentrale Definition aller Design-Tokens für konsistentes Styling.
 * Diese Variablen werden von allen anderen CSS-Modulen verwendet.
 * 
 * KATEGORIEN:
 * - Farben (Primär, Sekundär, Status, Neutral)
 * - Typografie
 * - Abstände
 * - Schatten
 * - Transitions
 * - Breakpoints
 */

:root {
    /* ========================================================================
       FARBEN - Primär
       ======================================================================== */
    --sbm-color-primary: #6366f1;
    --sbm-color-primary-dark: #4f46e5;
    --sbm-color-primary-light: #818cf8;
    
    /* ========================================================================
       FARBEN - Status
       ======================================================================== */
    --sbm-color-success: #10b981;
    --sbm-color-success-light: #34d399;
    --sbm-color-success-bg: rgba(16, 185, 129, 0.1);
    --sbm-color-success-bg-strong: rgba(16, 185, 129, 0.15);
    --sbm-color-success-border: rgba(16, 185, 129, 0.3);
    --sbm-color-success-border-strong: rgba(16, 185, 129, 0.4);
    
    --sbm-color-warning: #f59e0b;
    --sbm-color-warning-light: #fbbf24;
    --sbm-color-warning-bg: rgba(245, 158, 11, 0.1);
    --sbm-color-warning-border: rgba(245, 158, 11, 0.3);
    --sbm-color-warning-border-strong: rgba(245, 158, 11, 0.4);
    --sbm-color-warning-bg-strong: rgba(245, 158, 11, 0.2);
    
    --sbm-color-error: #ef4444;
    --sbm-color-error-light: #f87171;
    --sbm-color-error-bg: rgba(239, 68, 68, 0.1);
    --sbm-color-error-bg-strong: rgba(239, 68, 68, 0.15);
    --sbm-color-error-border: rgba(239, 68, 68, 0.3);
    --sbm-color-error-border-strong: rgba(239, 68, 68, 0.4);
    
    --sbm-color-info: #3b82f6;
    --sbm-color-info-light: #60a5fa;
    --sbm-color-info-bg: rgba(59, 130, 246, 0.1);
    --sbm-color-info-border: rgba(59, 130, 246, 0.3);
    --sbm-color-info-border-strong: rgba(59, 130, 246, 0.4);
    /* Cyan-Variante (z. B. für Info-Alerts) */
    --sbm-color-info-cyan-bg: rgba(6, 182, 212, 0.1);
    --sbm-color-info-cyan-border: rgba(6, 182, 212, 0.3);
    --sbm-color-info-cyan-light: #67e8f9;
    --sbm-color-info-bg-strong: rgba(59, 130, 246, 0.2);
    --sbm-color-success-bg-tag: rgba(16, 185, 129, 0.2);
    --sbm-color-error-bg-tag: rgba(239, 68, 68, 0.2);
    --sbm-color-warning-bg-tag: rgba(245, 158, 11, 0.2);
    --sbm-color-neutral-bg: rgba(107, 114, 128, 0.2);
    --sbm-color-neutral-border: rgba(107, 114, 128, 0.4);
    --sbm-color-neutral-text: #9ca3af;
    
    /* ========================================================================
       FARBEN - Neutral (Hintergrund & Text)
       ======================================================================== */
    --sbm-color-bg-dark: #0f0f23;
    --sbm-color-bg: #1a1a2e;
    --sbm-color-bg-light: #252542;
    --sbm-color-bg-lighter: #2d2d4a;
    
    --sbm-color-surface: #16213e;
    --sbm-color-surface-hover: #1f2f5a;
    
    --sbm-color-border: #3d3d5c;
    --sbm-color-border-light: #4a4a6a;
    
    --sbm-color-text: #e0e0e0;
    --sbm-color-text-muted: #9ca3af;
    --sbm-color-text-dim: #6b7280;
    
    /* ========================================================================
       FARBEN - Rollen/Positionen
       ======================================================================== */
    --sbm-color-role-tw: #f472b6;   /* Torwart - Pink */
    --sbm-color-role-abw: #60a5fa;  /* Abwehr - Blau */
    --sbm-color-role-mf: #34d399;   /* Mittelfeld - Grün */
    --sbm-color-role-st: #fbbf24;   /* Sturm - Gelb */
    
    /* ========================================================================
       FARBEN - Skills (Palette aus Player-Bildern / Vorschlag farben.html)
       ======================================================================== */
    --sbm-color-skill-aggression: #FF3366;
    --sbm-color-skill-attack: #FF6600;
    --sbm-color-skill-defence: #00CCFF;
    --sbm-color-skill-speed: #00FF88;
    --sbm-color-skill-throwing: #9C19E0;
    --sbm-color-skill-power: #FF0080;
    --sbm-color-skill-stamina: #00B3A1;
    --sbm-color-skill-intelligence: #00DDFF;
    --sbm-color-skill-fitness: #10b981;

    /* ========================================================================
       FARBEN - Text auf farbigen Flächen / Overlays
       ======================================================================== */
    --sbm-color-text-on-primary: #ffffff;
    --sbm-color-text-on-dark: #f8fafc;

    /* ========================================================================
       FARBEN - Primär/Rollen mit Alpha (Hintergründe, Glow – eine Stelle)
       ======================================================================== */
    --sbm-color-primary-bg: rgba(99, 102, 241, 0.1);
    --sbm-color-primary-glow: rgba(99, 102, 241, 0.3);
    --sbm-color-role-tw-bg: rgba(244, 114, 182, 0.2);
    --sbm-color-role-abw-bg: rgba(96, 165, 250, 0.2);
    --sbm-color-role-mf-bg: rgba(52, 211, 153, 0.2);
    --sbm-color-role-st-bg: rgba(251, 191, 36, 0.2);
    /* Deckende Rollen-Hintergründe für Skill-Karten (kein Durchscheinen an Kachelstößen) */
    --sbm-color-role-tw-bg-solid: #462c49;
    --sbm-color-role-abw-bg-solid: #283657;
    --sbm-color-role-mf-bg-solid: #1f3f43;
    --sbm-color-role-st-bg-solid: #473b2c;
    --sbm-color-role-tw-glow: rgba(244, 114, 182, 0.4);
    --sbm-color-role-abw-glow: rgba(96, 165, 250, 0.4);
    --sbm-color-role-mf-glow: rgba(52, 211, 153, 0.4);
    --sbm-color-role-st-glow: rgba(251, 191, 36, 0.4);
    --sbm-color-overlay-backdrop: rgba(0, 0, 0, 0.5);
    /* Leichte Hintergrund-Töne (z. B. Karten-Kontext) */
    --sbm-color-bg-info-tint: #eff6ff;
    --sbm-color-bg-success-tint: #dcfce7;
    --sbm-color-bg-error-tint: #fee2e2;
    --sbm-color-bg-warning-tint: #fef3c7;
    --sbm-color-bg-info-tint-strong: #dbeafe;
    --sbm-color-text-info-strong: #1e40af;
    --sbm-color-text-success-strong: #166534;
    --sbm-color-surface-overlay: rgba(255, 255, 255, 0.15);

    /* ========================================================================
       Aliase für styles.css / bestehende Nutzung (nur Referenz, keine Doppelpflege)
       ======================================================================== */
    --sbm-primary: var(--sbm-color-primary);
    --sbm-primary-dark: var(--sbm-color-primary-dark);
    --sbm-primary-light: var(--sbm-color-primary-light);
    --sbm-secondary: #8b5cf6;
    --sbm-success: var(--sbm-color-success);
    --sbm-warning: var(--sbm-color-warning);
    --sbm-danger: var(--sbm-color-error);
    --sbm-info: #06b6d4;
    --sbm-accent: #ec4899;
    --sbm-bg-primary: var(--sbm-color-bg-dark);
    --sbm-bg-secondary: var(--sbm-color-bg);
    --sbm-bg-card: #16162a;
    --sbm-bg-elevated: var(--sbm-color-surface);
    --sbm-bg-hover: var(--sbm-color-surface-hover);
    --sbm-text-primary: #e2e8f0;
    --sbm-text-secondary: var(--sbm-color-text-muted);
    --sbm-text-muted: #64748b;
    --sbm-text-bright: var(--sbm-color-text-on-dark);
    --sbm-border: #2d2d4a;
    --sbm-border-light: var(--sbm-color-border-light);
    --sbm-border-glow: var(--sbm-color-primary-glow);
    --sbm-tooltip-bg: #1e1e3a;
    --sbm-tooltip-text: var(--sbm-color-text-on-dark);
    --sbm-tooltip-border: var(--sbm-color-primary-dark);
    --sbm-shadow-tooltip: 0 0 12px rgba(99, 102, 241, 0.2);

    /* ========================================================================
       TYPOGRAFIE
       ======================================================================== */
    --sbm-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --sbm-font-family-mono: 'Syne Mono', monospace;
    
    --sbm-font-size-2xs: 0.75rem;   /* 12px – Minimum (Lesbarkeit) */
    --sbm-font-size-xs: 0.75rem;   /* 12px */
    --sbm-font-size-sm: 0.875rem;   /* 14px */
    --sbm-font-size-base: 1rem;     /* 16px */
    --sbm-font-size-lg: 1.125rem;   /* 18px */
    --sbm-font-size-xl: 1.25rem;    /* 20px */
    --sbm-font-size-2xl: 1.5rem;    /* 24px */
    --sbm-font-size-3xl: 1.875rem;  /* 30px */
    --sbm-font-size-4xl: 2rem;      /* 32px */
    --sbm-font-size-5xl: 2.5rem;    /* 40px */
    --sbm-font-size-6xl: 3rem;      /* 48px */
    --sbm-font-size-icon: 4rem;     /* 64px - für große Icons */
    
    --sbm-font-weight-normal: 400;
    --sbm-font-weight-medium: 500;
    --sbm-font-weight-semibold: 600;
    --sbm-font-weight-bold: 700;
    
    --sbm-line-height-tight: 1.25;
    --sbm-line-height-normal: 1.5;
    --sbm-line-height-relaxed: 1.75;
    
    /* ========================================================================
       ABSTÄNDE (Spacing)
       ======================================================================== */
    --sbm-space-0: 0.125rem;  /* 2px – Micro-Spacing (z. B. Trend-Gap) */
    --sbm-space-1: 0.25rem;   /* 4px */
    --sbm-space-2: 0.5rem;    /* 8px */
    --sbm-space-3: 0.75rem;   /* 12px */
    --sbm-space-4: 1rem;      /* 16px */
    --sbm-space-5: 1.25rem;   /* 20px */
    --sbm-space-6: 1.5rem;    /* 24px */
    --sbm-space-8: 2rem;      /* 32px */
    --sbm-space-10: 2.5rem;   /* 40px */
    --sbm-space-12: 3rem;     /* 48px */
    
    /* ========================================================================
       BORDER RADIUS
       ======================================================================== */
    --sbm-radius-sm: 0.25rem;   /* 4px */
    --sbm-radius-md: 0.375rem;  /* 6px */
    --sbm-radius-lg: 0.5rem;    /* 8px */
    --sbm-radius-xl: 0.75rem;   /* 12px */
    --sbm-radius-2xl: 1rem;     /* 16px */
    --sbm-radius-full: 9999px;
    
    /* ========================================================================
       SCHATTEN
       ======================================================================== */
    --sbm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
    --sbm-shadow: 0 2px 8px 0 rgb(0 0 0 / 0.4);
    --sbm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --sbm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -2px rgba(0, 0, 0, 0.25);
    --sbm-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    
    --sbm-shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);
    --sbm-shadow-glow-success: 0 0 20px rgba(16, 185, 129, 0.3);
    --sbm-shadow-glow-error: 0 0 20px rgba(239, 68, 68, 0.3);
    --sbm-shadow-glow-primary: 0 0 20px rgba(99, 102, 241, 0.15);
    --sbm-shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.4);
    
    /* ========================================================================
       TRANSITIONS
       ======================================================================== */
    --sbm-transition-fast: 150ms ease;
    --sbm-transition-normal: 250ms ease;
    --sbm-transition-slow: 350ms ease;
    
    /* ========================================================================
       Z-INDEX
       ======================================================================== */
    --sbm-z-dropdown: 100;
    --sbm-z-sticky: 200;
    --sbm-z-modal-backdrop: 900;
    --sbm-z-modal: 1000;
    --sbm-z-tooltip: 1200;
}