/* ============================================================ VARIABILI GLOBALI — unica fonte di verità per colori, font, spaziature e raggi degli angoli. COME MODIFICARE I COLORI: Cambia i valori qui sotto (es. --colore-accento) e si aggiornano automaticamente su tutte le pagine del sito. Il tema di default è "chiaro" (:root qui sotto). Il blocco [data-theme="dark"] più in basso definisce la versione scura, attivata dal pulsante toggle (vedi js/main.js) — palette "slate + sky" modellata su lorenzocantini.com. ============================================================ */ :root { /* --- Colori: tema chiaro (default) --- */ --colore-sfondo: #ffffff; --colore-sfondo-alt: #f8fafc; --colore-sfondo-card: #ffffff; --colore-testo: #1e293b; --colore-testo-secondario: #475569; --colore-bordo: #e2e8f0; --colore-accento: #0284c7; --colore-accento-hover: #0369a1; --colore-accento-testo: #ffffff; --ombra-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px -12px rgba(15, 23, 42, 0.12); /* Il terzo strato è il bagliore azzurrino sfocato al passaggio del mouse sulle card, oltre all'ombra normale più marcata. */ --ombra-card-hover: 0 1px 2px rgba(15, 23, 42, 0.04), 0 20px 40px -14px rgba(15, 23, 42, 0.16), 0 0 26px -4px rgba(2, 132, 199, 0.35); --ombra-bottone: 0 8px 20px -8px rgba(2, 132, 199, 0.4); /* --- Tipografia --- Inter, caricato da Google Fonts (vedi il nell' di index.html). Se Inter non fosse disponibile, il browser usa il font di sistema più simile come ripiego. */ --font-testo: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace; /* --- Scala tipografica fluida (si adatta allo schermo) --- */ --testo-xs: clamp(0.78rem, 0.74rem + 0.2vw, 0.85rem); --testo-sm: clamp(0.9rem, 0.86rem + 0.2vw, 1rem); --testo-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --testo-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); --testo-xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem); --testo-2xl: clamp(2.1rem, 1.7rem + 2vw, 3.25rem); /* --- Spaziature (scala coerente) --- */ --spazio-xs: 0.5rem; --spazio-sm: 1rem; --spazio-md: 1.75rem; --spazio-lg: 3rem; --spazio-xl: 5rem; --spazio-2xl: 8rem; /* --- Layout --- */ --larghezza-contenuto: 1100px; --raggio: 20px; --raggio-sm: 12px; /* Angoli "a pillola" (completamente arrotondati): tag, badge, bottoni tondi, barra hamburger. */ --raggio-badge: 999px; /* --- Transizioni: morbide, mai invasive --- */ --transizione-rapida: 150ms ease; --transizione-base: 250ms cubic-bezier(0.22, 1, 0.36, 1); } /* --- Tema scuro: attivato aggiungendo data-theme="dark" su --- */ [data-theme="dark"] { --colore-sfondo: #0b1120; --colore-sfondo-alt: #111827; --colore-sfondo-card: #131c2e; --colore-testo: #f1f5f9; --colore-testo-secondario: #94a3b8; --colore-bordo: #1f2a3d; --colore-accento: #38bdf8; --colore-accento-hover: #7dd3fc; --colore-accento-testo: #04121f; --ombra-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px -12px rgba(0, 0, 0, 0.55); --ombra-card-hover: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 36px -12px rgba(56, 189, 248, 0.18), 0 0 30px -4px rgba(56, 189, 248, 0.4); --ombra-bottone: 0 8px 20px -8px rgba(56, 189, 248, 0.45); }