/* ============================================================
   public/css/theme.css — Темы оформления
   
   Темы: 
     - autumn (осень) — сине-золотая (по умолчанию)
     - night (ночь)  — темно-серая с золотом
     - light (день)  — светлая, теплая
   ============================================================ */

/* ============================================================
   ОБЩИЕ ПЕРЕМЕННЫЕ (не зависят от темы)
   ============================================================ */

:root {
    /* ===== РАЗМЕРЫ ===== */
    --header-height: 56px;
    --sidebar-width: 220px;
    --sidebar-collapsed-width: 56px;
    --footer-height: 36px;

    /* ===== ОТСТУПЫ ===== */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 20px;
    --space-xl: 24px;
    --space-2xl: 32px;

    /* ===== РАДИУСЫ (строгий стиль = 0) ===== */
    --radius-sm: 0px;
    --radius-md: 0px;
    --radius-lg: 0px;
    --radius-xl: 0px;
    --radius-full: 0px;

    /* ===== ШРИФТЫ ===== */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', monospace;

    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 13px;
    --text-md: 14px;
    --text-lg: 16px;
    --text-xl: 20px;
    --text-2xl: 24px;

    /* ===== ПЕРЕХОДЫ ===== */
    --transition-fast: 0.1s ease;
    --transition-base: 0.15s ease;
    --transition-slow: 0.2s ease;

    /* ===== Z-INDEX ===== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;
}

/* ============================================================
   ТЕМА "ОСЕНЬ" (сине-золотая) — по умолчанию
   ============================================================ */

[data-theme="autumn"] {
    /* ===== ФОНЫ ===== */
    --bg-primary: #0a111a;
    --bg-secondary: #121c29;
    --bg-tertiary: #1a2638;
    --bg-hover: #243447;
    --bg-active: #2d4059;
    --bg-header: #0d141f;

    /* ===== ГРАНИЦЫ ===== */
    --border: #2a3a4d;
    --border-light: #1f2c3d;
    --border-focus: #d4af37;

    /* ===== ТЕКСТ ===== */
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-inverse: #0a111a;

    /* ===== АКЦЕНТЫ ===== */
    --accent: #d4af37;
    --accent-hover: #e5c158;
    --accent-active: #b8962e;
    --accent-bg: rgba(212, 175, 55, 0.1);
    --accent-border: rgba(212, 175, 55, 0.3);

    /* ===== СТАТУСЫ ===== */
    --success: #6b9e7a;
    --success-bg: rgba(107, 158, 122, 0.15);

    --warning: #d4af37;
    --warning-bg: rgba(212, 175, 55, 0.15);

    --danger: #b85c5c;
    --danger-bg: rgba(184, 92, 92, 0.15);

    --info: #5c8a9e;
    --info-bg: rgba(92, 138, 158, 0.15);

    --purple: #8a7c9e;
    --purple-bg: rgba(138, 124, 158, 0.15);

    /* ===== ТЕНИ ===== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.7);
}

/* ============================================================
   ТЕМА "НОЧЬ" (темно-серая с золотом)
   ============================================================ */

[data-theme="night"] {
    /* ===== ФОНЫ ===== */
    --bg-primary: #121212;
    --bg-secondary: #1e1e1e;
    --bg-tertiary: #252525;
    --bg-hover: #2a2a2a;
    --bg-active: #333333;
    --bg-header: #181818;

    /* ===== ГРАНИЦЫ ===== */
    --border: #333333;
    --border-light: #262626;
    --border-focus: #d4af37;

    /* ===== ТЕКСТ ===== */
    --text-primary: #f3f4f6;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --text-inverse: #121212;

    /* ===== АКЦЕНТЫ ===== */
    --accent: #d4af37;
    --accent-hover: #e5c158;
    --accent-active: #b8962e;
    --accent-bg: rgba(212, 175, 55, 0.1);
    --accent-border: rgba(212, 175, 55, 0.3);

    /* ===== СТАТУСЫ ===== */
    --success: #6b9e7a;
    --success-bg: rgba(107, 158, 122, 0.15);

    --warning: #d4af37;
    --warning-bg: rgba(212, 175, 55, 0.15);

    --danger: #b85c5c;
    --danger-bg: rgba(184, 92, 92, 0.15);

    --info: #5c8a9e;
    --info-bg: rgba(92, 138, 158, 0.15);

    --purple: #8a7c9e;
    --purple-bg: rgba(138, 124, 158, 0.15);

    /* ===== ТЕНИ ===== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.7);
}

/* ============================================================
   ТЕМА "ДЕНЬ" (светлая, теплая)
   ============================================================ */

[data-theme="light"] {
    /* ===== ФОНЫ ===== */
    --bg-primary: #f4f1ea;
    --bg-secondary: #faf8f5;
    --bg-tertiary: #e8e4db;
    --bg-hover: #ded9cf;
    --bg-active: #d3cdc1;
    --bg-header: #ffffff;

    /* ===== ГРАНИЦЫ ===== */
    --border: #d1ccc2;
    --border-light: #e5e1d8;
    --border-focus: #b8860b;

    /* ===== ТЕКСТ ===== */
    --text-primary: #2c2a26;
    --text-secondary: #5c594f;
    --text-muted: #8a857a;
    --text-inverse: #ffffff;

    /* ===== АКЦЕНТЫ ===== */
    --accent: #b8860b;
    --accent-hover: #a07609;
    --accent-active: #8a6508;
    --accent-bg: rgba(184, 134, 11, 0.1);
    --accent-border: rgba(184, 134, 11, 0.3);

    /* ===== СТАТУСЫ ===== */
    --success: #4a7c59;
    --success-bg: rgba(74, 124, 89, 0.12);

    --warning: #b8860b;
    --warning-bg: rgba(184, 134, 11, 0.12);

    --danger: #a84a4a;
    --danger-bg: rgba(168, 74, 74, 0.12);

    --info: #4a6d7c;
    --info-bg: rgba(74, 109, 124, 0.12);

    --purple: #6b5b7a;
    --purple-bg: rgba(107, 91, 122, 0.12);

    /* ===== ТЕНИ ===== */
    --shadow-sm: 0 1px 2px rgba(44, 42, 38, 0.05);
    --shadow-md: 0 4px 12px rgba(44, 42, 38, 0.08);
    --shadow-lg: 0 10px 30px rgba(44, 42, 38, 0.12);
    --shadow-xl: 0 20px 60px rgba(44, 42, 38, 0.15);
}

/* ============================================================
   БАЗОВЫЕ СТИЛИ
   ============================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-primary);
    min-height: 100vh;
    transition: background-color var(--transition-base), color var(--transition-base);
}

/* ============================================================
   СКРОЛЛБАР
   ============================================================ */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bg-hover);
}

/* ============================================================
   ТИПОГРАФИЯ
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.3;
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }

p {
    color: var(--text-secondary);
    line-height: 1.6;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--accent-hover);
}

/* ============================================================
   УТИЛИТЫ
   ============================================================ */

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.text-info { color: var(--info); }
.text-accent { color: var(--accent); }

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-lg { font-size: var(--text-lg); }

.font-mono { font-family: var(--font-mono); }
.font-bold { font-weight: 600; }

.hidden { display: none !important; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }

/* ============================================================
   ВЫДЕЛЕНИЕ ТЕКСТА
   ============================================================ */

::selection {
    background: var(--accent);
    color: var(--text-inverse);
}

/* ============================================================
   ФОКУС
   ============================================================ */

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}