/* ============================================
   THEME.CSS - Color Variables for Light/Dark Mode
   ============================================ */

:root {
    /* Light Theme (Default) */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #eeeeee;
    --text-primary: #2a2a2a;
    --text-secondary: #666666;
    --text-tertiary: #999999;

    /* Accent Colors */
    --accent-primary: #FF0000;      /* YouTube Red */
    --accent-secondary: #CC0000;    /* Darker Red */
    --accent-hover: #E60000;        /* Red on hover */

    /* Borders & Shadows */
    --border-color: #e0e0e0;
    --border-light: #f0f0f0;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);

    /* Component Colors */
    --card-bg: #ffffff;
    --input-bg: #f5f5f5;
    --input-border: #e0e0e0;
    --input-focus: #FF0000;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* Dark Theme */
[data-theme="dark"] {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2a2a2a;
    --bg-tertiary: #333333;
    --text-primary: #f5f5f5;
    --text-secondary: #d0d0d0;
    --text-tertiary: #a0a0a0;

    /* Accent Colors */
    --accent-primary: #FF0000;
    --accent-secondary: #ff3333;
    --accent-hover: #ff1a1a;

    /* Borders & Shadows */
    --border-color: #333333;
    --border-light: #2a2a2a;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

    /* Component Colors */
    --card-bg: #2a2a2a;
    --input-bg: #333333;
    --input-border: #444444;
    --input-focus: #FF0000;
}

/* Smooth transitions for theme switching */
* {
    transition: background-color var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}