/* ============================================================ INNOVAZIONE DIGITALE IMPRESE — Design Tokens Versione 1.0 · Maggio 2026 ------------------------------------------------------------ Sorgente di verità per colori, tipografia, spaziature, raggi, ombre e motion per tutti i siti e le app IDI. Importa questo file PRIMA di ogni altro CSS dell'app. ============================================================ */ /* ---- Font ---- */ /* Carica Montserrat (400,500,600,700,800,900) via Google Fonts o self-host. */ :root { /* ======================================================== 1. COLORE — palette brand ======================================================== */ /* Brand primari */ --idi-teal: #005A69; /* colore primario, headline, superfici scure */ --idi-orange: #F5A02C; /* accento, CTA, evidenziazioni */ --idi-cream: #E2DAC9; /* neutro caldo, superfici decorative */ /* Varianti teal */ --idi-teal-deep: #00424E; /* hover su superfici teal, testo su cream */ --idi-teal-700: #014E5B; --idi-teal-soft: #E5EEF0; /* sfondo tenue, badge, hover chiari */ /* Varianti orange */ --idi-orange-deep: #DB8A18; /* hover CTA */ --idi-orange-soft: #FDE8C9; /* sfondo tenue, badge */ /* Neutri caldi (derivati dal cream) */ --idi-cream-soft: #F4EFE6; /* sfondo sezioni alternate */ --idi-paper: #FBFAF7; /* sfondo pagina di default */ --idi-white: #FFFFFF; /* Inchiostro / testo */ --idi-ink: #14242A; /* testo primario su chiaro */ --idi-ink-mute: #5C6A6F; /* testo secondario, didascalie */ --idi-ink-faint: #8A969B; /* placeholder, testo disabilitato */ /* Linee e bordi */ --idi-line: rgba(0, 90, 105, 0.14); /* bordi su chiaro */ --idi-line-strong: rgba(0, 90, 105, 0.28); --idi-line-on-dark: rgba(255, 255, 255, 0.15); /* Stati semantici (armonizzati con la palette) */ --idi-success: #1F8A5B; --idi-success-soft:#E2F2EA; --idi-warning: #F5A02C; /* = orange */ --idi-warning-soft:#FDE8C9; --idi-danger: #C8453B; --idi-danger-soft: #F8E2E0; --idi-info: #005A69; /* = teal */ --idi-info-soft: #E5EEF0; /* Focus ring (accessibilità) */ --idi-focus-ring: 0 0 0 3px rgba(245, 160, 44, 0.45); /* ======================================================== 2. TIPOGRAFIA ======================================================== */ --idi-font-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Pesi — il brand vive su 700/800 per i titoli, 400/500 per il corpo */ --idi-fw-regular: 400; --idi-fw-medium: 500; --idi-fw-semibold: 600; --idi-fw-bold: 700; --idi-fw-extra: 800; --idi-fw-black: 900; /* Scala tipografica WEB — fluida (clamp min↔max). Su slide si usano dimensioni molto maggiori; per web/app questa scala è ottimizzata per leggibilità a schermo. */ --idi-text-xs: 0.75rem; /* 12px — micro-label, legenda */ --idi-text-sm: 0.875rem; /* 14px — caption, helper text */ --idi-text-base: 1rem; /* 16px — corpo di default */ --idi-text-md: 1.125rem; /* 18px — corpo enfatizzato, lead piccolo */ --idi-text-lg: 1.25rem; /* 20px — sottotitoli */ --idi-text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); /* 24→32 */ --idi-text-2xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem); /* 30→44 */ --idi-text-3xl: clamp(2.5rem, 1.8rem + 3vw, 4rem); /* 40→64 — hero */ --idi-text-4xl: clamp(3rem, 2rem + 5vw, 6rem); /* 48→96 — display */ /* Eyebrow / kicker — label maiuscola tracciata sopra i titoli */ --idi-eyebrow-size: var(--idi-text-sm); --idi-eyebrow-spacing: 0.22em; /* Line-height */ --idi-leading-tight: 1.05; /* display, hero */ --idi-leading-snug: 1.2; /* titoli */ --idi-leading-normal: 1.5; /* corpo */ --idi-leading-relaxed: 1.65; /* corpo lungo */ /* Letter-spacing */ --idi-tracking-tight: -0.02em; /* titoli grandi */ --idi-tracking-snug: -0.01em; --idi-tracking-normal: 0; --idi-tracking-wide: 0.04em; /* eyebrow, label */ --idi-tracking-wider: 0.08em; /* lettering "I M P R E S E" */ /* ======================================================== 3. SPAZIATURA — scala 4px ======================================================== */ --idi-space-0: 0; --idi-space-1: 0.25rem; /* 4 */ --idi-space-2: 0.5rem; /* 8 */ --idi-space-3: 0.75rem; /* 12 */ --idi-space-4: 1rem; /* 16 */ --idi-space-5: 1.5rem; /* 24 */ --idi-space-6: 2rem; /* 32 */ --idi-space-7: 2.5rem; /* 40 */ --idi-space-8: 3rem; /* 48 */ --idi-space-9: 4rem; /* 64 */ --idi-space-10: 5rem; /* 80 */ --idi-space-12: 7.5rem; /* 120 — margini di sezione desktop */ /* Larghezza contenuto */ --idi-container: 1200px; --idi-container-wide: 1400px; --idi-container-text: 68ch; /* misura ottimale per la lettura */ /* ======================================================== 4. RAGGI — il brand è SQUADRATO. Card e superfici hanno angoli vivi o appena ammorbiditi. Le forme PILLOLA (border-radius pieno) sono riservate all'identità: il motivo del logo, i tag, i pallini, le CTA pill. ======================================================== */ --idi-radius-none: 0; --idi-radius-xs: 2px; --idi-radius-sm: 4px; /* input, card piccole */ --idi-radius-md: 6px; /* card, default */ --idi-radius-lg: 10px; /* contenitori grandi */ --idi-radius-pill: 999px; /* SOLO elementi-identità: tag, dot, pill button */ /* ======================================================== 5. OMBRE — discrete, mai pesanti. Il brand preferisce bordi netti (--idi-line) alle ombre. Usare con parsimonia. ======================================================== */ --idi-shadow-sm: 0 1px 2px rgba(20, 36, 42, 0.06); --idi-shadow-md: 0 4px 16px rgba(20, 36, 42, 0.08); --idi-shadow-lg: 0 12px 40px rgba(20, 36, 42, 0.12); --idi-shadow-focus: var(--idi-focus-ring); /* ======================================================== 6. MOTION ======================================================== */ --idi-ease: cubic-bezier(0.4, 0, 0.2, 1); --idi-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --idi-dur-fast: 120ms; --idi-dur-base: 200ms; --idi-dur-slow: 360ms; /* ======================================================== 7. Z-INDEX ======================================================== */ --idi-z-base: 0; --idi-z-sticky: 100; --idi-z-overlay: 800; --idi-z-modal: 900; --idi-z-toast: 1000; } /* ============================================================ DARK / TEAL SURFACE Applica .idi-on-teal a una sezione con sfondo teal per ribaltare automaticamente i colori del testo. ============================================================ */ .idi-on-teal { --idi-ink: #FFFFFF; --idi-ink-mute: rgba(255, 255, 255, 0.72); --idi-ink-faint:rgba(255, 255, 255, 0.5); --idi-line: var(--idi-line-on-dark); background: var(--idi-teal); color: #fff; }