/* Synthwave Glow Premium Theme - Cyan/Blue Palette */
/* Based on Light Theme with -43° hue shift (indigo 243° → cyan 200°) */

[data-theme="synthwave-glow"] {
    /* Primary colors - hue shifted to cyan */
    --primary: #46b8e5;
    --primary-hover: #389aca;
    --primary-light: #e0f4ff;
    --primary-text: #34a5d9;
    --primary-text-hover: #389aca;
    --secondary: #657886;
    --accent: #46b8e5;
    --contrast: white;

    /* Status colors - kept standard for intuitive UX */
    --success: #047857;
    --warning: #b45309;
    --error: #dc2626;

    /* Background colors - hue shifted with cyan tint */
    --bg-primary: #ffffff;
    --bg-secondary: #f7fcfe;
    --bg-tertiary: #f1f7f9;

    /* Text colors - PRESERVED from light theme for accessibility */
    --text-primary: #1e293b;
    --text-secondary: #475b69;
    --text-muted: #5e687c;

    /* Border colors - hue shifted */
    --border: #c0cbd1;
    --border-light: #f1f7f9;

    /* Shadow base */
    --shadow: rgba(0, 0, 0, 0.1);
    --shadow-lg: rgba(0, 0, 0, 0.15);

    /* Transparency variations - using primary cyan RGB (70, 184, 229) */
    --overlay-light: rgba(0, 0, 0, 0.4);
    --overlay-dark: rgba(0, 0, 0, 0.6);
    --bg-blur: rgba(247, 252, 254, 0.8);
    --bg-subtle: rgba(70, 184, 229, 0.05);
    --bg-hover: rgba(70, 184, 229, 0.1);
    --border-focus: rgba(70, 184, 229, 0.15);
    --shadow-primary: rgba(70, 184, 229, 0.3);
    --shadow-primary-lg: rgba(70, 184, 229, 0.4);
    --shadow-primary-xl: rgba(70, 184, 229, 0.5);
    --bg-white-overlay: rgba(255, 255, 255, 0.2);
    --border-white-overlay: rgba(255, 255, 255, 0.3);
    --bg-black-overlay: rgba(0, 0, 0, 0.1);
    --bg-success-subtle: rgba(40, 167, 69, 0.05);
    --bg-error-subtle: rgba(220, 53, 69, 0.05);
    --border-success: rgba(40, 167, 69, 0.25);
    --border-error: rgba(220, 53, 69, 0.25);
}

/* Theme-specific adjustments */
[data-theme="synthwave-glow"] .btn-primary {
    background: var(--primary);
    color: white;
    border: 1px solid var(--primary);
}

[data-theme="synthwave-glow"] .btn-primary:hover {
    background: var(--primary-hover);
    color: white;
}

[data-theme="synthwave-glow"] a {
    color: var(--primary-text);
}

[data-theme="synthwave-glow"] a:hover {
    color: var(--primary-text-hover);
}

[data-theme="synthwave-glow"] .form-control {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

[data-theme="synthwave-glow"] .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--border-focus);
}