:root,
:root[data-color-theme="classic"] {
    --accent-300: #67e8f9;
    --accent-500: #0ea5e9;
    --accent-600: #0284c7;
    --accent-700: #0369a1;
    --hero-start: #0f4c81;
    --hero-mid: #1476a6;
    --hero-end: #19a0c5;
    --hero-shadow-rgb: 8, 47, 73;
    --login-brand-a: #0f4c81;
    --login-brand-b: #146da0;
    --login-brand-c: #1fb0df;
    --table-head-bg: #1696cf;
    --table-head-text: #f8fbff;
    --table-head-border: #0b79a9;
    --table-row-alt: color-mix(in srgb, var(--accent-500) 4%, var(--table-row));
    --table-hover: color-mix(in srgb, var(--accent-500) 11%, var(--table-row));
    --table-badge-bg: color-mix(in srgb, var(--accent-500) 10%, var(--bg-1));
    --table-badge-border: color-mix(in srgb, var(--accent-500) 28%, var(--border));
    --table-badge-text: color-mix(in srgb, var(--accent-700) 70%, var(--text-0));
}

:root[data-color-theme="emerald"] {
    --accent-300: #6ee7b7;
    --accent-500: #10b981;
    --accent-600: #059669;
    --accent-700: #047857;
    --hero-start: #0b5d4b;
    --hero-mid: #0f8a67;
    --hero-end: #22c58b;
    --hero-shadow-rgb: 4, 120, 87;
    --login-brand-a: #0b5d4b;
    --login-brand-b: #0f8a67;
    --login-brand-c: #22c58b;
    --table-head-bg: #0f9a73;
    --table-head-text: #f8fffb;
    --table-head-border: #0c7859;
    --table-row-alt: color-mix(in srgb, var(--accent-500) 4%, var(--table-row));
    --table-hover: color-mix(in srgb, var(--accent-500) 12%, var(--table-row));
    --table-badge-bg: color-mix(in srgb, var(--accent-500) 10%, var(--bg-1));
    --table-badge-border: color-mix(in srgb, var(--accent-500) 28%, var(--border));
    --table-badge-text: color-mix(in srgb, var(--accent-700) 70%, var(--text-0));
}

:root[data-color-theme="copper"] {
    --accent-300: #fdba74;
    --accent-500: #f97316;
    --accent-600: #ea580c;
    --accent-700: #c2410c;
    --hero-start: #8a3a10;
    --hero-mid: #c35812;
    --hero-end: #f08b31;
    --hero-shadow-rgb: 138, 58, 16;
    --login-brand-a: #8a3a10;
    --login-brand-b: #c35812;
    --login-brand-c: #f08b31;
    --table-head-bg: #d86c1d;
    --table-head-text: #fffaf6;
    --table-head-border: #b75714;
    --table-row-alt: color-mix(in srgb, var(--accent-500) 5%, var(--table-row));
    --table-hover: color-mix(in srgb, var(--accent-500) 13%, var(--table-row));
    --table-badge-bg: color-mix(in srgb, var(--accent-500) 11%, var(--bg-1));
    --table-badge-border: color-mix(in srgb, var(--accent-500) 30%, var(--border));
    --table-badge-text: color-mix(in srgb, var(--accent-700) 72%, var(--text-0));
}

:root[data-color-theme="slate"] {
    --accent-300: #cbd5e1;
    --accent-500: #64748b;
    --accent-600: #475569;
    --accent-700: #334155;
    --hero-start: #334155;
    --hero-mid: #475569;
    --hero-end: #7b8ba3;
    --hero-shadow-rgb: 51, 65, 85;
    --login-brand-a: #334155;
    --login-brand-b: #475569;
    --login-brand-c: #7b8ba3;
    --table-head-bg: #64748b;
    --table-head-text: #f8fafc;
    --table-head-border: #49566b;
    --table-row-alt: color-mix(in srgb, var(--accent-500) 6%, var(--table-row));
    --table-hover: color-mix(in srgb, var(--accent-500) 14%, var(--table-row));
    --table-badge-bg: color-mix(in srgb, var(--accent-500) 11%, var(--bg-1));
    --table-badge-border: color-mix(in srgb, var(--accent-500) 30%, var(--border));
    --table-badge-text: color-mix(in srgb, var(--accent-700) 72%, var(--text-0));
}

:root[data-color-theme="pink"] {
    --accent-300: #f9a8d4;
    --accent-500: #ec4899;
    --accent-600: #db2777;
    --accent-700: #be185d;
    --hero-start: #8a1f5a;
    --hero-mid: #b82879;
    --hero-end: #ec4899;
    --hero-shadow-rgb: 138, 31, 90;
    --login-brand-a: #8a1f5a;
    --login-brand-b: #b82879;
    --login-brand-c: #ec4899;
    --table-head-bg: #cf3f8b;
    --table-head-text: #fff8fc;
    --table-head-border: #9e2a68;
    --table-row-alt: color-mix(in srgb, var(--accent-500) 5%, var(--table-row));
    --table-hover: color-mix(in srgb, var(--accent-500) 13%, var(--table-row));
    --table-badge-bg: color-mix(in srgb, var(--accent-500) 11%, var(--bg-1));
    --table-badge-border: color-mix(in srgb, var(--accent-500) 30%, var(--border));
    --table-badge-text: color-mix(in srgb, var(--accent-700) 72%, var(--text-0));
}

.btn-primary {
    --bs-btn-bg: var(--accent-500);
    --bs-btn-border-color: var(--accent-500);
    --bs-btn-hover-bg: var(--accent-600);
    --bs-btn-hover-border-color: var(--accent-600);
    --bs-btn-active-bg: var(--accent-700);
    --bs-btn-active-border-color: var(--accent-700);
}

.btn-outline-primary {
    --bs-btn-color: var(--accent-600);
    --bs-btn-border-color: color-mix(in srgb, var(--accent-500) 70%, white);
    --bs-btn-hover-bg: var(--accent-500);
    --bs-btn-hover-border-color: var(--accent-500);
    --bs-btn-active-bg: var(--accent-600);
    --bs-btn-active-border-color: var(--accent-600);
}

.home-hero__content,
.anag-hero,
.commesse-hero,
.commesse-detail-hero,
.storico-veicolo-hero,
.piazzale-hero,
.mag-hero,
.labels-hero,
.plates-hero,
.users-hero,
.settings-hero,
.stats-hero,
.reminder-console__hero,
.listino-rev-hero,
.clienti-rev-hero,
.dettaglio-cliente-rev-hero,
.scheda-veicolo-rev-hero,
.sedute-rev-hero,
.controllo-seduta-hero,
.controllo-prenotazioni-hero,
.controllo-costi-hero,
.noleggio-rev-hero,
.rev-sim-hero {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, .24), transparent 30%),
        linear-gradient(135deg, var(--hero-start) 0%, var(--hero-mid) 52%, var(--hero-end) 100%) !important;
    box-shadow: 0 24px 56px rgba(var(--hero-shadow-rgb), .18) !important;
}

body.login-body {
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--accent-500) 18%, transparent), transparent 30%),
        radial-gradient(circle at bottom right, color-mix(in srgb, var(--hero-start) 16%, transparent), transparent 34%),
        linear-gradient(180deg, #f4f8fb 0%, #edf2f7 100%);
}

.login-brand-panel {
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.24), transparent 32%),
        radial-gradient(circle at bottom left, rgba(255,255,255,.14), transparent 28%),
        linear-gradient(145deg, var(--login-brand-a) 0%, var(--login-brand-b) 52%, var(--login-brand-c) 100%) !important;
}

:root[data-theme="dark"] body.login-body {
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--accent-500) 20%, transparent), transparent 30%),
        radial-gradient(circle at bottom right, color-mix(in srgb, var(--hero-start) 24%, transparent), transparent 34%),
        linear-gradient(180deg, #0e141c 0%, #151c24 100%);
}