/* ═══════════════════════════════════════════════════════════════
Evitalya Design Tokens v6.0 — Warm Terracotta Premium
Single source of truth for colors, fonts, spacing, and effects.
Import in every HTML:
═══════════════════════════════════════════════════════════════ */
:root {
/* ── Brand ── */
--ev-accent: #B84C2F;
--ev-accent-light: #C9604A;
--ev-accent-dark: #9B3F26;
--ev-accent-soft: rgba(184, 76, 47, 0.07);
--ev-accent-hover: #A3432A;
--ev-accent-glow: rgba(184, 76, 47, 0.15);
/* ── Surfaces ── */
--ev-bg: #FAF8F5;
--ev-bg-card: #FFFFFF;
--ev-bg-elevated: #F3F0EB;
--ev-bg-hover: #EDEBE7;
--ev-bg-subtle: #F7F5F1;
--ev-bg-inset: #F0ECE6;
/* ── Ink ── */
--ev-ink: #1C1A17;
--ev-ink-soft: #5A5550;
--ev-ink-muted: #85807A;
--ev-ink-faint: #B0ACA5;
--ev-ink-ghost: #D0CCC6;
/* ── Borders ── */
--ev-border: #E5E0D8;
--ev-border-strong: #C8C2B8;
--ev-border-soft: #EFEBE5;
--ev-border-accent: rgba(184, 76, 47, 0.18);
/* ── Category colors ── */
--ev-safety: #B07832;
--ev-safety-light: #F8F0E5;
--ev-safety-soft: rgba(176, 120, 50, 0.10);
--ev-enviro: #4A7A5E;
--ev-enviro-light: #EBF2ED;
--ev-enviro-soft: rgba(74, 122, 94, 0.10);
--ev-services: #3D6B8E;
--ev-services-light: #E9EFF5;
--ev-services-soft: rgba(61, 107, 142, 0.10);
--ev-mobility: #7B5E8A;
--ev-mobility-light: #F1ECF3;
--ev-mobility-soft: rgba(123, 94, 138, 0.10);
--ev-realestate: #D4A843;
--ev-realestate-light:#FDF5E6;
--ev-realestate-soft: rgba(212, 168, 67, 0.10);
--ev-natural_risk: #B94A38;
--ev-natural_risk-light: #FDF0ED;
--ev-natural_risk-soft: rgba(185, 74, 56, 0.10);
/* ── Score level colors ── */
--ev-level-excellent: #1B7A3D;
--ev-level-good: #3D7A54;
--ev-level-adequate: #B8761C;
--ev-level-poor: #C96B2E;
--ev-level-bad: #B94A38;
--ev-level-terrible: #8B0000;
/* ── Semantic ── */
--ev-success: #1B7A3D;
--ev-warning: #B8761C;
--ev-danger: #B94A38;
--ev-info: #3D6B8E;
/* ── Typography ── */
--ev-font-display: 'DM Serif Display', 'Georgia', serif;
--ev-font-body: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--ev-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* ── Font sizes (fluid scale) ── */
--ev-text-xs: 0.75rem;
--ev-text-sm: 0.8125rem;
--ev-text-base: 0.9375rem;
--ev-text-md: 1rem;
--ev-text-lg: 1.125rem;
--ev-text-xl: 1.3rem;
--ev-text-2xl: 1.625rem;
--ev-text-3xl: 2.1rem;
--ev-text-4xl: 2.8rem;
/* ── Font weights ── */
--ev-weight-light: 300;
--ev-weight-regular: 400;
--ev-weight-medium: 500;
--ev-weight-semibold: 600;
--ev-weight-bold: 700;
/* ── Line heights ── */
--ev-leading-tight: 1.2;
--ev-leading-snug: 1.35;
--ev-leading-normal: 1.6;
--ev-leading-relaxed: 1.75;
/* ── Letter spacing ── */
--ev-tracking-tight: -0.02em;
--ev-tracking-normal: 0;
--ev-tracking-wide: 0.02em;
--ev-tracking-wider: 0.06em;
--ev-tracking-caps: 0.08em;
/* ── Spacing (4px base) ── */
--ev-space-0: 0;
--ev-space-1: 0.25rem; /* 4px */
--ev-space-2: 0.5rem; /* 8px */
--ev-space-3: 0.75rem; /* 12px */
--ev-space-4: 1rem; /* 16px */
--ev-space-5: 1.25rem; /* 20px */
--ev-space-6: 1.5rem; /* 24px */
--ev-space-8: 2rem; /* 32px */
--ev-space-10: 2.5rem; /* 40px */
--ev-space-12: 3rem; /* 48px */
--ev-space-16: 4rem; /* 64px */
--ev-space-20: 5rem; /* 80px */
--ev-space-24: 6rem; /* 96px */
/* ── Radius ── */
--ev-radius-xs: 4px;
--ev-radius-sm: 6px;
--ev-radius-md: 10px;
--ev-radius-lg: 14px;
--ev-radius-xl: 20px;
--ev-radius-2xl: 28px;
--ev-radius-full: 9999px;
/* ── Shadows (warm-tinted) ── */
--ev-shadow-xs: 0 1px 2px rgba(31,29,26,0.04);
--ev-shadow-sm: 0 1px 4px rgba(31,29,26,0.06), 0 1px 2px rgba(31,29,26,0.04);
--ev-shadow-md: 0 4px 16px rgba(31,29,26,0.07), 0 1px 3px rgba(31,29,26,0.04);
--ev-shadow-lg: 0 8px 32px rgba(31,29,26,0.10), 0 2px 6px rgba(31,29,26,0.04);
--ev-shadow-xl: 0 16px 48px rgba(31,29,26,0.12), 0 4px 12px rgba(31,29,26,0.05);
--ev-shadow-accent: 0 4px 20px rgba(184, 76, 47, 0.18);
--ev-shadow-inset: inset 0 1px 3px rgba(31,29,26,0.06);
/* ── Transitions ── */
--ev-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ev-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
/* @deprecated v6.0 motion tokens — usa --ev-duration-* (v6.1) per nuovo code */
--ev-duration-fast: 0.15s; /* deprecated: prefer --ev-duration-quick */
--ev-duration-normal: 0.25s; /* deprecated: prefer --ev-duration-base */
--ev-duration-slow: 0.4s; /* overridden by v6.1 below to 480ms */
/* ── Z-index scale ── */
--ev-z-base: 0;
--ev-z-dropdown: 50;
--ev-z-sticky: 100;
--ev-z-overlay: 200;
--ev-z-modal: 300;
--ev-z-toast: 400;
--ev-z-top: 500;
/* ── Container ── */
--ev-container-sm: 640px;
--ev-container-md: 768px;
--ev-container-lg: 1024px;
--ev-container-xl: 1200px;
--ev-container-2xl: 1400px;
/* ── Backward compat aliases ── */
--ev-transition: var(--ev-duration-normal) ease;
--ev-transition-slow: var(--ev-duration-slow) ease;
/* ── Motion (v6.1) ── */
--ev-duration-instant: 80ms;
--ev-duration-quick: 160ms;
--ev-duration-base: 240ms;
--ev-duration-moderate: 360ms;
/* NOTE: --ev-duration-slow redefined from 0.4s (v6.0) → 480ms (v6.1) by intentional cascade override */
--ev-duration-slow: 480ms;
--ev-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ev-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ev-ease-emph: cubic-bezier(0.34, 1.56, 0.64, 1);
/* ── Density (v6.1) — modulate padding/gap by context ── */
--ev-density-pad-sm: 0.5rem;
--ev-density-pad-md: 0.85rem;
--ev-density-pad-lg: 1.25rem;
--ev-density-gap-sm: 0.4rem;
--ev-density-gap-md: 0.7rem;
--ev-density-gap-lg: 1.1rem;
}
/* ═══════════════════════════════════════════════════════════════
Dark Mode
═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
--ev-accent: #D4673F;
--ev-accent-light: #E07A52;
--ev-accent-dark: #B84C2F;
--ev-accent-soft: rgba(212, 103, 63, 0.10);
--ev-accent-hover: #C45A3A;
--ev-accent-glow: rgba(212, 103, 63, 0.20);
--ev-bg: #141210;
--ev-bg-card: #1C1A17;
--ev-bg-elevated: #242220;
--ev-bg-hover: #2C2A27;
--ev-bg-subtle: #1A1816;
--ev-bg-inset: #121010;
--ev-ink: #F0EDE8;
--ev-ink-soft: #B8B3AB;
--ev-ink-muted: #85807A;
--ev-ink-faint: #5A5550;
--ev-ink-ghost: #3A3630;
--ev-border: #322E2A;
--ev-border-strong: #4A4540;
--ev-border-soft: #282520;
--ev-border-accent: rgba(212, 103, 63, 0.20);
--ev-safety-light: #2A2318;
--ev-enviro-light: #1A2A20;
--ev-services-light: #1A2530;
--ev-mobility-light: #25202A;
--ev-realestate-light:#2A2518;
--ev-natural_risk-light: #2A1A18;
--ev-shadow-xs: 0 1px 2px rgba(0,0,0,0.12);
--ev-shadow-sm: 0 1px 4px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.12);
--ev-shadow-md: 0 4px 16px rgba(0,0,0,0.22), 0 1px 3px rgba(0,0,0,0.12);
--ev-shadow-lg: 0 8px 32px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.14);
--ev-shadow-xl: 0 16px 48px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.18);
--ev-shadow-accent: 0 4px 24px rgba(212, 103, 63, 0.25);
--ev-level-excellent: #34D399;
--ev-level-good: #6EE7B7;
--ev-level-adequate: #FCD34D;
--ev-level-poor: #FB923C;
--ev-level-bad: #F87171;
--ev-level-terrible: #FCA5A5;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--ev-accent: #D4673F;
--ev-accent-light: #E07A52;
--ev-accent-dark: #B84C2F;
--ev-accent-soft: rgba(212, 103, 63, 0.10);
--ev-accent-hover: #C45A3A;
--ev-accent-glow: rgba(212, 103, 63, 0.20);
--ev-bg: #141210;
--ev-bg-card: #1C1A17;
--ev-bg-elevated: #242220;
--ev-bg-hover: #2C2A27;
--ev-bg-subtle: #1A1816;
--ev-bg-inset: #121010;
--ev-ink: #F0EDE8;
--ev-ink-soft: #B8B3AB;
--ev-ink-muted: #85807A;
--ev-ink-faint: #5A5550;
--ev-ink-ghost: #3A3630;
--ev-border: #322E2A;
--ev-border-strong: #4A4540;
--ev-border-soft: #282520;
--ev-border-accent: rgba(212, 103, 63, 0.20);
--ev-safety-light: #2A2318;
--ev-enviro-light: #1A2A20;
--ev-services-light: #1A2530;
--ev-mobility-light: #25202A;
--ev-realestate-light:#2A2518;
--ev-natural_risk-light: #2A1A18;
--ev-shadow-xs: 0 1px 2px rgba(0,0,0,0.12);
--ev-shadow-sm: 0 1px 4px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.12);
--ev-shadow-md: 0 4px 16px rgba(0,0,0,0.22), 0 1px 3px rgba(0,0,0,0.12);
--ev-shadow-lg: 0 8px 32px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.14);
--ev-shadow-xl: 0 16px 48px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.18);
--ev-shadow-accent: 0 4px 24px rgba(212, 103, 63, 0.25);
--ev-level-excellent: #34D399;
--ev-level-good: #6EE7B7;
--ev-level-adequate: #FCD34D;
--ev-level-poor: #FB923C;
--ev-level-bad: #F87171;
--ev-level-terrible: #FCA5A5;
}
}
/* ═══════════════════════════════════════════════════════════════
Utility Classes
═══════════════════════════════════════════════════════════════ */
/* ── Accessibility: focus visible (v6.1 a11y) ── */
*:focus-visible {
outline: 2px solid var(--ev-accent);
outline-offset: 2px;
border-radius: 4px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline-offset: 3px;
}
/* ── Accessibility: skip to content (v6.1 a11y) ── */
.ev-skip-link,
.skip-link {
position: absolute;
top: -100px;
left: 50%;
transform: translateX(-50%);
background: var(--ev-accent);
color: #fff;
padding: 0.5rem 1.5rem;
border-radius: var(--ev-radius-sm);
font-family: var(--ev-font-body);
font-size: var(--ev-text-sm);
font-weight: 600;
text-decoration: none;
z-index: 10000;
transition: top var(--ev-duration-quick, 0.2s) var(--ev-ease-out, ease-out);
}
.ev-skip-link:focus,
.skip-link:focus { top: 8px; }
/* ── Accessibility: testo per soli screen reader ──
Utilita' generale: rende un testo leggibile agli screen reader e invisibile
a schermo. Non si usa display:none ne' visibility:hidden — toglierebbero
l'elemento anche agli screen reader, cioe' esattamente al pubblico a cui
serve.
[2026-09-08] Questo commento diceva che serviva «perche' /account non aveva
alcun h1». Non era piu' vero: l'unico uso era un h1 dentro `navigate()` di
account-app.js che RADDOPPIAVA il titolo di ogni scheda, ed e' stato tolto.
Un commento che spiega un uso che non c'e' piu' e' il modo in cui un
difetto sopravvive a chi rilegge. La classe resta perche' e' un'utilita'
buona, non perche' la usi qualcuno: oggi non la usa nessuno. */
.ev-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ── Accessibility: minimum touch target ── */
@media (pointer: coarse) {
button, a, [role="button"], input[type="submit"], input[type="button"] {
min-height: 44px;
min-width: 44px;
}
/* [2026-08-11] Le caselle di spunta mancavano da questo elenco, e sono il
caso peggiore: 16-18 px sul consenso ai termini, cioe' l'ultimo gesto
prima di pagare, col pollice. Non si allarga il quadratino (cambierebbe
il disegno di ogni modulo): si allarga l'area sensibile con un
pseudo-elemento centrato, che e' quello che conta per il dito. */
input[type="checkbox"], input[type="radio"] {
position: relative;
}
input[type="checkbox"]::before, input[type="radio"]::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 44px;
height: 44px;
transform: translate(-50%, -50%);
}
}
/* ── Accessibility: reduced motion ── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
:root {
--ev-duration-instant: 0.01ms;
--ev-duration-quick: 0.01ms;
--ev-duration-base: 0.01ms;
--ev-duration-moderate: 0.01ms;
--ev-duration-slow: 0.01ms;
--ev-duration-fast: 0.01ms;
--ev-duration-normal: 0.01ms;
}
}
/* ── Common component tokens ── */
.ev-card {
background: var(--ev-bg-card);
border: 1px solid var(--ev-border);
border-radius: var(--ev-radius-lg);
box-shadow: var(--ev-shadow-sm);
transition: box-shadow var(--ev-duration-normal) ease, border-color var(--ev-duration-normal) ease;
}
.ev-card:hover {
box-shadow: var(--ev-shadow-md);
border-color: var(--ev-border-strong);
}
.ev-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.65rem 1.5rem;
font-family: var(--ev-font-body);
font-size: var(--ev-text-sm);
font-weight: var(--ev-weight-semibold);
line-height: 1;
border-radius: var(--ev-radius-md);
border: none;
cursor: pointer;
/* lista esplicita invece di `all`: anima solo proprietà compositabili/leggere,
evita reflow su hover/focus dei bottoni (globali). [glitch-audit 2026-06-01] */
transition: background-color var(--ev-duration-fast) ease,
color var(--ev-duration-fast) ease,
border-color var(--ev-duration-fast) ease,
box-shadow var(--ev-duration-fast) ease,
transform var(--ev-duration-fast) ease,
opacity var(--ev-duration-fast) ease;
text-decoration: none;
white-space: nowrap;
}
.ev-btn-primary {
background: var(--ev-accent);
color: #fff;
}
.ev-btn-primary:hover { background: var(--ev-accent-dark); box-shadow: var(--ev-shadow-accent); }
.ev-btn-secondary {
background: transparent;
color: var(--ev-accent);
border: 1.5px solid var(--ev-border-accent);
}
.ev-btn-secondary:hover { background: var(--ev-accent-soft); }
.ev-btn-ghost {
background: transparent;
color: var(--ev-ink-soft);
}
.ev-btn-ghost:hover { background: var(--ev-bg-hover); color: var(--ev-ink); }
/* ── Badge ── */
.ev-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.2rem 0.6rem;
font-size: var(--ev-text-xs);
font-weight: var(--ev-weight-semibold);
letter-spacing: var(--ev-tracking-wide);
border-radius: var(--ev-radius-full);
text-transform: uppercase;
}
/* ── Score gauge ring ── */
.ev-gauge {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: var(--ev-accent-soft);
border: 2px solid var(--ev-border-accent);
position: relative;
}
.ev-gauge-value {
font-family: var(--ev-font-body);
font-size: var(--ev-text-2xl);
font-weight: var(--ev-weight-bold);
color: var(--ev-accent);
line-height: 1;
}
.ev-gauge-label {
font-size: var(--ev-text-xs);
color: var(--ev-ink-muted);
}
/* ── Category color utilities ── */
.ev-cat-safety { --cat-color: var(--ev-safety); --cat-soft: var(--ev-safety-soft); --cat-light: var(--ev-safety-light); }
.ev-cat-enviro { --cat-color: var(--ev-enviro); --cat-soft: var(--ev-enviro-soft); --cat-light: var(--ev-enviro-light); }
.ev-cat-services { --cat-color: var(--ev-services); --cat-soft: var(--ev-services-soft); --cat-light: var(--ev-services-light); }
.ev-cat-mobility { --cat-color: var(--ev-mobility); --cat-soft: var(--ev-mobility-soft); --cat-light: var(--ev-mobility-light); }
.ev-cat-realestate { --cat-color: var(--ev-realestate); --cat-soft: var(--ev-realestate-soft); --cat-light: var(--ev-realestate-light); }
.ev-cat-natural_risk{ --cat-color: var(--ev-natural_risk); --cat-soft: var(--ev-natural_risk-soft); --cat-light: var(--ev-natural_risk-light); }
/* ── Auth state visibility helpers (v6.1) ── */
/* Difensivo: anche se JS di app-shell fallisce/ritarda, gli elementi marcati
come "anon only" si nascondono quando e viceversa. */
[data-auth="user"] [data-auth-show="anon"],
[data-auth="user"] .signup-cta-wrap,
[data-auth="user"] #sub-plans-mini,
[data-auth="user"] #sb-anon-block {
display: none !important;
}
[data-auth="anon"] [data-auth-show="user"],
[data-auth="anon"] #sub-credits-info,
[data-auth="anon"] #sb-user-block {
display: none !important;
}
/* ── Font loading hint ── */
/* Import in HTML:
*/