/* Theme System - Gold & Red Variants */

:root,
[data-theme="gold"] {
    /* Primary Theme Color (Gold) - RGB values for custom opacity */
    --theme-color-rgb: 251, 191, 36;
    --theme-color: rgba(251, 191, 36, 1);
    --theme-color-light: rgba(253, 224, 71, 1);
    --theme-color-dark: rgba(245, 158, 11, 1);
    --theme-color-bright: rgba(254, 240, 138, 1);
    --theme-color-alpha: rgba(251, 191, 36, 0.4);
    --theme-color-alpha-light: rgba(251, 191, 36, 0.2);
    --theme-color-alpha-medium: rgba(251, 191, 36, 0.6);
    --theme-color-alpha-strong: rgba(251, 191, 36, 0.8);

    /* Accent Color (Blue in gold theme) */
    --accent-color: rgba(59, 130, 246, 1);
    --accent-color-light: rgba(96, 165, 250, 1);
    --accent-color-dark: rgba(37, 99, 235, 1);
    --accent-color-alpha: rgba(59, 130, 246, 0.4);
    --accent-color-alpha-light: rgba(59, 130, 246, 0.2);
    --accent-color-alpha-medium: rgba(59, 130, 246, 0.6);

    /* Cyan/Teal accents */
    --cyan-color: rgba(34, 211, 238, 1);
    --cyan-color-alpha: rgba(34, 211, 238, 0.3);
    --cyan-color-alpha-light: rgba(34, 211, 238, 0.1);

    /* Scrollbar colors */
    --scrollbar-color: rgba(251, 191, 36, 0.8);
    --scrollbar-bg: rgba(15, 23, 42, 0.5);

    /* Border colors */
    --border-color-primary: rgba(251, 191, 36, 0.4);
    --border-color-secondary: rgba(251, 191, 36, 0.3);
    --border-color-hover: rgba(251, 191, 36, 0.6);

    /* Border accent colors */
    --border-accent-primary: rgba(59, 130, 246, 0.3);
    --border-cyan: rgba(34, 211, 238, 0.3);
}

[data-theme="red"] {
    /* Primary Theme Color (Red) - RGB values for custom opacity */
    --theme-color-rgb: 239, 68, 68;
    --theme-color: rgba(239, 68, 68, 1);
    --theme-color-light: rgba(248, 113, 113, 1);
    --theme-color-dark: rgba(220, 38, 38, 1);
    --theme-color-bright: rgba(252, 165, 165, 1);
    --theme-color-alpha: rgba(239, 68, 68, 0.4);
    --theme-color-alpha-light: rgba(239, 68, 68, 0.2);
    --theme-color-alpha-medium: rgba(239, 68, 68, 0.6);
    --theme-color-alpha-strong: rgba(239, 68, 68, 0.8);

    /* Accent Color (Dark red/crimson in red theme) */
    --accent-color: rgba(220, 38, 38, 1);
    --accent-color-light: rgba(239, 68, 68, 1);
    --accent-color-dark: rgba(185, 28, 28, 1);
    --accent-color-alpha: rgba(220, 38, 38, 0.4);
    --accent-color-alpha-light: rgba(220, 38, 38, 0.2);
    --accent-color-alpha-medium: rgba(220, 38, 38, 0.6);

    /* Cyan/Teal accents become red variants */
    --cyan-color: rgba(248, 113, 113, 1);
    --cyan-color-alpha: rgba(248, 113, 113, 0.3);
    --cyan-color-alpha-light: rgba(248, 113, 113, 0.1);

    /* Scrollbar colors */
    --scrollbar-color: rgba(239, 68, 68, 0.8);
    --scrollbar-bg: rgba(15, 23, 42, 0.5);

    /* Border colors */
    --border-color-primary: rgba(239, 68, 68, 0.4);
    --border-color-secondary: rgba(239, 68, 68, 0.3);
    --border-color-hover: rgba(239, 68, 68, 0.6);

    /* Border accent colors */
    --border-accent-primary: rgba(220, 38, 38, 0.3);
    --border-cyan: rgba(248, 113, 113, 0.3);
}

/* Apply theme colors to global elements */

/* Scrollbar styling with theme colors */
* {
    scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg);
}

*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
        var(--theme-color-alpha-strong) 0%,
        var(--theme-color-alpha-medium) 50%,
        var(--theme-color-alpha-strong) 100%
    );
    border: 1px solid var(--border-color-secondary);
    box-shadow: 0 0 4px var(--theme-color-alpha);
}

*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg,
        var(--theme-color) 0%,
        var(--theme-color-alpha-strong) 50%,
        var(--theme-color) 100%
    );
    box-shadow: 0 0 6px var(--theme-color-alpha-medium);
}

/* Theme transition for smooth changes */
:root,
[data-theme] {
    transition:
        --theme-color 0.3s ease,
        --theme-color-light 0.3s ease,
        --theme-color-dark 0.3s ease,
        --theme-color-bright 0.3s ease,
        --theme-color-alpha 0.3s ease,
        --border-color-primary 0.3s ease;
}