/* ============================================
   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
       ============================================ */
    --color-bg-page: #1a1b26;               /* Page background (darkest) */
    --color-bg-card: #2a2a3e;               /* Cards, blocks */
    --color-bg-card-hover: #35354a;         /* Card hover */
    --color-bg-input: #242435;              /* Input fields */
    --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 */

    /* ============================================
       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;

    /* ============================================
       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) */
    --color-bg-page: #ffffff;
    --color-bg-card: #f5f5f5;
    --color-bg-card-hover: #ebebeb;
    --color-bg-input: #ffffff;
    --color-bg-modal: #ffffff;
    --color-bg-overlay: rgba(0, 0, 0, 0.5);

    /* Borders */
    --color-border: #e0e0e0;
    --color-border-light: #cccccc;

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

    /* Status colors stay the same but adjust for light bg */
    --color-success: #16a34a;
    --color-error: #dc2626;
    /* Warning variants for light theme:
       A (active, sunny): #e4b200
       B (classic): #ca8a04
       C (amber): #b45309 */
    --color-warning: #e4b200;
    --color-warning-hover: #c59600;
    --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-secondary-10: rgba(102, 102, 102, 0.1);
    --color-brand-secondary-15: rgba(102, 102, 102, 0.15);
    --color-brand-secondary-25: rgba(102, 102, 102, 0.25);

    /* 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;
}

/* Dark/default theme: ambient purple glow behind the texture */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 18% 2%, rgba(168, 129, 240, 0.17), transparent 32%),
        radial-gradient(circle at 82% 14%, rgba(163, 129, 240, 0.10), transparent 28%),
        linear-gradient(180deg, rgba(10, 12, 26, 0.14), rgba(8, 10, 20, 0));
    z-index: -2;
    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;
}