/* ═══════════════════════════════════════════════════════════════
   КОМПАНЬОН — Design Tokens v1.0
   Единый источник правды для всех цветов, отступов и радиусов.
   Меняешь здесь → меняется ВЕСЬ интерфейс.
   ═══════════════════════════════════════════════════════════════ */

/* ─── LIGHT THEME (default) ─── */
:root {
    /* === Фоны === */
    --bg-page:        #f8fafc;   /* Фон страницы */
    --bg-surface:     #ffffff;   /* Карточки, панели */
    --bg-surface-alt: #f1f5f9;   /* Альт. поверхность (таблицы thead, hover) */
    --bg-elevated:    #ffffff;   /* Модалки, поповеры */
    --bg-inset:       #e2e8f0;   /* Вдавленные зоны (табы, тоглы) */
    --bg-sidebar:     #ffffff;
    --bg-header:      #ffffff;
    --bg-input:       #ffffff;
    --bg-hover:       #f1f5f9;

    /* === Borders === */
    --border-default: #e2e8f0;
    --border-subtle:  #f1f5f9;
    --border-strong:  #cbd5e1;
    --border-focus:   #14b8a6;

    /* === Text === */
    --text-primary:   #0f172a;
    --text-secondary: #475569;
    --text-tertiary:  #94a3b8;
    --text-inverse:   #ffffff;
    --text-link:      #0d9488;
    --text-heading:   #0f172a;

    /* === Accent (Teal) === */
    --accent:         #14b8a6;
    --accent-hover:   #0d9488;
    --accent-light:   #ccfbf1;
    --accent-dark:    #0f766e;
    --accent-ghost:   rgba(20, 184, 166, 0.08);
    --accent-ring:    rgba(20, 184, 166, 0.25);

    /* === Secondary accent (Purple — для графиков / AI) === */
    --accent2:        #8b5cf6;
    --accent2-hover:  #7c3aed;
    --accent2-light:  #ede9fe;
    --accent2-ghost:  rgba(139, 92, 246, 0.08);

    /* === Status === */
    --success:        #10b981;
    --success-light:  #d1fae5;
    --success-ghost:  rgba(16, 185, 129, 0.08);

    --warning:        #f59e0b;
    --warning-light:  #fef3c7;
    --warning-ghost:  rgba(245, 158, 11, 0.08);

    --danger:         #ef4444;
    --danger-light:   #fee2e2;
    --danger-ghost:   rgba(239, 68, 68, 0.08);

    --info:           #3b82f6;
    --info-light:     #dbeafe;
    --info-ghost:     rgba(59, 130, 246, 0.08);

    /* === Sidebar === */
    --sidebar-link:         #475569;
    --sidebar-link-hover:   #14b8a6;
    --sidebar-link-active:  #0d9488;
    --sidebar-link-active-bg: rgba(20, 184, 166, 0.08);
    --sidebar-section:      #94a3b8;
    --sidebar-badge-bg:     #ef4444;

    /* === Shadows === */
    --shadow-xs:   0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:   0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
    --shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
    --shadow-xl:   0 20px 25px -5px rgba(0,0,0,0.08), 0 10px 10px -5px rgba(0,0,0,0.04);
    --shadow-glow: 0 0 20px rgba(20, 184, 166, 0.15);

    /* === Radii === */
    --radius-sm:  6px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;

    /* === Spacing (reference) === */
    --header-h:    60px;
    --sidebar-w:   240px;
    --sidebar-w-collapsed: 68px;

    /* === Transitions === */
    --transition-fast:   0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow:   0.3s ease;

    /* === Typography === */
    --font-sans:  'Inter', 'Roboto', system-ui, -apple-system, sans-serif;
    --font-mono:  'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
    --text-xs:    0.75rem;   /* 12px */
    --text-sm:    0.875rem;  /* 14px */
    --text-base:  1rem;      /* 16px */
    --text-lg:    1.125rem;  /* 18px */
    --text-xl:    1.25rem;   /* 20px */
    --text-2xl:   1.5rem;    /* 24px */
    --text-3xl:   1.875rem;  /* 30px */

    /* === Z-index scale === */
    --z-dropdown: 10;
    --z-sticky:   20;
    --z-sidebar:  30;
    --z-backdrop: 40;
    --z-modal:    50;
    --z-toast:    60;
    --z-tooltip:  70;
    --z-loader:   99;
}


/* ─── DARK THEME ─── */
html.dark {
    /* === Фоны === */
    --bg-page:        #0f172a;
    --bg-surface:     #1e293b;
    --bg-surface-alt: #334155;
    --bg-elevated:    #1e293b;
    --bg-inset:       #0f172a;
    --bg-sidebar:     #0f172a;
    --bg-header:      #0f172a;
    --bg-input:       #0f172a;
    --bg-hover:       #1e293b;

    /* === Borders === */
    --border-default: #334155;
    --border-subtle:  #1e293b;
    --border-strong:  #475569;
    --border-focus:   #2dd4bf;

    /* === Text === */
    --text-primary:   #f1f5f9;
    --text-secondary: #94a3b8;
    --text-tertiary:  #64748b;
    --text-inverse:   #0f172a;
    --text-link:      #2dd4bf;
    --text-heading:   #f1f5f9;

    /* === Accent (Teal — ярче в тёмной теме) === */
    --accent:         #2dd4bf;
    --accent-hover:   #14b8a6;
    --accent-light:   rgba(45, 212, 191, 0.15);
    --accent-dark:    #5eead4;
    --accent-ghost:   rgba(45, 212, 191, 0.08);
    --accent-ring:    rgba(45, 212, 191, 0.3);

    /* === Secondary (Purple) === */
    --accent2:        #a78bfa;
    --accent2-hover:  #8b5cf6;
    --accent2-light:  rgba(139, 92, 246, 0.15);
    --accent2-ghost:  rgba(139, 92, 246, 0.08);

    /* === Status === */
    --success:        #34d399;
    --success-light:  rgba(52, 211, 153, 0.15);
    --success-ghost:  rgba(52, 211, 153, 0.08);

    --warning:        #fbbf24;
    --warning-light:  rgba(251, 191, 36, 0.15);
    --warning-ghost:  rgba(251, 191, 36, 0.08);

    --danger:         #f87171;
    --danger-light:   rgba(248, 113, 113, 0.15);
    --danger-ghost:   rgba(248, 113, 113, 0.08);

    --info:           #60a5fa;
    --info-light:     rgba(96, 165, 250, 0.15);
    --info-ghost:     rgba(96, 165, 250, 0.08);

    /* === Sidebar === */
    --sidebar-link:         #94a3b8;
    --sidebar-link-hover:   #2dd4bf;
    --sidebar-link-active:  #2dd4bf;
    --sidebar-link-active-bg: rgba(45, 212, 191, 0.1);
    --sidebar-section:      #64748b;

    /* === Shadows (subtle in dark) === */
    --shadow-xs:   0 1px 2px rgba(0,0,0,0.2);
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
    --shadow-md:   0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -1px rgba(0,0,0,0.2);
    --shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.3), 0 4px 6px -2px rgba(0,0,0,0.2);
    --shadow-xl:   0 20px 25px -5px rgba(0,0,0,0.4);
    --shadow-glow: 0 0 30px rgba(45, 212, 191, 0.12);
}