/* Surfshark Template - Official Brand Colors */
/* Primary: #16D8D8 (Teal), Accent: #1EBBBB, Dark: #0D1821 */

:root[data-template="surfshark"] {
    /* Primary Colors - Surfshark Teal */
    --color-primary: #16D8D8;
    --color-primary-hover: #1EECEC;
    --color-secondary: #1EBBBB;
    --color-secondary-hover: #25D1D1;
    --color-accent: #14C4C4;
    --color-accent-hover: #1AD9D9;

    /* Backgrounds - Surfshark Dark Theme */
    --bg-primary: #0D1821;
    --bg-secondary: #152533;
    --bg-tertiary: #1D3344;
    --bg-card: rgba(21, 37, 51, 0.95);
    --bg-glass: rgba(21, 37, 51, 0.85);
    --bg-hover: rgba(22, 216, 216, 0.12);

    /* Text Colors */
    --text-primary: #FFFFFF;
    --text-secondary: #94A3B8;
    --text-tertiary: #64748B;

    /* Borders */
    --border-color: rgba(22, 216, 216, 0.25);
    --border-hover: rgba(22, 216, 216, 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, #0D1821 0%, #152533 50%, #0D1821 100%);
    --template-glow-primary: 0 0 30px rgba(22, 216, 216, 0.35);
    --template-glow-accent: 0 0 20px rgba(30, 187, 187, 0.30);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #16D8D8 0%, #1EBBBB 100%);
    --gradient-hero: linear-gradient(135deg, #0D1821 0%, #152533 100%);
}

/* Surfshark Dark Mode (Default) */
:root[data-template="surfshark"][data-theme="dark"] {
    --bg-primary: #0D1821;
    --bg-secondary: #152533;
    --bg-card: rgba(21, 37, 51, 0.95);
    --text-primary: #FFFFFF;
    --text-secondary: #94A3B8;
}

/* Surfshark Light Mode */
:root[data-template="surfshark"][data-theme="light"] {
    --color-primary: #12BFBF;
    --color-primary-hover: #16D8D8;
    --bg-primary: #F0FAFA;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #E0F5F5;
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-glass: rgba(255, 255, 255, 0.85);
    --text-primary: #0D1821;
    --text-secondary: #4A5568;
    --text-tertiary: #718096;
    --border-color: rgba(18, 191, 191, 0.20);
    --border-hover: rgba(18, 191, 191, 0.35);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12);
}