/* Design Tokens - Инженеры Хаоса */

:root {
    /* ========== Background Layers ========== */
    --bg-map: #2a1f3d;
    --bg-panel: #1a1625;
    --bg-elevated: #2d2438;
    --bg-primary: #1a1625;
    --bg-secondary: #2d2438;
    --bg-hover: rgba(124, 92, 219, 0.1);

    /* ========== UI Elements ========== */
    --ui-primary: #7c5cdb;
    --ui-success: #4ade80;
    --ui-danger: #ef4444;
    --ui-warning: #fbbf24;
    --ui-neutral: #94a3b8;
    
    /* ========== Text Colors ========== */
    --text-primary: #ffffff;
    --text-secondary: #94a3b8;
    
    /* ========== Primary Colors ========== */
    --primary-color: #7c5cdb;
    --primary-text: #ffffff;
    
    /* ========== Border Colors ========== */
    --border-color: rgba(148, 163, 184, 0.2);

    /* ========== Entity Types ========== */
    --entity-hero: #3b82f6;
    --entity-base: #a855f7;
    --entity-monster: #dc2626;
    --entity-npc: #10b981;

    /* ========== Gradients ========== */
    --gradient-card: linear-gradient(145deg, #2d2438 0%, #1f1729 100%);
    --gradient-action: linear-gradient(135deg, #7c5cdb 0%, #9b87f5 100%);
    --gradient-panel: linear-gradient(135deg, rgba(20, 20, 30, 0.95) 0%, rgba(30, 30, 45, 0.95) 100%);

    /* ========== Typography ========== */
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 15px;
    --text-lg: 17px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 32px;

    --line-height-tight: 1.4;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;
    
    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-base: 15px;
    --font-size-lg: 17px;
    --font-size-xl: 20px;
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* ========== Spacing ========== */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;

    /* ========== Shadows & Elevation ========== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.6);
    --shadow-sheet: 0 -4px 24px rgba(0, 0, 0, 0.6);

    /* ========== Z-Index Hierarchy ========== */
    --z-canvas: 1;
    --z-ui-bars: 10;
    --z-sidebar: 900;
    --z-toolbar: 950;
    --z-overlays: 100;
    --z-panels: 1000;
    --z-modal: 5000;
    --z-modals: 10000;
    --z-admin-fab: 2000;

    /* ========== Animations ========== */
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;

    --easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
    --easing-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
    --easing-accelerate: cubic-bezier(0.4, 0.0, 1, 1);

    /* ========== Touch Targets ========== */
    --touch-min: 48px;
    --touch-comfortable: 56px;

    /* ========== Responsive Breakpoints (for JS) ========== */
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;
    --breakpoint-desktop: 1920px;

    /* ========== Borders & Radius ========== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ========== Backdrop Blur ========== */
    --blur-light: blur(10px);
    --blur-medium: blur(20px);
    --blur-heavy: blur(40px);

    /* ========== Layout Dimensions ========== */
    --topbar-h: 48px;
    --topbar-h-mobile: 40px;
    --sidebar-w: 340px;
    --sidebar-w-min: 280px;
    --sidebar-w-max: 420px;
    --sidebar-w-collapsed: 64px;
    --player-strip-h: 64px;
    --bottom-nav-h: 64px;
    --chat-w: 340px;
    --chat-w-min: 320px;
    --chat-w-max: 400px;
    --chat-h-max: 40vh;
}