/* ========================================================================== MAILPULSE — Design Tokens Sostituisce integralmente public/refactor/css/variables.css. Mantiene TUTTI i nomi di variabile della versione precedente: nessun altro foglio CSS va modificato. Cambiano solo i valori, più due token nuovi (--font-display, --color-pulse) e la rampa grafici. Palette Mailpulse Pulse Teal #007D8A azione primaria, link, nav attiva, focus Pulse Mint #00D49A "vivo": in invio, live, crescita, consegna Deep Ink #0F1E2E testo e superfici scure (condiviso con TID) Signal Coral #E85C3F attenzione massima, una volta per schermata Ice #F2F5F8 sfondo pagina, neutro freddo Il blu TID #0033A0 NON è un colore di interfaccia: solo lockup "by TID". ========================================================================== */ :root { /* ================================================================ COLORS ================================================================ */ /* Neutrals */ --color-white: #FFFFFF; --color-black: #000000; /* Text hierarchy — grafite freddo, non nero puro */ --color-text: #0F1E2E; /* titoli, corpo, etichette */ --color-text-secondary: #2A3D52; /* testo secondario */ --color-text-muted: #455667; /* testo di supporto, icone */ --color-text-disabled: #8B9AAC; /* disabilitato, placeholder */ /* Backgrounds */ --color-page-bg: #F2F5F8; /* sfondo pagina */ --color-card-bg: #FFFFFF; /* card, pannelli, modali */ --color-hover-bg: #F8FAFC; /* hover */ --color-active-bg: #EBEFF4; /* premuto */ --color-subtle-bg: #F8FAFC; /* sezioni tenui */ --color-bg-subtle: #F8FAFC; /* alias */ --color-banner-bg: #EBEFF4; /* banner di annuncio */ /* Borders */ --color-border: #DDE3EA; --color-border-strong: #C3CCD6; --color-border-focus: #0E97A3; /* Brand / Primary action — Pulse Teal Il nome resta --color-teal per non rompere i 25 fogli che lo usano. */ --color-teal: #007D8A; --color-teal-hover: #00636E; --color-teal-active: #004E58; --color-teal-ring: rgba(0, 125, 138, 0.18); --color-teal-light: #E4F5F6; /* NUOVO — Pulse Mint: tutto ciò che è vivo e in movimento. Usare per: badge "in invio", automazione attiva, warmup, crescita, barre di consegna, accento su superfici scure. */ --color-pulse: #00D49A; --color-pulse-strong: #00926B; --color-pulse-light: #E4FAF3; --color-pulse-ring: rgba(0, 212, 154, 0.22); /* Il pulsante principale (CTA) di tutto il prodotto e del sito: il verde del marchio con l'inchiostro scuro. NON --color-teal: quello e' l'accento dell'account e cambia con lo schema colore — su «grigio» diventa blu notte, e i pulsanti principali cambiavano colore da un account all'altro. --color-pulse nessuno schema lo ridefinisce. L'inchiostro scuro regge sul verde in entrambi i temi (bianco su --color-pulse da' 1,9:1). Nel tema scuro --color-pulse schiarisce da solo, quindi qui non serve ridefinire niente. */ --cta-bg: var(--color-pulse); --cta-bg-hover: color-mix(in srgb, var(--color-pulse) 88%, #000); --cta-ink: #08121A; --cta-ring: var(--color-pulse-ring); /* NUOVO — Signal Coral: attenzione massima, una volta per schermata. */ --color-signal: #E85C3F; --color-signal-strong: #C13F2E; --color-signal-light: #FDEAE4; /* Status — Success */ --color-success: #0E8F5F; --color-success-dark: #0A6E49; --color-success-bg: #E6F6EE; /* Status — Error */ --color-error: #D1382F; --color-error-dark: #A82A23; --color-error-bg: #FBEAE8; --color-error-ring: rgba(209, 56, 47, 0.16); /* Status — Warning */ --color-warning: #C2760B; --color-warning-dark: #9A5C06; --color-warning-bg: #FBF1DF; /* Status — Info */ --color-info: #0E97A3; --color-info-dark: #00636E; --color-info-bg: #E4F5F6; /* ================================================================ LIVELLI DI SEGNALAZIONE ---------------------------------------------------------------- I quattro colori qui sopra dicono di che TINTA e' un messaggio. Questi dicono che COSA SIGNIFICA, ed e' la sola cosa che chi scrive una schermata deve scegliere. La distinzione che conta e' una sola: il messaggio impedisce di proseguire, oppure no? --fb-blocking-* L'azione NON si completa finche' non si rimedia. Rosso. Il testo dice cosa fare, non solo cosa e' andato storto. --fb-warning-* Si puo' proseguire, ma c'e' una conseguenza che va conosciuta. Ambra. Il testo dice qual e' la conseguenza, e non usa il tono dell'errore. --fb-info-* Contesto. Nessuna conseguenza. Teal. --fb-success-* E' andata. Verde. PERCHE' ESISTONO Il messaggio «questo mittente non e' verificato» e l'avviso «l'oggetto viene tagliato su cinque inbox» avevano lo stesso identico ambra. Il primo, sui piani che non ammettono mittenti non verificati, impedisce l'invio; il secondo e' un'osservazione su cui si puo' benissimo passare oltre. Due conseguenze opposte, un colore solo: chi guarda impara a ignorarli entrambi. Il livello non e' sempre una proprieta' del messaggio: lo stesso testo sul mittente blocca o no a seconda del piano. Per questo i componenti lo ricevono da fuori invece di deciderlo da soli. Non si aggiungono livelli. Quattro sono gia' il massimo che una persona distingue a colpo d'occhio senza leggere. ================================================================ */ --fb-blocking: var(--color-error); --fb-blocking-ink: var(--color-error-dark); --fb-blocking-bg: var(--color-error-bg); --fb-warning: var(--color-warning); --fb-warning-ink: var(--color-warning-dark); --fb-warning-bg: var(--color-warning-bg); --fb-info: var(--color-info); --fb-info-ink: var(--color-info-dark); --fb-info-bg: var(--color-info-bg); --fb-success: var(--color-success); --fb-success-ink: var(--color-success-dark); --fb-success-bg: var(--color-success-bg); /* Chart colors — costruiti sull'asse teal→mint con due freddi e due caldi. Ordine pensato per essere leggibile in serie: 1 e 2 sono i protagonisti. */ --chart-1: #007D8A; /* Pulse Teal */ --chart-2: #00D49A; /* Pulse Mint */ --chart-3: #4C7FC4; /* blu freddo */ --chart-4: #E85C3F; /* corallo */ --chart-5: #7C6BB5; /* indaco tenue */ --chart-6: #C2760B; /* ambra */ --chart-7: #2ABFC8; /* ciano */ --chart-8: #5C8F6E; /* verde salvia */ /* Chart background tints — tinta chiara della serie corrispondente */ --chart-1-bg: #E4F5F6; --chart-2-bg: #E4FAF3; --chart-3-bg: #EAF0F9; --chart-4-bg: #FDEAE4; --chart-5-bg: #EFEDF7; --chart-6-bg: #FBF1DF; /* 7 e 8 mancavano sia qui sia nel file precedente: usati 12 volte senza fallback, quindi risolvevano a "invalido" (sfondo trasparente). */ --chart-7-bg: #E4F7F8; --chart-8-bg: #EDF3EF; /* ================================================================ MESSENGER CHANNEL TONES Alias sulla rampa grafici + ink dedicato per il testo su tinta 18%. ================================================================ */ --msg-ch-email: var(--chart-3); --msg-ch-email-ink: #2C5282; /* ── SMS: indaco, non piu' menta ─────────────────────────────────── SMS e WhatsApp erano DUE VERDI — menta (#00D49A) e salvia (#5C8F6E) — e in una colonna di pastiglie piccole non si distinguevano: la stessa macchia di colore, con dentro due parole diverse. Il colore serviva a riconoscere il canale a colpo d'occhio, e non lo faceva. L'indaco e' l'unica tinta della rampa che non confligge con nessun altro canale: l'email e' blu freddo, Telegram ciano, WhatsApp verde. */ --msg-ch-sms: var(--chart-5); --msg-ch-sms-ink: #443A78; /* ── WhatsApp: il verde del MARCHIO ───────────────────────────────── #25D366 e' quello di WhatsApp, e qui e' la scelta giusta per la stessa ragione per cui l'icona e' quella: il canale si riconosce dal marchio prima che dal nome. L'inchiostro e' piu' scuro della tinta perche' su una pastiglia al 18% il verde puro non si legge. */ --msg-ch-wa: #25D366; --msg-ch-wa-ink: #0F6B36; --msg-ch-tg: var(--chart-7); --msg-ch-tg-ink: #0B5A69; --msg-ch-multi: var(--chart-1); --msg-ch-multi-ink: #00323A; /* ================================================================ CONVERSATION BUBBLE TONES ================================================================ */ --bubble-tone-sms: #007D8A; --bubble-tone-whatsapp: #128C7E; /* allineato al marchio WhatsApp */ --bubble-tone-telegram: #0088CC; /* allineato al marchio Telegram */ --bubble-tone-email: #647588; /* grafite: email = canale zero */ --bubble-bg-in: var(--color-subtle-bg); --bubble-bg-out: #E4FAF3; /* mint chiarissimo */ --bubble-radius: 14px; --bubble-radius-tail: 4px; --bubble-max-width: min(70%, 480px); /* ================================================================ SVG ILLUSTRATION TOKENS — grafite freddo, mai grigio neutro ================================================================ */ --illust-stroke: #B4BFCC; --illust-stroke-bold: #8B9AAC; --illust-fill: #E8ECF1; --illust-bg: #EBEFF4; --illust-teal: rgba(0, 125, 138, 0.14); --illust-teal-bold: rgba(0, 125, 138, 0.28); --illust-chart-1: rgba(0, 125, 138, 0.16); --illust-chart-2: rgba(0, 212, 154, 0.20); --illust-chart-3: rgba(76, 127, 196, 0.16); --illust-chart-4: rgba(232, 92, 63, 0.16); --illust-chart-5: rgba(124, 107, 181, 0.16); --illust-chart-6: rgba(194, 118, 11, 0.16); /* Overlay */ --color-overlay: rgba(15, 30, 46, 0.48); --color-overlay-heavy: rgba(15, 30, 46, 0.62); /* ================================================================ AI ACCENT PALETTE — tinta chiara + testo scuro della stessa famiglia. Il tema di default passa da violetto a teal: l'AI in Mailpulse parla con la voce del prodotto, non con un colore estraneo. ================================================================ */ --color-ai-violet-bg: #EFEDF7; --color-ai-violet-fg: #5B4E96; --color-ai-teal-bg: #E4F5F6; --color-ai-teal-fg: #00636E; --color-ai-orange-bg: #FDEAE4; --color-ai-orange-fg: #C13F2E; --color-ai-green-bg: #E4FAF3; --color-ai-green-fg: #00926B; --color-ai-indigo-bg: #EAF0F9; --color-ai-indigo-fg: #2C5282; /* ================================================================ TYPOGRAPHY ================================================================ */ --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* NUOVO — solo per: h1 di pagina, valori delle metriche, titoli marketing. Mai su paragrafi, mai sotto i 16px. */ --font-display: "Sora", "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", monospace; /* Size scale */ --text-xs: 11px; --text-sm: 12px; --text-base: 14px; --text-md: 16px; --text-lg: 18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 34px; /* Weights */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 600; --weight-black: 700; /* Line heights */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; /* Letter spacing — nuovi, per i titoli display e le etichette mono */ --tracking-tight: -0.02em; --tracking-wide: 0.06em; --tracking-widest: 0.14em; /* ================================================================ SPACING — base 4px ================================================================ */ --space-0: 0; --space-px: 1px; --space-0-5: 2px; --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-2-5: 10px; --space-3: 12px; --space-3-5: 14px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-11: 44px; --space-12: 48px; --space-14: 56px; --space-16: 64px; /* ================================================================ BORDER RADIUS — squadrato, un solo passo morbido ================================================================ */ --radius-sm: 3px; --radius-input: 6px; /* Il passo intermedio fra campo e card. Serve al flow builder, dove il nodo e i pannelli flottanti sopra il canvas sarebbero troppo squadrati a 6px e troppo morbidi a 12px — la schermata di riferimento li disegna a 8. */ --radius-node: 8px; --radius-card: 12px; --radius-lg: 12px; --radius-full: 9999px; /* ================================================================ SHADOWS — piatto per default: il bordo prima dell'ombra ================================================================ */ --shadow-sm: 0 1px 2px rgba(15, 30, 46, 0.06); --shadow-card: 0 1px 3px rgba(15, 30, 46, 0.07), 0 1px 1px rgba(15, 30, 46, 0.04); --shadow-dropdown: 0 6px 16px rgba(15, 30, 46, 0.09), 0 0 0 1px rgba(15, 30, 46, 0.04); --shadow-modal: 0 18px 40px rgba(15, 30, 46, 0.14); /* NUOVO — anello di focus, da usare con --color-teal-ring */ --shadow-focus: 0 0 0 3px var(--color-teal-ring); /* ================================================================ LAYOUT ================================================================ */ --input-height: 44px; --control-height: 38px; /* NUOVO — controlli in barra e toolbar */ --sidebar-width: 232px; --sidebar-collapsed: 60px; --topbar-height: 56px; --content-max-width: 1240px; /* ================================================================ TRANSITIONS — sicure, mai elastiche ================================================================ */ --transition-fast: 120ms cubic-bezier(0.22, 1, 0.36, 1); --transition-base: 190ms cubic-bezier(0.22, 1, 0.36, 1); --transition-slow: 320ms cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* ================================================================ Z-INDEX — invariato rispetto alla versione precedente ================================================================ */ --z-dropdown: 100; --z-sidebar: 200; --z-topbar: 300; --z-side-panel-backdrop: 350; --z-side-panel: 360; --z-modal-backdrop: 400; --z-modal: 500; --z-toast: 2000; --z-tooltip: 700; /* ================================================================ SIDEBAR — superficie grafite fissa, identica in chiaro e in scuro. Decisione approvata (README FASE 7, punto 2): la sidebar contiene l'area di lavoro e fa risaltare il mint della voce attiva. Sono valori di superficie, non di tema: per questo vivono qui e non come hex dentro layouts.css. ================================================================ */ --sidebar-bg: #0F1E2E; --sidebar-fg: #FFFFFF; --sidebar-fg-muted: #8FA2B1; --sidebar-border: rgba(255, 255, 255, 0.07); --sidebar-hover: rgba(255, 255, 255, 0.06); --sidebar-active-bg: rgba(0, 212, 154, 0.12); --sidebar-active-mark: #00D49A; /* Un gradino sopra il fondo grafite, per gli elementi che devono leggersi come SOLLEVATI e non come sfiorati: il segmento scelto di un controllo segmentato, un campo attivo. Piu' marcato di --sidebar-hover apposta, altrimenti "selezionato" e "il mouse ci passa sopra" hanno lo stesso peso. */ --sidebar-raised: rgba(255, 255, 255, 0.13); /* Superfici che GALLEGGIANO sopra la pagina (menu, dropdown) e che possono trovarsi dentro un contenitore che ha ridefinito i token — la sidebar. Sono specchi calcolati qui su :root, quindi conservano sempre il valore di pagina anche dentro la sidebar scura, e seguono il tema da soli perche' [data-theme="dark"] agisce sullo stesso elemento . */ --menu-bg: var(--color-card-bg); --menu-border: var(--color-border); --menu-fg: var(--color-text); --menu-fg-secondary: var(--color-text-secondary); --menu-fg-muted: var(--color-text-muted); --menu-hover: var(--color-hover-bg); --menu-active: var(--color-active-bg); --menu-accent: var(--color-teal); --menu-accent-light: var(--color-teal-light); /* === MAILPULSE FASE 1 — alias di compatibilità (nessun cambio visivo) === Questi nomi erano referenziati senza fallback e non definiti da nessuna parte: risolvevano a "invalido", cioè al valore ereditato o iniziale. Ogni alias qui sotto vale esattamente ciò che il browser già rende oggi, quindi il delta visivo è zero: si eliminano solo dichiarazioni invalide. Gli alias che CAMBIANO i pixel (--radius-md, --color-primary, --color-surface, --color-danger, ...) sono volutamente esclusi: vanno in un passaggio separato, dopo la verifica delle FASI 1-2. */ --weight-regular: var(--weight-normal); --font-weight-medium: var(--weight-medium); --font-weight-semibold: var(--weight-semibold); --color-text-base: var(--color-text); --color-text-primary: var(--color-text); --transition-normal: var(--transition-base); /* ================================================================ IL CURSORE DEI MENU A TENDINA Un