/* ====================================
   01-TOKENS.CSS - Design Tokens
   ==================================== */

/*
 * Central design tokens layer - CSS Custom Properties only
 * This file should be loaded before all other stylesheets
 * Contains the single source of truth for design system variables
 */

:root {
    /* v2 semantic color variables for dark theme */
    --paper: #0a0a0a;
    --ink: #f1f5f9;
    --feather: #1e293b;
    --inkblue: #60a5fa;
    --teal: #22d3ee;
    --muted: #94a3b8;
    --success: #22c55e;
    --warning: #fbbf24;
    --error: #f87171;

    /* Single source of truth: --accent-main, --accent-support, --accent-alt, --accent-contrast */
    --accent-main: #a855f7;
    --accent-support: #a78bfa;
    --accent-alt: #22d3ee;
    --accent-contrast: #f1f5f9;

    --accent: var(--accent-main);

    /* Legacy compatibility variables */
    --bg-primary: var(--paper);
    --bg-secondary: var(--feather);
    --bg-tertiary: #2a2a2d;
    --bg-quaternary: #404046;

    --text-primary: var(--ink);
    --text-secondary: #cbd5e1;
    --text-tertiary: var(--muted);

    --border-primary: var(--feather);
    --border-secondary: #404046;
    --border-accent: var(--accent);

    --accent-primary: var(--accent-main);
    --accent-secondary: var(--accent-support);
    --accent-tertiary: var(--accent-alt);

    --danger: var(--error);
    --danger-hover: #dc2626;

    --shadow-light: var(--shadow-1);
    --shadow-medium: var(--shadow-3);
    --shadow-heavy: var(--shadow-4);

    --scrollbar-track: #1a1a1a;
    --scrollbar-thumb: #3f3f46;
    --scrollbar-thumb-hover: #52525b;

    /* Enhanced glass morphism effects для темной темы */
    --glass-bg: rgba(30, 41, 59, 0.4);
    --glass-border: rgba(148, 163, 184, 0.2);
    --blur: blur(20px);

    /* Enhanced spacing and dimensions */
    --radius-xs: 4px;
    --radius-s: 8px;
    --radius-m: 12px;
    --radius-l: 16px;
    --radius-xl: 24px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Single source of truth: --shadow-1..5; остальные имена — алиасы, @deprecated для нового кода */
    --shadow-1: 0 1px 2px rgba(0,0,0,.2);
    --shadow-2: 0 1px 3px rgba(0,0,0,.3);
    --shadow-3: 0 4px 6px -1px rgba(0,0,0,.4), 0 2px 4px -1px rgba(0,0,0,.2);
    --shadow-4: 0 10px 15px -3px rgba(0,0,0,.5), 0 4px 6px -2px rgba(0,0,0,.3);
    --shadow-5: 0 20px 25px -5px rgba(0,0,0,.6), 0 10px 10px -5px rgba(0,0,0,.2);

    /* Enhanced shadows для темной темы */
    --shadow-xs: var(--shadow-1);
    --shadow-s: var(--shadow-2);
    --shadow-m: var(--shadow-3);
    --shadow-l: var(--shadow-4);
    --shadow-xl: var(--shadow-5);

    /* Enhanced Layout Variables - v2 compatibility */
    --sidebar-w: 320px;
    --max-chat: 900px;
    --content-max-w: 1200px;
    --content-pad-x: 24px;
    
    /* Font variables */
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* Leaderboard specific gradients */
    --leaderboard-bg-gradient: linear-gradient(135deg, #0c0c0f 0%, #1a1a2e 25%, #16213e 50%, #0f1419 75%, #0a0a0a 100%);

    /* Leaderboard particles */
    --particle-1: rgba(255, 255, 255, 0.05);
    --particle-2: rgba(139, 92, 246, 0.08);
    --particle-3: rgba(16, 185, 129, 0.06);
    --particle-4: rgba(245, 158, 11, 0.06);

    /* Header styles */


    /* Rating icons and tooltips */
    --rating-icon-outline: rgba(228, 228, 231, 0.14);
    --tooltip-bg: rgba(26, 26, 26, 0.95);
    --tooltip-color: #e4e4e7;
    --tooltip-border: rgba(139, 92, 246, 0.2);
    --tooltip-arrow: rgba(26, 26, 26, 0.95);

    /* Property icons */
    --property-icon-outline-opacity: rgba(228, 228, 231, 0.1);
    --property-overlay-bg: rgba(0, 0, 0, 0.85);
    --property-overlay-text: #e4e4e7;
    --property-focus-outline: rgba(139, 92, 246, 0.5);

    /* Model page specific */
    --action-btn-secondary-bg: rgba(26, 26, 26, 0.8);
    --action-btn-secondary-border: rgba(139, 92, 246, 0.3);
    --action-btn-secondary-hover-bg: rgba(139, 92, 246, 0.1);
    --action-btn-secondary-hover-border: rgba(139, 92, 246, 0.5);
    --category-badge-bg: rgba(26, 26, 26, 0.6);
    --category-badge-border: rgba(63, 63, 70, 0.4);
    --category-badge-hover-bg: rgba(139, 92, 246, 0.1);
    --category-badge-hover-border: rgba(139, 92, 246, 0.3);
    --description-bg: rgba(17, 17, 17, 0.4);
    --description-border: rgba(63, 63, 70, 0.3);
    --description-hover-bg: rgba(17, 17, 17, 0.6);
    --description-hover-border: rgba(139, 92, 246, 0.4);
    --description-fade: linear-gradient(transparent, rgba(17, 17, 17, 0.9));

    --property-score-border: rgba(139, 92, 246, 0.2);
    --code-container-bg: rgba(17, 17, 17, 0.8);
    --code-container-border: rgba(63, 63, 70, 0.4);
    --code-header-bg: rgba(39, 39, 42, 0.6);
    --code-header-border: rgba(63, 63, 70, 0.3);
    --code-text-color: #e4e4e7;
    --syntax-string: #10b981;
    --syntax-number: #f59e0b;
    --syntax-boolean: #ef4444;
    --syntax-keyword: #8b5cf6;
    --syntax-comment: #6b7280;

    /* Logo paths for theme switching */
    --logo-main: url('/static/assets/images/logo/dark/main.png');

    /* Landing page specific variables */
    --landing-header-bg: rgba(20, 20, 20, 0.9);
    --landing-header-bg-scrolled: rgba(20, 20, 20, 0.95);
    --landing-model-card-bg: rgba(30, 30, 30, 0.95);
    --landing-model-card-active-bg: rgba(139, 92, 246, 0.15);
    --landing-btn-secondary-bg: rgba(42, 42, 45, 0.9);
    --landing-btn-secondary-hover-bg: rgba(64, 64, 70, 0.9);
    --landing-hero-bg-gradient: radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.12) 0%, transparent 60%), radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.08) 0%, transparent 55%), linear-gradient(180deg, #0a0a0a 0%, #0d0d0d 50%, #111111 80%, rgba(20, 20, 20, 0.95) 100%);
    --landing-hero-after-gradient: linear-gradient(180deg, transparent 0%, rgba(20, 20, 20, 0.4) 40%, rgba(18, 18, 18, 0.8) 65%, rgba(16, 16, 16, 1.0) 100%);
    --landing-features-bg-gradient: radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.08) 0%, transparent 60%), radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.06) 0%, transparent 55%), linear-gradient(180deg, #0a0a0a 0%, #0d0d0d 40%, #111111 70%, rgba(20, 20, 20, 0.95) 100%);
    --landing-features-before-gradient: linear-gradient(0deg, transparent 0%, rgba(16, 16, 16, 1.0) 100%, rgba(18, 18, 18, 0.8) 65%, rgba(20, 20, 20, 0.4) 40%);
    --landing-features-after-gradient: linear-gradient(180deg, transparent 0%, rgba(20, 20, 20, 0.4) 40%, rgba(16, 16, 16, 0.8) 65%, rgba(12, 12, 12, 1.0) 100%);
    --landing-code-demo-bg: rgba(20, 20, 20, 0.9);
    --landing-cta-bg: linear-gradient(135deg, rgba(102, 126, 234, 0.06), rgba(118, 75, 162, 0.06));

    /* Dashboard specific variables */
    --dashboard-card-bg: rgba(25, 25, 25, 0.95);
    --dashboard-card-border: rgba(63, 63, 70, 0.4);
    --dashboard-card-hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    --dashboard-stat-card-bg: rgba(30, 30, 30, 0.9);
    --dashboard-stat-card-hover-shadow: 0 12px 24px rgba(139, 92, 246, 0.2);
    --dashboard-gradient-border: radial-gradient(circle, #6874ee, #8b5cf6);
}

/* Enhanced Light theme colors - v2 compatibility */
[data-theme="light"] {
    /* v2 semantic color variables */
    --paper: #FAF8F2;
    --ink: #101112;
    --feather: #EDEAE2;
    --inkblue: #243B5A;
    --teal: #3AAFA9;
    --muted: #70757D;
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;

    /* Single source of truth: --accent-main, --accent-support, --accent-alt, --accent-contrast */
    --accent-main: #8b5cf6;
    --accent-support: #7c3aed;
    --accent-alt: #3AAFA9;
    --accent-contrast: #101112;

    --accent: var(--accent-main);

    /* Legacy compatibility variables */
    --bg-primary: var(--paper);
    --bg-secondary: var(--feather);
    --bg-tertiary: #f1f5f9;
    --bg-quaternary: #e2e8f0;

    --text-primary: var(--ink);
    --text-secondary: #475569;
    --text-tertiary: var(--muted);

    --border-primary: var(--feather);
    --border-secondary: #cbd5e1;
    --border-accent: var(--accent);

    --accent-primary: var(--accent-main);
    --accent-secondary: var(--accent-support);
    --accent-tertiary: var(--accent-alt);

    /* Enhanced semantic colors */
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --danger-hover: #dc2626;

    /* Enhanced shadows with warmer tones */
    --shadow-light: var(--shadow-1);
    --shadow-medium: var(--shadow-3);
    --shadow-heavy: var(--shadow-4);

    /* Glass morphism effects */
    --glass-bg: rgba(255, 255, 255, 0.25);
    --glass-border: rgba(255, 255, 255, 0.18);
    --blur: blur(16px);

    /* Enhanced spacing and dimensions */
    --radius-xs: 4px;
    --radius-s: 8px;
    --radius-m: 12px;
    --radius-l: 16px;
    --radius-xl: 24px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Single source of truth: --shadow-1..5; остальные имена — алиасы, @deprecated для нового кода */
    --shadow-1: 0 1px 2px rgba(16,17,18,.04);
    --shadow-2: 0 1px 3px rgba(16,17,18,.06);
    --shadow-3: 0 4px 6px -1px rgba(16,17,18,.08), 0 2px 4px -1px rgba(16,17,18,.06);
    --shadow-4: 0 10px 15px -3px rgba(16,17,18,.1), 0 4px 6px -2px rgba(16,17,18,.05);
    --shadow-5: 0 20px 25px -5px rgba(16,17,18,.1), 0 10px 10px -5px rgba(16,17,18,.04);

    /* Enhanced shadows */
    --shadow-xs: var(--shadow-1);
    --shadow-s: var(--shadow-2);
    --shadow-m: var(--shadow-3);
    --shadow-l: var(--shadow-4);
    --shadow-xl: var(--shadow-5);

    --scrollbar-track: #EDEAE2;
    --scrollbar-thumb: rgba(139, 92, 246, 0.3);
    --scrollbar-thumb-hover: rgba(139, 92, 246, 0.5);

    /* Enhanced leaderboard gradients */
    --leaderboard-bg-gradient: radial-gradient(1200px 600px at 60% -20%, rgba(139, 92, 246, 0.08), transparent 60%), radial-gradient(800px 400px at 20% 120%, rgba(58, 175, 169, 0.06), transparent 50%), var(--bg-primary);

    /* Leaderboard particles */
    --particle-1: rgba(100, 116, 139, 0.15);
    --particle-2: rgba(139, 92, 246, 0.2);
    --particle-3: rgba(16, 185, 129, 0.2);
    --particle-4: rgba(245, 158, 11, 0.2);

    /* Enhanced header styles */


    /* Enhanced rating icons and tooltips */
    --rating-icon-outline: var(--border-primary);
    --tooltip-bg: var(--glass-bg);
    --tooltip-color: var(--text-primary);
    --tooltip-border: var(--glass-border);
    --tooltip-arrow: var(--glass-bg);

    /* Enhanced property icons */
    --property-icon-outline-opacity: var(--border-primary);
    --property-overlay-bg: rgba(255, 255, 255, 0.95);
    --property-overlay-text: var(--text-primary);
    --property-focus-outline: rgba(139, 92, 246, 0.5);

    /* Enhanced model page specific styles */
    --action-btn-secondary-bg: var(--glass-bg);
    --action-btn-secondary-border: var(--glass-border);
    --action-btn-secondary-hover-bg: rgba(255, 255, 255, 0.4);
    --action-btn-secondary-hover-border: rgba(139, 92, 246, 0.4);
    --category-badge-bg: var(--glass-bg);
    --category-badge-border: var(--glass-border);
    --category-badge-hover-bg: rgba(139, 92, 246, 0.1);
    --category-badge-hover-border: rgba(139, 92, 246, 0.3);
    --description-bg: var(--glass-bg);
    --description-border: var(--glass-border);
    --description-hover-bg: rgba(255, 255, 255, 0.4);
    --description-hover-border: rgba(139, 92, 246, 0.4);
    --description-fade: linear-gradient(transparent, var(--bg-primary));

    --property-score-border: rgba(139, 92, 246, 0.2);
    --code-container-bg: var(--glass-bg);
    --code-container-border: var(--glass-border);
    --code-header-bg: rgba(255, 255, 255, 0.3);
    --code-header-border: var(--glass-border);
    --code-text-color: var(--text-primary);
    --syntax-string: var(--success);
    --syntax-number: var(--warning);
    --syntax-boolean: var(--danger);
    --syntax-keyword: var(--accent-primary);
    --syntax-comment: var(--text-tertiary);

    /* Logo paths for light theme */
    --logo-main: url('/static/assets/images/logo/lite/main.png');

    /* Enhanced landing page variables for light theme */
    --landing-header-bg: rgba(250, 248, 242, 0.8);
    --landing-header-bg-scrolled: rgba(250, 248, 242, 0.95);
    --landing-model-card-bg: var(--glass-bg);
    --landing-model-card-active-bg: rgba(139, 92, 246, 0.15);
    --landing-btn-secondary-bg: var(--glass-bg);
    --landing-btn-secondary-hover-bg: rgba(255, 255, 255, 0.4);
    --landing-hero-bg-gradient: radial-gradient(1200px 600px at 60% -20%, rgba(139, 92, 246, 0.08), transparent 60%), radial-gradient(800px 400px at 20% 120%, rgba(58, 175, 169, 0.06), transparent 50%), var(--bg-primary);
    --landing-hero-after-gradient: linear-gradient(180deg, transparent 0%, rgba(237, 234, 226, 0.4) 40%, rgba(237, 234, 226, 0.8) 65%, rgba(237, 234, 226, 1.0) 100%);
    --landing-features-bg-gradient: radial-gradient(1200px 600px at 60% -20%, rgba(139, 92, 246, 0.08), transparent 60%), radial-gradient(800px 400px at 20% 120%, rgba(58, 175, 169, 0.06), transparent 50%), var(--bg-primary);
    --landing-features-before-gradient: linear-gradient(0deg, transparent 0%, rgba(237, 234, 226, 1.0) 100%, rgba(237, 234, 226, 0.8) 65%, rgba(237, 234, 226, 0.4) 40%);
    --landing-features-after-gradient: linear-gradient(180deg, transparent 0%, rgba(237, 234, 226, 0.4) 40%, rgba(237, 234, 226, 0.8) 65%, rgba(237, 234, 226, 1.0) 100%);
    --landing-code-demo-bg: rgba(237, 234, 226, 0.9);
    --landing-cta-bg: linear-gradient(135deg, rgba(58, 175, 169, 0.08), rgba(139, 92, 246, 0.06));

    /* Enhanced dashboard specific variables for light theme */
    --dashboard-card-bg: var(--glass-bg);
    --dashboard-card-border: var(--glass-border);
    --dashboard-card-hover-shadow: 0 20px 40px rgba(16, 17, 18, 0.12);
    --dashboard-stat-card-bg: var(--glass-bg);
    --dashboard-stat-card-hover-shadow: 0 12px 24px rgba(139, 92, 246, 0.15);
    --dashboard-gradient-border: radial-gradient(circle, #6874ee, #8b5cf6);
}