/* ========================================================================== HostSuite Design Tokens Ricavati dal design system open source di Learnn (learnn-com/designn). Sistema dark-first: fondo quasi nero, testo quasi bianco, accento verde. Uso: includi questo file per primo nel tema, poi referenzia le variabili con var(--hs-...) ovunque al posto di valori hardcoded. Il tema DARK e' quello fedele a Learnn ed e' il default (:root). Il tema LIGHT e' una variante opzionale, attivabile con oppure aggiungendo la classe .theme-light. ========================================================================== */ :root { /* ---------- SCALE COLORE GREZZE (invarianti tra dark e light) ---------- */ /* Gray: la spina dorsale neutra del sistema */ --hs-gray-50: #ffffff; --hs-gray-100: rgba(233, 234, 239, 1); --hs-gray-200: #D0D5DE; --hs-gray-300: rgba(174, 180, 187, 1); --hs-gray-400: rgba(141, 144, 152, 1); --hs-gray-500: #696C73; --hs-gray-600: #46474D; --hs-gray-700: #37393E; --hs-gray-800: #27272C; --hs-gray-900: #121214; /* Green: colore firma di Learnn (accento, success, evidenziazioni) */ --hs-green-50: rgba(240, 253, 248, 1); --hs-green-100: rgba(224, 248, 238, 1); --hs-green-200: rgba(192, 242, 221, 1); --hs-green-300: rgba(161, 237, 208, 1); --hs-green-400: rgba(80, 220, 169, 1); --hs-green-500: rgba(35, 196, 140, 1); /* ~#23C48C, il verde principale */ --hs-green-600: rgba(22, 166, 121, 1); --hs-green-700: rgba(0, 122, 92, 1); --hs-green-800: rgba(18, 84, 67, 1); --hs-green-900: rgba(12, 59, 47, 1); /* Red: errori e stati distruttivi */ --hs-red-400: rgba(245, 107, 82, 1); --hs-red-500: #FE5454; --hs-red-600: rgba(197, 40, 12, 1); /* Orange: usato per il codice inline e accenti caldi */ --hs-orange-400: rgba(245, 147, 82, 1); --hs-orange-500: #e8b63e; --hs-orange-600: rgba(216, 101, 13, 1); /* Yellow / Blue / Teal / Purple: disponibili per grafici e categorie */ --hs-yellow-500: rgba(242, 179, 34, 1); --hs-blue-500: rgba(62, 125, 213, 1); --hs-teal-500: rgba(59, 195, 211, 1); --hs-purple-500: rgba(121, 69, 227, 1); /* Trasparente */ --hs-clear: transparent; /* ---------- ALIAS SEMANTICI (tema DARK, default) ---------- */ /* Sfondi */ --hs-bg-app: var(--hs-gray-900); /* #121214 fondo pagina */ --hs-bg-card: var(--hs-gray-900); /* le card condividono il fondo */ --hs-bg-modal: #19191c; /* fondo modali/overlay */ --hs-bg-verified-card: var(--hs-gray-900); /* Testo */ --hs-text-base: #E7E9EA; /* corpo del testo */ --hs-text-primary: var(--hs-gray-50); /* titoli ad alto contrasto (bianco) */ --hs-text-secondary: var(--hs-gray-300); --hs-text-dimmed: var(--hs-gray-500); /* testo attenuato, caption */ --hs-text-primary-inverted: #000000; /* testo su superfici chiare */ --hs-text-error: var(--hs-red-500); --hs-text-success: var(--hs-green-500); /* Bordi e linee */ --hs-border: var(--hs-gray-50); /* bordo enfatico (bianco) */ --hs-border-card: var(--hs-gray-800); /* bordo standard delle card */ --hs-edge: var(--hs-gray-800); --hs-outline: var(--hs-gray-500); /* Stati hover/active per item di lista e navigazione */ --hs-item-active: var(--hs-gray-800); --hs-item-hover: var(--hs-gray-600); /* Codice inline */ --hs-code: var(--hs-orange-500); /* --- Pulsante PRIMARY: bianco su fondo scuro, alto contrasto --- */ --hs-btn-primary-bg: var(--hs-gray-50); --hs-btn-primary-fg: var(--hs-gray-900); --hs-btn-primary-border: var(--hs-gray-50); --hs-btn-primary-bg-hover: var(--hs-gray-100); --hs-btn-primary-fg-hover: var(--hs-gray-900); --hs-btn-primary-bg-disabled: var(--hs-gray-400); --hs-btn-primary-fg-disabled: var(--hs-gray-500); /* --- Pulsante SECONDARY: scuro con bordo, testo chiaro --- */ --hs-btn-secondary-bg: #000000; --hs-btn-secondary-fg: var(--hs-gray-50); --hs-btn-secondary-border: var(--hs-gray-700); --hs-btn-secondary-fg-hover: var(--hs-gray-200); /* --- Pulsante TERTIARY: trasparente, solo testo --- */ --hs-btn-tertiary-bg: var(--hs-clear); --hs-btn-tertiary-fg: var(--hs-gray-50); --hs-btn-tertiary-fg-hover: var(--hs-gray-200); /* --- Accento verde per CTA firmate (opzionale, stile Learnn marketing) --- */ --hs-btn-accent-bg: var(--hs-green-500); --hs-btn-accent-fg: var(--hs-gray-900); --hs-btn-accent-bg-hover: var(--hs-green-400); /* ---------- TIPOGRAFIA ---------- */ /* Font stack. Messina Sans e' il font originale di Learnn ma e' proprietario (Luzi Type). Inter e' la sostituzione pratica, gratuita e gia' in uso sul sito. Vedi fonts.css e references/typography.md. */ --hs-font-family: 'Inter', 'Messina Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Scala dimensioni (rem). I nomi seguono la scala numerica di designn. */ --hs-font-size-base: 1rem; --hs-font-size-75: 0.75rem; --hs-font-size-100: 0.875rem; --hs-font-size-200: 1.1rem; --hs-font-size-250: 1.3rem; --hs-font-size-300: 1.25rem; --hs-font-size-350: 1.5rem; --hs-font-size-400: 1.5rem; --hs-font-size-450: 1.75rem; --hs-font-size-500: 1.75rem; --hs-font-size-600: 2rem; --hs-font-size-700: 2.5rem; --hs-font-size-800: 3rem; /* Pesi */ --hs-font-weight-light: 300; --hs-font-weight-regular: 400; --hs-font-weight-semibold: 600; --hs-font-weight-bold: 700; --hs-font-weight-black: 800; /* Altezze di riga */ --hs-line-height-1: 1rem; --hs-line-height-2: 1.25rem; --hs-line-height-3: 1.5rem; --hs-line-height-4: 1.75rem; --hs-line-height-5: 2rem; --hs-line-height-6: 2.5rem; --hs-line-height-7: 3rem; --hs-line-height-8: 3.5rem; /* Tracking dei titoli: il tratto piu' riconoscibile di Learnn. I titoli hanno letter-spacing negativo. Usa questi valori sugli heading. */ --hs-tracking-heading: -0.04em; /* titoli piccoli e medi */ --hs-tracking-display: -0.05em; /* titoli grandi/display */ --hs-tracking-button: -0.03em; /* etichette dei pulsanti */ /* ---------- SPAZIATURE (rem) ---------- */ --hs-space-0: 0rem; --hs-space-025: 0.0625rem; --hs-space-035: 0.08rem; --hs-space-05: 0.125rem; --hs-space-08: 0.2rem; --hs-space-1: 0.25rem; --hs-space-2: 0.5rem; --hs-space-3: 0.75rem; --hs-space-4: 1rem; --hs-space-5: 1.25rem; --hs-space-6: 1.5rem; --hs-space-8: 2rem; --hs-space-10: 2.5rem; --hs-space-12: 3rem; --hs-space-16: 4rem; --hs-space-20: 5rem; --hs-space-24: 6rem; --hs-space-28: 7rem; --hs-space-32: 8rem; /* ---------- BORDI: raggi e spessori ---------- */ --hs-radius-base: 0.25rem; --hs-radius-medium: 0.5rem; --hs-radius-large: 1rem; --hs-radius-half: 50%; --hs-radius-full: 1000rem; /* pillola */ --hs-border-width-base: 0.0625rem; --hs-border-width-medium: 0.125rem; --hs-border-width-large: 0.25rem; /* ---------- BREAKPOINT (per riferimento in media query) ---------- small 576px medium 768px large 1024px xlarge 1440px Le variabili CSS non funzionano dentro le condizioni @media, quindi questi valori vanno scritti a mano nelle media query. Sono qui come promemoria dei valori canonici. */ --hs-bp-small: 576px; --hs-bp-medium: 768px; --hs-bp-large: 1024px; --hs-bp-xlarge: 1440px; } /* ========================================================================== VARIANTE TEMA LIGHT (opzionale) Attiva con oppure classe .theme-light sul body. Ribalta solo gli alias semantici, non le scale grezze. Nota: questa NON e' la resa fedele di Learnn (che e' dark). E' un'opzione pratica se si vuole restare su fondo chiaro come il sito attuale. ========================================================================== */ [data-theme="light"], .theme-light { --hs-bg-app: #ffffff; --hs-bg-card: #ffffff; --hs-bg-modal: #ffffff; --hs-bg-verified-card: var(--hs-gray-100); --hs-text-base: var(--hs-gray-900); --hs-text-primary: var(--hs-gray-900); --hs-text-secondary: var(--hs-gray-600); --hs-text-dimmed: var(--hs-gray-500); --hs-text-primary-inverted: #ffffff; --hs-border: var(--hs-gray-900); --hs-border-card: var(--hs-gray-200); --hs-edge: var(--hs-gray-200); --hs-outline: var(--hs-gray-400); --hs-item-active: var(--hs-gray-100); --hs-item-hover: var(--hs-gray-200); /* In light mode il primary ad alto contrasto diventa scuro su chiaro */ --hs-btn-primary-bg: var(--hs-gray-900); --hs-btn-primary-fg: var(--hs-gray-50); --hs-btn-primary-border: var(--hs-gray-900); --hs-btn-primary-bg-hover: var(--hs-gray-700); --hs-btn-primary-fg-hover: var(--hs-gray-50); --hs-btn-secondary-bg: #ffffff; --hs-btn-secondary-fg: var(--hs-gray-900); --hs-btn-secondary-border: var(--hs-gray-300); --hs-btn-secondary-fg-hover: var(--hs-gray-700); --hs-btn-tertiary-fg: var(--hs-gray-900); --hs-btn-tertiary-fg-hover: var(--hs-gray-600); }