/* ProtonVPN Template - Official Brand Colors */
/* Primary: #6D4AFF (Electric Violet), Green Accent, Dark: #372580 */

:root[data-template="protonvpn"] {
    /* Primary Colors - Proton Purple & Green */
    --color-primary: #6D4AFF;
    --color-primary-hover: #8265FF;
    --color-secondary: #5B9A68;
    --color-secondary-hover: #6BAF78;
    --color-accent: #8265FF;
    --color-accent-hover: #9780FF;

    /* Backgrounds - ProtonVPN Dark Theme */
    --bg-primary: #1C1B29;
    --bg-secondary: #252438;
    --bg-tertiary: #2E2D44;
    --bg-card: rgba(37, 36, 56, 0.95);
    --bg-glass: rgba(37, 36, 56, 0.85);
    --bg-hover: rgba(109, 74, 255, 0.12);

    /* Text Colors */
    --text-primary: #F7F5FF;
    --text-secondary: #A8A3C0;
    --text-tertiary: #7A7693;

    /* Borders */
    --border-color: rgba(109, 74, 255, 0.25);
    --border-hover: rgba(109, 74, 255, 0.45);

    /* Shadows & Glows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.6);

    /* Template Specific */
    --template-bg-gradient: linear-gradient(135deg, #1C1B29 0%, #372580 50%, #1C1B29 100%);
    --template-glow-primary: 0 0 30px rgba(109, 74, 255, 0.4);
    --template-glow-accent: 0 0 20px rgba(91, 154, 104, 0.35);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #6D4AFF 0%, #8265FF 100%);
    --gradient-hero: linear-gradient(135deg, #1C1B29 0%, #252438 100%);
}

/* ProtonVPN Dark Mode (Default) */
:root[data-template="protonvpn"][data-theme="dark"] {
    --bg-primary: #1C1B29;
    --bg-secondary: #252438;
    --bg-card: rgba(37, 36, 56, 0.95);
    --text-primary: #F7F5FF;
    --text-secondary: #A8A3C0;
}

/* ProtonVPN Light Mode */
:root[data-template="protonvpn"][data-theme="light"] {
    --color-primary: #5D3FE0;
    --color-primary-hover: #6D4AFF;
    --color-secondary: #4A8956;
    --bg-primary: #F7F5FF;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #EBE8F7;
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-glass: rgba(255, 255, 255, 0.85);
    --text-primary: #1C1B29;
    --text-secondary: #5A5872;
    --text-tertiary: #7A7890;
    --border-color: rgba(93, 63, 224, 0.15);
    --border-hover: rgba(93, 63, 224, 0.30);
    --shadow-sm: 0 1px 3px rgba(28, 27, 41, 0.06);
    --shadow-md: 0 4px 12px rgba(28, 27, 41, 0.10);
    --shadow-lg: 0 10px 25px rgba(28, 27, 41, 0.14);
}