/*!
 * VIOLA THEME - Color Palette
 * Violo: #2b015b (RGB 43-1-91)
 * Blu: #023fa0 (RGB 2-63-160)
 * Azzurro: #89e6ef (RGB 137-230-239)
 */

/* ============================================
   CSS VARIABLES - Nuova Palette
   ============================================ */
:root {
    /* Colori principali */
    --color-violo: #2b015b;
    --color-violo-light: #3d0280;
    --color-violo-dark: #1a0038;
    --color-violo-rgb: 43, 1, 91;

    --color-blu: #023fa0;
    --color-blu-light: #0355d4;
    --color-blu-dark: #012a6e;
    --color-blu-rgb: 2, 63, 160;

    --color-azzurro: #89e6ef;
    --color-azzurro-light: #a8f0f7;
    --color-azzurro-dark: #5cd0db;
    --color-azzurro-rgb: 137, 230, 239;

    /* Varianti di viola */
    --color-violo-75: rgba(43, 1, 91, 0.75);
    --color-violo-50: rgba(43, 1, 91, 0.5);
    --color-violo-25: rgba(43, 1, 91, 0.25);
    --color-violo-15: rgba(43, 1, 91, 0.15);
    --color-violo-10: rgba(43, 1, 91, 0.1);
    --color-violo-08: rgba(43, 1, 91, 0.08);

    /* Varianti di blu */
    --color-blu-75: rgba(2, 63, 160, 0.75);
    --color-blu-50: rgba(2, 63, 160, 0.5);
    --color-blu-25: rgba(2, 63, 160, 0.25);
    --color-blu-15: rgba(2, 63, 160, 0.15);
    --color-blu-10: rgba(2, 63, 160, 0.1);
    --color-blu-08: rgba(2, 63, 160, 0.08);

    /* Varianti di azzurro */
    --color-azzurro-75: rgba(137, 230, 239, 0.75);
    --color-azzurro-50: rgba(137, 230, 239, 0.5);
    --color-azzurro-25: rgba(137, 230, 239, 0.25);
    --color-azzurro-15: rgba(137, 230, 239, 0.15);
    --color-azzurro-10: rgba(137, 230, 239, 0.1);

    /* Gradienti */
    --grad-violo-blu: linear-gradient(135deg, var(--color-violo) 0%, var(--color-blu) 100%);
    --grad-blu-violo: linear-gradient(135deg, var(--color-blu) 0%, var(--color-violo) 100%);
    --grad-violo-azzurro: linear-gradient(135deg, var(--color-violo) 0%, var(--color-azzurro) 100%);
    --grad-blu-azzurro: linear-gradient(135deg, var(--color-blu) 0%, var(--color-azzurro) 100%);
    --grad-violo-dark: linear-gradient(180deg, var(--color-violo) 0%, var(--color-violo-dark) 100%);
    --grad-blu-dark: linear-gradient(180deg, var(--color-blu) 0%, var(--color-blu-dark) 100%);

    /* Gradienti verticali */
    --grad-vr-violo-to-blu: linear-gradient(to bottom, var(--color-violo) 0%, var(--color-blu) 100%);
    --grad-vr-blu-to-violo: linear-gradient(to bottom, var(--color-blu) 0%, var(--color-violo) 100%);
    --grad-vr-violo-to-dark: linear-gradient(to bottom, var(--color-violo) 0%, var(--color-violo-dark) 100%);
    --grad-vr-blu-to-dark: linear-gradient(to bottom, var(--color-blu) 0%, var(--color-blu-dark) 100%);

    /* Gradienti orizzontali */
    --grad-hr-violo-to-blu: linear-gradient(to right, var(--color-violo) 0%, var(--color-blu) 100%);
    --grad-hr-blu-to-violo: linear-gradient(to right, var(--color-blu) 0%, var(--color-violo) 100%);

    /* Gradienti speciali */
    --grad-special: linear-gradient(140deg, var(--color-violo) 0%, var(--color-violo) 20%, transparent 50%, transparent 100%);
    --grad-special-alt: linear-gradient(to top, var(--color-violo) 0%, var(--color-violo) 5%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 100%);

    /* Colori di testo */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.85);
    --text-muted: rgba(255, 255, 255, 0.6);
    --text-light: rgba(255, 255, 255, 0.4);
    --text-dark: #1a1a2e;
    --text-dark-secondary: #637097;

    /* Sfondi */
    --bg-primary: var(--color-violo);
    --bg-secondary: var(--color-blu);
    --bg-accent: var(--color-azzurro);
    --bg-dark: #0d0d1a;
    --bg-light: #f0f4fd;
    --bg-light-alt: #dde6fa;

    /* Bordo */
    --border-color: rgba(255, 255, 255, 0.1);
    --border-color-light: rgba(255, 255, 255, 0.15);
    --border-color-dark: rgba(0, 0, 0, 0.1);

    /* Ombre */
    --shadow-sm: 0 2px 8px rgba(43, 1, 91, 0.15);
    --shadow-md: 0 4px 16px rgba(43, 1, 91, 0.25);
    --shadow-lg: 0 8px 32px rgba(43, 1, 91, 0.35);
    --shadow-xl: 0 16px 48px rgba(43, 1, 91, 0.45);

    /* Ombre con azzurro */
    --shadow-azzurro-sm: 0 2px 8px rgba(137, 230, 239, 0.15);
    --shadow-azzurro-md: 0 4px 16px rgba(137, 230, 239, 0.25);
    --shadow-azzurro-lg: 0 8px 32px rgba(137, 230, 239, 0.35);

    /* Glassmorphism */
    --glass-bg: rgba(43, 1, 91, 0.82);
    --glass-bg-light: rgba(43, 1, 91, 0.6);
    --glass-blur: blur(18px) saturate(180%);
    --glass-blur-light: blur(12px) saturate(150%);

    /* Transizioni */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.35s ease;
    --transition-smooth: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================
   OVERRIDE CLASSI COLORI ESISTENTI
   ============================================ */

/* Colori testo */
.tc-primary, .tc-primary a { color: var(--color-azzurro) !important; }
.tc-primary a:hover { color: var(--color-azzurro-light) !important; }

.tc-secondary, .tc-secondary a { color: var(--color-violo-light) !important; }
.tc-secondary a:hover { color: var(--color-azzurro) !important; }

.tc-alternet, .tc-alternet a { color: var(--color-blu) !important; }

.tc-theme, .tc-theme a { color: var(--color-violo) !important; }
.tc-theme-alt, .tc-theme-alt a { color: var(--color-blu) !important; }

/* Sfondi */
.bg-primary { background-color: var(--color-violo) !important; }
.bg-secondary { background-color: var(--color-blu) !important; }
.bg-alternet { background-color: var(--color-azzurro) !important; }

.bg-dark { background-color: var(--color-violo-dark) !important; }
.bg-dark.current { background-color: var(--color-violo-75) !important; }
.bg-dark-alt { background-color: var(--color-violo-50) !important; }
.bg-dark-alt.current { background-color: var(--color-blu-50) !important; }

.bg-light { background-color: var(--bg-light) !important; }
.bg-light.current { background-color: rgba(240, 244, 253, 0.7) !important; }
.bg-light-alt { background-color: var(--bg-light-alt) !important; }
.bg-light-alt.current { background-color: rgba(221, 230, 250, 0.7) !important; }

/* Gradienti */
.bg-grad { background-image: var(--grad-hr-violo-to-blu) !important; }
.bg-grad-alt { background-image: var(--grad-hr-blu-to-violo) !important; }
.bg-grad-special { background-image: var(--grad-special) !important; }
.bg-grad-special-alt { background-image: var(--grad-special-alt) !important; }

.bg-grad-vr-theme-to-alt { background-image: var(--grad-vr-violo-to-blu) !important; }
.bg-grad-vr-theme-dark-to-dark-alt { background-image: var(--grad-vr-blu-to-violo) !important; }
.bg-grad-vr-alt-to-theme { background-image: var(--grad-vr-blu-to-violo) !important; }
.bg-grad-vr-dark-alt-to-theme-dark-to-theme { background-image: var(--grad-vr-blu-to-violo) !important; }

.bg-theme-grad { background-image: var(--grad-hr-violo-to-blu) !important; }
.bg-theme-grad-alt { background-image: var(--grad-hr-blu-to-violo) !important; }
.bg-theme-grad-s2 { background-image: var(--grad-violo-blu) !important; }
.bg-theme-grad-s2-alt { background-image: var(--grad-blu-violo) !important; }
.bg-theme-grad-alternet { background-image: var(--grad-violo-azzurro) !important; }

.bg-light-grad { background-image: linear-gradient(to bottom, #fff 0%, var(--bg-light) 100%); }

/* Blend */
.bg-blend:before { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--color-violo)); }
.bg-blend-alt:before { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--color-blu)); }
.bg-blend-light { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--bg-light)); }
.bg-blend-light-alt { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--bg-light-alt)); }
.bg-rblend-light { background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, var(--bg-light)); }
.bg-rblend-light-alt { background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, var(--bg-light-alt)); }

/* Mask */
.mask-c-blend { background-image: linear-gradient(180deg, var(--color-blu) 0%, rgba(0, 0, 0, 0) 100%) !important; }
.mask-c-blend-dark { background-image: linear-gradient(180deg, var(--color-violo-dark) 0%, rgba(0, 0, 0, 0) 100%) !important; }
.mask-c-blend-light { background-image: linear-gradient(180deg, var(--bg-light) 0%, rgba(0, 0, 0, 0) 100%) !important; }

/* ============================================
   UTILITY CLASSI - Nuova Palette
   ============================================ */

/* Colori testo */
.text-violo { color: var(--color-violo) !important; }
.text-blu { color: var(--color-blu) !important; }
.text-azzurro { color: var(--color-azzurro) !important; }

/* Sfondi */
.bg-violo { background-color: var(--color-violo) !important; }
.bg-blu { background-color: var(--color-blu) !important; }
.bg-azzurro { background-color: var(--color-azzurro) !important; }

.bg-violo-light { background-color: var(--color-violo-light) !important; }
.bg-blu-light { background-color: var(--color-blu-light) !important; }
.bg-azzurro-light { background-color: var(--color-azzurro-light) !important; }

.bg-violo-dark { background-color: var(--color-violo-dark) !important; }
.bg-blu-dark { background-color: var(--color-blu-dark) !important; }
.bg-azzurro-dark { background-color: var(--color-azzurro-dark) !important; }

/* Gradienti utility */
.bg-grad-violo-blu { background-image: var(--grad-violo-blu) !important; }
.bg-grad-blu-violo { background-image: var(--grad-blu-violo) !important; }
.bg-grad-violo-azzurro { background-image: var(--grad-violo-azzurro) !important; }
.bg-grad-blu-azzurro { background-image: var(--grad-blu-azzurro) !important; }

/* Bordo */
.border-violo { border-color: var(--color-violo) !important; }
.border-blu { border-color: var(--color-blu) !important; }
.border-azzurro { border-color: var(--color-azzurro) !important; }

/* ============================================
   COMPONENTI - Nuova Palette
   ============================================ */

/* Bottoni */
.btn-grad {
    background-image: var(--grad-violo-blu) !important;
    border: none !important;
    color: #fff !important;
    transition: all var(--transition-base);
}

.btn-grad:hover {
    background-image: var(--grad-blu-violo) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-azzurro-md);
}

.btn-azzurro {
    background-color: var(--color-azzurro) !important;
    border-color: var(--color-azzurro) !important;
    color: var(--color-violo-dark) !important;
    transition: all var(--transition-base);
}

.btn-azzurro:hover {
    background-color: var(--color-azzurro-light) !important;
    border-color: var(--color-azzurro-light) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-azzurro-sm);
}

.btn-outline-azzurro {
    background-color: transparent !important;
    border-color: var(--color-azzurro) !important;
    color: var(--color-azzurro) !important;
    transition: all var(--transition-base);
}

.btn-outline-azzurro:hover {
    background-color: var(--color-azzurro) !important;
    color: var(--color-violo-dark) !important;
}

/* Badge */
.badge-violo {
    background-color: var(--color-violo) !important;
    color: #fff !important;
}

.badge-blu {
    background-color: var(--color-blu) !important;
    color: #fff !important;
}

.badge-azzurro {
    background-color: var(--color-azzurro) !important;
    color: var(--color-violo-dark) !important;
}

/* Card con nuova palette */
.card-violo {
    background: var(--color-violo-10);
    border: 1px solid var(--color-violo-15);
    border-radius: 16px;
    transition: all var(--transition-base);
}

.card-violo:hover {
    background: var(--color-violo-15);
    border-color: var(--color-violo-25);
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.card-blu {
    background: var(--color-blu-10);
    border: 1px solid var(--color-blu-15);
    border-radius: 16px;
    transition: all var(--transition-base);
}

.card-blu:hover {
    background: var(--color-blu-15);
    border-color: var(--color-blu-25);
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

/* Link con hover azzurro */
.link-azzurro {
    color: var(--color-azzurro) !important;
    transition: color var(--transition-base);
}

.link-azzurro:hover {
    color: var(--color-azzurro-light) !important;
}

/* Icone con nuova palette */
.icon-violo { color: var(--color-violo) !important; }
.icon-blu { color: var(--color-blu) !important; }
.icon-azzurro { color: var(--color-azzurro) !important; }

/* ============================================
   GLASSMORPHISM - Nuova Palette
   ============================================ */

.glass-violo {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--border-color) !important;
}

.glass-violo-light {
    background: var(--glass-bg-light) !important;
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border: 1px solid var(--border-color-light) !important;
}

.glass-blu {
    background: rgba(2, 63, 160, 0.82) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--border-color) !important;
}

/* ============================================
   ANIMAZIONI - Nuova Palette
   ============================================ */

@keyframes pulse-violo {
    0%, 100% { box-shadow: 0 0 0 0 rgba(43, 1, 91, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(43, 1, 91, 0); }
}

@keyframes pulse-azzurro {
    0%, 100% { box-shadow: 0 0 0 0 rgba(137, 230, 239, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(137, 230, 239, 0); }
}

.animate-pulse-violo {
    animation: pulse-violo 2s infinite;
}

.animate-pulse-azzurro {
    animation: pulse-azzurro 2s infinite;
}

/* ============================================
   SELEZIONE TESTO - Nuova Palette
   ============================================ */

::selection {
    background: var(--color-azzurro-25);
    color: var(--color-violo-dark);
}

::-moz-selection {
    background: var(--color-azzurro-25);
    color: var(--color-violo-dark);
}

/* ============================================
   SCROLLBAR - Nuova Palette
   ============================================ */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-violo-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--color-blu);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-azzurro);
}

/* ============================================
   FOCUS STATES - Nuova Palette
   ============================================ */

:focus-visible {
    outline: 2px solid var(--color-azzurro);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--color-azzurro);
    outline-offset: 2px;
}