/* ══════════════════════════════════════════════════════════════════ CRM ML — Design Tokens v1.0 (ROOT / Vivid) ══════════════════════════════════════════════════════════════════ Source of truth canonico. Namespace unico --crml-*, gerarchia semantica per famiglia (color, space, radius, shadow, motion, z, text, weight, leading, font). Caricamento: sempre, sia admin che portale. Indipendente dagli altri file theme-*. I valori qui sono per il tema VIVID (chiaro), che e' il default. Il tema GLASS (scuro) sovrascrive in _theme-glass.css. NOTA: questi token sono ADDITIVI. Non sostituiscono i token legacy (--crml-text, --crml-bg-panel, --crml-accent, ecc.) di admin-modern.css e admin-themes.css: quelli continuano a funzionare. I component nuovi (Fase B) useranno questi nuovi nomi. In Fase E gli alias legacy verranno rimossi. Contrast verificato WCAG AA (4.5:1 body, 3:1 large) su tutte le coppie fg/bg dichiarate. ══════════════════════════════════════════════════════════════════ */ :root, body.crml-theme-vivid { /* ───────────────────────────────────────────────────────────── BRAND (accent principale: rosa/viola musicale legale) ───────────────────────────────────────────────────────────── */ --crml-color-brand-50: #fdf2f8; --crml-color-brand-100: #fce7f3; --crml-color-brand-300: #f0abcc; --crml-color-brand-500: #ba5a87; /* accent principale */ --crml-color-brand-600: #a03c6e; /* accent scuro / hover */ --crml-color-brand-700: #80305a; /* Gradient brand per hero / btn-primary */ --crml-color-brand-gradient: linear-gradient(135deg, #ba5a87 0%, #6a4b9b 50%, #2a3e7f 100%); /* ───────────────────────────────────────────────────────────── BACKGROUND scale ───────────────────────────────────────────────────────────── */ --crml-color-bg-app: #f5f6fb; /* sfondo pagina */ --crml-color-bg-surface: #ffffff; /* card, tabella, modal */ --crml-color-bg-subtle: #f8fafc; /* zebra, muted panel */ --crml-color-bg-hover: rgba(186, 90, 135, .06); --crml-color-bg-active: rgba(186, 90, 135, .12); --crml-color-bg-overlay: rgba(15, 23, 42, .55); /* modal backdrop */ /* ───────────────────────────────────────────────────────────── FOREGROUND (testo) — contrast AA su bg-surface #ffffff ───────────────────────────────────────────────────────────── */ --crml-color-fg-strong: #0d1b3e; /* 15:1 — heading, valore KPI */ --crml-color-fg-default: #1e293b; /* 13:1 — body, td standard */ --crml-color-fg-muted: #4a4a68; /* 8.6:1 — description, label secondaria */ --crml-color-fg-faint: #7a7e98; /* 5:1 — hint, placeholder, metadata */ --crml-color-fg-on-brand: #ffffff; /* testo sopra accent pieno */ /* ───────────────────────────────────────────────────────────── BORDER scale ───────────────────────────────────────────────────────────── */ --crml-color-border-subtle: #e5e0ee; --crml-color-border-base: #d8d4e5; --crml-color-border-strong: #b8b0d0; --crml-color-border-focus: var(--crml-color-brand-500); /* ───────────────────────────────────────────────────────────── NEUTRAL scale — scala grigio neutra (icone, meta, hint) Non ha sfumature brand, utile per UI secondaria e diagrammi. ───────────────────────────────────────────────────────────── */ --crml-color-neutral-50: #f8fafc; --crml-color-neutral-100: #f1f5f9; --crml-color-neutral-200: #e2e8f0; --crml-color-neutral-300: #cbd5e1; --crml-color-neutral-400: #94a3b8; /* 3.5:1 su bianco — icona disabilitata */ --crml-color-neutral-500: #64748b; /* 5:1 su bianco — meta, timestamp, hint */ --crml-color-neutral-600: #475569; --crml-color-neutral-700: #334155; --crml-color-neutral-800: #1e293b; /* ───────────────────────────────────────────────────────────── STATI SEMANTICI (coppie fg/bg AA verificate) ───────────────────────────────────────────────────────────── */ --crml-color-success: #0f9d58; --crml-color-success-bg: #dcfce7; --crml-color-success-fg: #065f46; --crml-color-warning: #b45309; --crml-color-warning-bg: #fef3c7; --crml-color-warning-fg: #78350f; --crml-color-danger: #dc2626; --crml-color-danger-bg: #fee2e2; --crml-color-danger-fg: #991b1b; --crml-color-info: #0369a1; --crml-color-info-bg: #dbeafe; --crml-color-info-fg: #1e40af; /* ───────────────────────────────────────────────────────────── SPACING — scala 4-based (4, 8, 12, 16, 20, 24, 32, 40, 48, 64) ───────────────────────────────────────────────────────────── */ --crml-space-0: 0; --crml-space-1: 4px; --crml-space-2: 8px; --crml-space-3: 12px; --crml-space-4: 16px; --crml-space-5: 20px; /* eccezioni solo giustificate */ --crml-space-6: 24px; --crml-space-8: 32px; --crml-space-10: 40px; --crml-space-12: 48px; --crml-space-16: 64px; /* ───────────────────────────────────────────────────────────── RESPONSIVE / MOBILE-FIRST (F0, iniziativa mobile-compat) Scala breakpoint canonica (deprecare le ~45 soglie storiche) + spacing responsivo clamp() per il portale. ADDITIVI: nessun consumo finche' i component (F1-F3) non li adottano. I valori clamp collassano al massimo su desktop largo (diff visivo zero) e si restringono su mobile, eliminando padding/overflow killer. NB: le var() NON sono usabili dentro le condizioni @media; i --crml-bp-* servono per clamp()/calc()/lettura JS, non per le media query (che restano in px sulla scala 480/600/768/1024/1200). ───────────────────────────────────────────────────────────── */ --crml-bp-sm: 480px; /* phone landscape / small */ --crml-bp-md: 600px; /* phablet — soglia primaria stack mobile */ --crml-bp-lg: 768px; /* iPad portrait */ --crml-bp-xl: 1024px; /* iPad landscape / small laptop */ --crml-bp-2xl: 1200px; /* desktop */ --crml-pad-page: clamp(12px, 4vw, 32px); /* padding contenitore pagina */ --crml-pad-section: clamp(20px, 5vw, 60px); /* hero / empty-state / sezione */ --crml-pad-card: clamp(14px, 3vw, 24px); /* padding card */ --crml-gap: clamp(12px, 2.5vw, 24px); /* gap griglie/flex */ --crml-shell-max: min(980px, 100% - 32px); /* larghezza max shell centrata */ /* ───────────────────────────────────────────────────────────── RADIUS ───────────────────────────────────────────────────────────── */ --crml-radius-xs: 4px; /* input small, checkbox */ --crml-radius-sm: 8px; /* button, badge, input */ --crml-radius-md: 12px; /* card piccole, alert */ --crml-radius-lg: 16px; /* card grandi, modal */ --crml-radius-xl: 24px; /* hero */ --crml-radius-pill: 999px; /* ───────────────────────────────────────────────────────────── SHADOW ───────────────────────────────────────────────────────────── */ --crml-shadow-xs: 0 1px 2px rgba(13, 27, 62, .04); --crml-shadow-sm: 0 2px 8px rgba(13, 27, 62, .06); --crml-shadow-md: 0 8px 24px rgba(13, 27, 62, .08); --crml-shadow-lg: 0 20px 50px -20px rgba(186, 90, 135, .25); --crml-shadow-focus: 0 0 0 3px rgba(186, 90, 135, .25); /* ───────────────────────────────────────────────────────────── MOTION ───────────────────────────────────────────────────────────── */ --crml-motion-fast: 120ms cubic-bezier(.4, 0, .2, 1); --crml-motion-base: 200ms cubic-bezier(.4, 0, .2, 1); --crml-motion-slow: 320ms cubic-bezier(.4, 0, .2, 1); --crml-motion-bounce: 400ms cubic-bezier(.34, 1.56, .64, 1); /* ───────────────────────────────────────────────────────────── Z-INDEX ───────────────────────────────────────────────────────────── */ --crml-z-base: 1; --crml-z-dropdown: 100; --crml-z-sticky: 200; --crml-z-overlay: 500; --crml-z-modal: 1000; --crml-z-toast: 1100; --crml-z-tooltip: 1200; /* ───────────────────────────────────────────────────────────── TYPOGRAPHY ───────────────────────────────────────────────────────────── */ --crml-font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif; --crml-font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; /* Scala testo (px diretti — WP ha reset base diverso) */ --crml-text-xs: 11px; --crml-text-sm: 12px; --crml-text-base: 14px; --crml-text-md: 15px; --crml-text-lg: 17px; --crml-text-xl: 20px; --crml-text-2xl: 24px; --crml-text-3xl: 32px; --crml-text-4xl: 40px; --crml-leading-tight: 1.25; --crml-leading-normal: 1.5; --crml-leading-loose: 1.75; --crml-weight-regular: 400; --crml-weight-medium: 500; --crml-weight-semi: 600; --crml-weight-bold: 700; /* ───────────────────────────────────────────────────────────── LOADING / SPINNER / SKELETON (v3.8.0) ───────────────────────────────────────────────────────────── */ --crml-spinner-size-sm: 16px; --crml-spinner-size-md: 24px; --crml-spinner-size-lg: 40px; --crml-spinner-thickness: 2px; --crml-spinner-color: var(--crml-color-brand-500); --crml-spinner-track: rgba(186, 90, 135, .15); --crml-spinner-duration: 800ms; --crml-skeleton-base: #e7e3ee; --crml-skeleton-shimmer: #f5f1f9; --crml-skeleton-radius: var(--crml-radius-sm); --crml-skeleton-duration: 1.4s; --crml-loading-overlay-bg: rgba(255, 255, 255, .72); --crml-loading-overlay-blur: 2px; /* ───────────────────────────────────────────────────────────── STATI REGISTRO LEZIONI (v3.8.0) Mappa i 9 stati canonici (PIANIFICATA…ANNULLATA) a coppie bg/fg semantiche. Usati da .crml-badge[data-stato="X"] per sostituire le 11 classi hardcoded .crml-badge-pianificata, .crml-badge-presente, ecc. (anti-pattern dead code). ───────────────────────────────────────────────────────────── */ --crml-stato-pianificata-bg: var(--crml-color-info-bg); --crml-stato-pianificata-fg: var(--crml-color-info-fg); --crml-stato-da-recuperare-bg: #fef3c7; --crml-stato-da-recuperare-fg: #78350f; --crml-stato-presente-bg: var(--crml-color-success-bg); --crml-stato-presente-fg: var(--crml-color-success-fg); --crml-stato-recupero-bg: #d1fae5; --crml-stato-recupero-fg: #065f46; --crml-stato-assente-bg: var(--crml-color-danger-bg); --crml-stato-assente-fg: var(--crml-color-danger-fg); --crml-stato-assenza-nr-bg: #fee2e2; --crml-stato-assenza-nr-fg: #7f1d1d; --crml-stato-assenza-maestro-bg: #fde68a; --crml-stato-assenza-maestro-fg: #78350f; --crml-stato-supplenza-bg: var(--crml-color-brand-100); --crml-stato-supplenza-fg: var(--crml-color-brand-700); --crml-stato-annullata-bg: #f1f5f9; --crml-stato-annullata-fg: #475569; /* ───────────────────────────────────────────────────────────── LEGACY ALIASES (v3.7.52) — backward-compat per file storici (admin-themes-deep.css, components.css) che usano nomi senza il prefisso ufficiale. Mai usare in codice nuovo. ───────────────────────────────────────────────────────────── */ --crml-text: var(--crml-color-fg-default); --crml-text-strong: var(--crml-color-fg-strong); --crml-text-muted: var(--crml-color-fg-muted); --crml-text-faint: var(--crml-color-fg-faint); --crml-bg: var(--crml-color-bg-app); --crml-bg-2: var(--crml-color-bg-subtle); --crml-surface: var(--crml-color-bg-surface); --crml-border: var(--crml-color-border-base); --crml-border-soft: var(--crml-color-border-subtle); --crml-muted: var(--crml-color-fg-muted); --crml-muted-soft: var(--crml-color-fg-faint); } /* ────────────────────────────────────────────────────────────────── PREFERS-REDUCED-MOTION: disabilita transizioni/animazioni Utenti con motion sensitivity. Rispetta sempre, senza opt-in. ────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --crml-motion-fast: 0ms linear; --crml-motion-base: 0ms linear; --crml-motion-slow: 0ms linear; --crml-motion-bounce: 0ms linear; } }