/* ============================================
   COLOR PALETTE - TubeBro Dark Theme
   ============================================
   Based on Atom One Dark (from YouTube-Manager)
   Last modified: 2026-02-15

   GROUPS:
   1. Brand Colors (main accents)
   2. Secondary Colors (status/utility)
   3. Backgrounds
   4. Borders
   5. Text
   6. Gradients
   7. Shadows & Effects
   ============================================ */

/* ============================================
   THEME TRANSITION - Circle Expand
   ============================================ */

/* View Transitions API (Chrome 111+, Edge 111+) */
@supports (view-transition-name: none) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 1.3s;
        animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    ::view-transition-new(root) {
        animation-name: circle-expand-in;
    }

    ::view-transition-old(root) {
        animation-name: circle-expand-out;
        animation-fill-mode: both;
    }

    @keyframes circle-expand-in {
        from {
            clip-path: circle(0% at var(--transition-x, 50%) var(--transition-y, 50%));
        }
        to {
            clip-path: circle(150% at var(--transition-x, 50%) var(--transition-y, 50%));
        }
    }

    @keyframes circle-expand-out {
        from {
            clip-path: circle(150% at var(--transition-x, 50%) var(--transition-y, 50%));
        }
        to {
            clip-path: circle(150% at var(--transition-x, 50%) var(--transition-y, 50%));
        }
    }
}

/* Fallback transition overlay */
.theme-transition-overlay {
    background-color: var(--color-bg-page);
}

.theme-transition-overlay[data-theme="light"] {
    background-color: #ffffff;
}

/* Legacy fade transition (fallback for old browsers) */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition:
        background-color 0.4s ease,
        border-color 0.4s ease,
        color 0.3s ease,
        box-shadow 0.4s ease,
        opacity 0.4s ease !important;
}

:root {
    /* ============================================
       1. BRAND COLORS (основные акценты)
       ============================================
       Используются для главных элементов UI:
       - Кнопки primary
       - Активные элементы
       - Ссылки
       - Выделения
       ============================================ */
    --color-brand-primary: #a381f0;         /* Purple - главный акцент */
    --color-brand-primary-hover: #8c68d6;

    --color-brand-secondary: #4dd4c1;       /* Teal - вторичный акцент */
    --color-brand-secondary-hover: #3bb8a6;

    /* ============================================
       2. SECONDARY COLORS (статусы/утилиты)
       ============================================
       Используются для:
       - Статусы (success, error, warning, info)
       - Бейджи
       - Уведомления
       - Валидация форм
       ============================================ */
    --color-success: #98c379;               /* Green - успех, готово */
    --color-success-hover: #7daa5c;

    --color-error: #e06c75;                 /* Red - ошибка, опасность */
    --color-error-hover: #c94f58;

    --color-warning: #e5c07b;               /* Yellow - предупреждение */
    --color-warning-hover: #d4a85e;

    --color-info: #61afef;                  /* Blue - информация */
    --color-info-hover: #4a96d5;

    --color-muted: #56b6c2;                 /* Cyan - нейтральный/альтернативный */
    --color-muted-hover: #3fa0ab;

    /* ============================================
       3. BACKGROUNDS
       ============================================
       Канонический 3-слойный паттерн TubeBros (от светлого к тёмному):

         --color-bg-card  (#2a2a3e)  →  внешние карточки, header'ы блоков,
                                        модалки, верхние «шапки» секций.
         --color-bg-input (#242435)  →  СТАНДАРТНЫЙ внутренний фон: тело
                                        блока с настройками/демо, рабочая
                                        область внутри карточки, фон input.
                                        Видеолабовский «inner block color».
         --color-bg-page  (#1a1b26)  →  самый тёмный: фон страницы, code/preview
                                        блоки, мрачные акценты типа примеров кода.

       Пример (dev/design showcase): header — card, body — input, footer (код) — page.
       Не использовать сторонние оттенки тёмного — только эти 3 токена.
       ============================================ */
    --color-bg-page: #1a1b26;               /* Page background (darkest) — для code/preview */
    --color-bg-card: #2a2a3e;               /* Cards, headers, modals (outer) */
    --color-bg-card-hover: #35354a;         /* Card hover */
    --color-bg-input: #242435;              /* СТАНДАРТНЫЙ inner — body карточки, поля */
    --color-bg-sunken: #1b1d2b;             /* Recessed surface (inset chips, step-number), ≈ глубже page */
    --color-bg-deep: #0a0c14;               /* Deepest tint (extended scale) — mix-partner для sunken-градиентов */
    --color-bg-modal: #2a2a3e;              /* Modal windows */
    --color-bg-overlay: rgba(0, 0, 0, 0.7); /* Modal overlay */
    --color-bg-table-header: #232335;       /* Table header row */
    --color-bg-table-row-hover: #35354a;    /* Table row hover */

    /* Legacy aliases (for tables.css compatibility) */
    --page-bg: var(--color-bg-page);
    --table-header-bg: var(--color-bg-table-header);
    --table-row-hover-bg: var(--color-bg-table-row-hover);

    /* ============================================
       4. BORDERS
       ============================================ */
    --color-border: #43435c;                /* Default border */
    --color-border-light: #5a5a73;          /* Lighter (hover) */
    --color-border-focus: var(--color-brand-primary); /* Focus = brand */

    /* ============================================
       5. TEXT
       ============================================ */
    --color-text-primary: #f1f1f1;          /* Headings, bright text */
    --color-text: #e8e8e8;                  /* Default text */
    --color-text-secondary: #9494a8;        /* Muted, labels */
    --color-text-tertiary: #6b6b80;         /* Very muted */
    --color-text-disabled: #5a5a6e;         /* Disabled elements */

    /* ============================================
       5b. INVERSE SURFACE (чёрный «хром» с белым контентом)
       ============================================
       Чёрные navbar / шапки / rail / тосты в светлой теме (и dark по умолчанию).
       Инвертированные поверхности ссылаются на эти токены вместо хардкод #000/#fff.
       Значения одинаковы в обеих темах → определяем один раз в :root.
       Reserved: gold-тема может переопределить. */
    --color-bg-inverse: #000000;                       /* чёрная подложка хрома */
    --color-text-on-accent: #ffffff;                   /* текст на залитой акцент-кнопке */
    --color-text-on-inverse-strong: #f1f1f1;           /* заголовок на чёрном */
    --color-text-on-inverse: #e8e8e8;                  /* основной текст на чёрном */
    --color-text-on-inverse-muted: #cfcfdc;            /* приглушённый текст на чёрном */
    --color-border-on-inverse: rgba(255, 255, 255, 0.12); /* граница на чёрном */

    /* ============================================
       6. GRADIENTS
       ============================================ */
    --gradient-primary: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-secondary));
    --gradient-primary-hover: linear-gradient(135deg, var(--color-brand-primary-hover), var(--color-brand-secondary-hover));

    --gradient-success: linear-gradient(135deg, var(--color-success), var(--color-muted));
    --gradient-danger: linear-gradient(135deg, var(--color-error), var(--color-warning));

    /* ============================================
       7. TRANSPARENT VARIANTS (для hover, фонов)
       ============================================ */
    --color-brand-primary-10: rgba(163, 129, 240, 0.1);
    --color-brand-primary-15: rgba(163, 129, 240, 0.15);
    --color-brand-primary-20: rgba(163, 129, 240, 0.2);
    --color-brand-primary-25: rgba(163, 129, 240, 0.25);
    --color-brand-primary-30: rgba(163, 129, 240, 0.3);
    --color-brand-primary-40: rgba(163, 129, 240, 0.4);
    --color-brand-primary-50: rgba(163, 129, 240, 0.5);
    --color-brand-primary-60: rgba(163, 129, 240, 0.6);

    --color-brand-secondary-10: rgba(77, 212, 193, 0.1);
    --color-brand-secondary-15: rgba(77, 212, 193, 0.15);
    --color-brand-secondary-25: rgba(77, 212, 193, 0.25);
    --color-brand-secondary-30: rgba(77, 212, 193, 0.3);
    --color-brand-secondary-40: rgba(77, 212, 193, 0.4);
    --color-brand-secondary-50: rgba(77, 212, 193, 0.5);
    --color-brand-secondary-60: rgba(77, 212, 193, 0.6);

    --color-success-10: rgba(152, 195, 121, 0.1);
    --color-success-15: rgba(152, 195, 121, 0.15);
    --color-success-25: rgba(152, 195, 121, 0.25);
    --color-success-30: rgba(152, 195, 121, 0.3);
    --color-success-40: rgba(152, 195, 121, 0.4);
    --color-success-50: rgba(152, 195, 121, 0.5);

    --color-error-10: rgba(224, 108, 117, 0.1);
    --color-error-15: rgba(224, 108, 117, 0.15);
    --color-error-25: rgba(224, 108, 117, 0.25);
    --color-error-30: rgba(224, 108, 117, 0.3);
    --color-error-40: rgba(224, 108, 117, 0.4);
    --color-error-50: rgba(224, 108, 117, 0.5);

    --color-warning-10: rgba(229, 192, 123, 0.1);
    --color-warning-15: rgba(229, 192, 123, 0.15);
    --color-warning-25: rgba(229, 192, 123, 0.25);
    --color-warning-30: rgba(229, 192, 123, 0.3);
    --color-warning-40: rgba(229, 192, 123, 0.4);
    --color-warning-50: rgba(229, 192, 123, 0.5);

    --color-info-10: rgba(97, 175, 239, 0.1);
    --color-info-15: rgba(97, 175, 239, 0.15);
    --color-info-25: rgba(97, 175, 239, 0.25);
    --color-info-30: rgba(97, 175, 239, 0.3);
    --color-info-40: rgba(97, 175, 239, 0.4);
    --color-info-50: rgba(97, 175, 239, 0.5);

    --color-muted-10: rgba(86, 182, 194, 0.1);
    --color-muted-15: rgba(86, 182, 194, 0.15);
    --color-muted-25: rgba(86, 182, 194, 0.25);
    --color-muted-30: rgba(86, 182, 194, 0.3);
    --color-muted-40: rgba(86, 182, 194, 0.4);
    --color-muted-50: rgba(86, 182, 194, 0.5);

    /* ============================================
       8. SHADOWS & EFFECTS
       ============================================ */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-focus: 0 0 0 3px var(--color-brand-primary-20);

    /* ============================================
       8. SPACING & RADIUS
       ============================================ */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* ============================================
       9. TRANSITIONS
       ============================================ */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;

    /* ============================================
       10. CONTENT / DATA-VIZ PALETTES (theme-independent)
       ============================================
       Это НЕ chrome и НЕ semantic-токены. Это продуктовая графика и
       категориальные шкалы: художественные превью арт-стилей и цвет-коды
       lore-графа. Они ОДИНАКОВЫ в dark и light (определены только здесь,
       в [data-theme="light"] НЕ переопределяются) — содержимое/визуализация
       не должны «флипать» при смене темы.
       ============================================ */

    /* Lore-graph categorical tones (tone-0..4 + character=0/location=1/item=3).
       Solid base hues; полупрозрачные варианты — через color-mix(... N%, transparent). */
    --lore-tone-0: #b593ff;                 /* purple — tone-0 / character */
    --lore-tone-1: #85ceff;                 /* blue   — tone-1 / location  */
    --lore-tone-2: #86e8b5;                 /* green  — tone-2             */
    --lore-tone-3: #ffb871;                 /* orange — tone-3 / item      */
    --lore-tone-4: #ff82aa;                 /* pink   — tone-4             */
    --lore-avatar-placeholder: #f6f6f8;     /* lore node avatar placeholder (light surface) */

    /* Art-style swatch previews (.video-lab-style-preview--*). Каждый swatch —
       намеренная многоцветная палитра; alpha вшита в значение (zero-shift). */
    --style-preview-cinematic-1: rgba(255, 211, 140, 0.32);
    --style-preview-cinematic-2: rgba(38, 46, 56, 0.96);
    --style-preview-cinematic-3: rgba(109, 126, 134, 0.42);
    --style-preview-storybook-1: rgba(255, 230, 160, 0.52);
    --style-preview-storybook-2: rgba(245, 132, 91, 0.52);
    --style-preview-storybook-3: rgba(68, 191, 171, 0.48);
    --style-preview-clay-1: rgba(248, 205, 158, 0.72);
    --style-preview-clay-2: rgba(164, 98, 74, 0.72);
    --style-preview-clay-3: rgba(66, 139, 128, 0.38);
    --style-preview-vector-1: rgba(245, 246, 248, 0.92);
    --style-preview-vector-2: rgba(27, 120, 191, 0.56);
    --style-preview-vector-3: rgba(247, 185, 74, 0.66);
    --style-preview-miniature-1: rgba(255, 236, 161, 0.48);
    --style-preview-miniature-2: rgba(92, 128, 96, 0.72);
    --style-preview-miniature-3: rgba(98, 75, 119, 0.45);
    --style-preview-documentary-1: rgba(219, 231, 239, 0.44);
    --style-preview-documentary-2: rgba(89, 105, 111, 0.78);
    --style-preview-documentary-3: rgba(170, 158, 135, 0.44);
    --style-preview-graphic-1: rgba(18, 20, 26, 0.96);
    --style-preview-graphic-2: rgba(176, 50, 68, 0.62);
    --style-preview-graphic-3: rgba(231, 191, 99, 0.48);
    --style-preview-user-auto-1: rgba(163, 129, 240, 0.46);
    --style-preview-user-auto-2: rgba(39, 45, 58, 0.88);
    --style-preview-user-auto-3: rgba(23, 199, 178, 0.28);

    /* ============================================
       LEGACY ALIASES (for compatibility)
       ============================================
       Use new names in new code!
       ============================================ */
    --color-purple: var(--color-brand-primary);
    --color-purple-hover: var(--color-brand-primary-hover);
    --color-teal: var(--color-brand-secondary);
    --color-teal-hover: var(--color-brand-secondary-hover);
    --color-green: var(--color-success);
    --color-red: var(--color-error);
    --color-yellow: var(--color-warning);
    --color-blue: var(--color-info);
    --color-cyan: var(--color-muted);
}


/* ============================================
   THEME: LIGHT (Black & White)
   ============================================
   Activate: document.documentElement.setAttribute('data-theme', 'light')
   Hotkey: Ctrl+2
   ============================================ */
[data-theme="light"] {
    /* Brand */
    --color-brand-primary: #1a1a1a;
    --color-brand-primary-hover: #333333;
    --color-brand-secondary: #666666;
    --color-brand-secondary-hover: #888888;

    /* Backgrounds (light) — чистый B&W: почти белые поверхности, разделяет
       чёрный бордер, а не серая заливка (убирает «грязный» серый) */
    --color-bg-page: #ffffff;
    --color-bg-card: #fafafa;
    --color-bg-card-hover: #f0f0f0;
    --color-bg-input: #ffffff;
    --color-bg-sunken: #ededed;             /* recessed surface (light) — глубже card-hover, НЕ чёрный */
    --color-bg-deep: #e0e0e0;               /* deepest recess (light) — НЕ чёрный; mix-partner */
    --color-bg-modal: #ffffff;
    --color-bg-overlay: rgba(0, 0, 0, 0.5);
    --color-bg-table-header: #000000;       /* black header — crisp B&W contrast */
    --color-bg-table-row-hover: #f0f0f0;

    /* Borders — strong near-black for crisp B&W definition (inputs/tables/cards) */
    --color-border: #1a1a1a;
    --color-border-light: #4d4d4d;

    /* Text (inverted) */
    --color-text-primary: #1a1a1a;
    --color-text: #333333;
    --color-text-secondary: #666666;
    --color-text-tertiary: #999999;
    --color-text-disabled: #bbbbbb;

    /* Status colors for light bg. Warning = ТЁМНЫЙ ЯНТАРЬ (не ярко-жёлтый):
       ярко-жёлтый на белом «бредово» смотрится. На чёрных поверхностях (тосты)
       ярко-жёлтый возвращается через локальный override. */
    --color-success: #16a34a;
    --color-error: #dc2626;
    --color-warning: #b45309;
    --color-warning-hover: #92400e;
    --color-info: #2563eb;

    /* Transparent variants */
    --color-brand-primary-10: rgba(26, 26, 26, 0.1);
    --color-brand-primary-15: rgba(26, 26, 26, 0.15);
    --color-brand-primary-20: rgba(26, 26, 26, 0.2);
    --color-brand-primary-25: rgba(26, 26, 26, 0.25);
    --color-brand-primary-30: rgba(26, 26, 26, 0.3);
    --color-brand-primary-40: rgba(26, 26, 26, 0.4);
    --color-brand-primary-50: rgba(26, 26, 26, 0.5);
    --color-brand-primary-60: rgba(26, 26, 26, 0.6);

    --color-brand-secondary-10: rgba(102, 102, 102, 0.1);
    --color-brand-secondary-15: rgba(102, 102, 102, 0.15);
    --color-brand-secondary-20: rgba(102, 102, 102, 0.2);
    --color-brand-secondary-25: rgba(102, 102, 102, 0.25);
    --color-brand-secondary-30: rgba(102, 102, 102, 0.3);
    --color-brand-secondary-40: rgba(102, 102, 102, 0.4);
    --color-brand-secondary-50: rgba(102, 102, 102, 0.5);
    --color-brand-secondary-60: rgba(102, 102, 102, 0.6);

    /* Status colors — transparent variants (filled in for light theme) */
    --color-success-10: rgba(22, 163, 74, 0.1);
    --color-success-15: rgba(22, 163, 74, 0.15);
    --color-success-25: rgba(22, 163, 74, 0.25);
    --color-success-30: rgba(22, 163, 74, 0.3);
    --color-success-40: rgba(22, 163, 74, 0.4);
    --color-success-50: rgba(22, 163, 74, 0.5);
    --color-success-60: rgba(22, 163, 74, 0.6);

    --color-error-10: rgba(220, 38, 38, 0.1);
    --color-error-15: rgba(220, 38, 38, 0.15);
    --color-error-25: rgba(220, 38, 38, 0.25);
    --color-error-30: rgba(220, 38, 38, 0.3);
    --color-error-40: rgba(220, 38, 38, 0.4);
    --color-error-50: rgba(220, 38, 38, 0.5);
    --color-error-60: rgba(220, 38, 38, 0.6);

    --color-warning-10: rgba(229, 192, 123, 0.1);
    --color-warning-15: rgba(229, 192, 123, 0.15);
    --color-warning-25: rgba(229, 192, 123, 0.25);
    --color-warning-40: rgba(229, 192, 123, 0.4);
    --color-warning-50: rgba(229, 192, 123, 0.5);
    --color-warning-60: rgba(229, 192, 123, 0.6);

    --color-info-10: rgba(37, 99, 235, 0.1);
    --color-info-15: rgba(37, 99, 235, 0.15);
    --color-info-25: rgba(37, 99, 235, 0.25);
    --color-info-40: rgba(37, 99, 235, 0.4);
    --color-info-50: rgba(37, 99, 235, 0.5);
    --color-info-60: rgba(37, 99, 235, 0.6);

    /* Shadows (lighter) */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
    --shadow-focus: 0 0 0 3px rgba(26, 26, 26, 0.15);
}

/* Dark/default theme: global textured page background */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../../img/bg-dark.png?v=20260228-4');
    background-size: 780px;
    background-repeat: repeat;
    opacity: 0.40;
    z-index: -1;
    pointer-events: none;
}

/* Light theme: black overscroll background */
[data-theme="light"] {
    background-color: #000000;
}

[data-theme="light"] body {
    background-color: transparent;
    position: relative;
}

/* Light theme: white background layer */
[data-theme="light"] body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    z-index: -2;
    pointer-events: none;
}

/* Light theme: background pattern (from TubeBroShop) */
[data-theme="light"] body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../../img/bg.jpeg');
    background-size: 780px;
    background-repeat: repeat;
    opacity: 0.08;
    z-index: -1;
    pointer-events: none;
}