/* ═══════════════════════════════════════════════════════════════════════════ UBDESIGNER STUDIO v2.0 — DESIGN TOKENS (FIX85) Variables CSS partagées pour tous les modules : UX4, PrintHub, HomeModule, Gallery, Render Studio, AI Vision Studio. Chargement : index.html en tout début de , avant tout autre CSS. Tous les modules existants peuvent migrer leurs valeurs hardcodées vers ces variables (sans casse — `--ub-*` est un namespace dédié). ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Brand colors ──────────────────────────────────────────────────── */ --ub-brand-primary: #a78bfa; /* Violet — action principale, hero gradient */ --ub-brand-primary-d: #7c3aed; /* Violet foncé — boutons primary, focus */ --ub-brand-primary-l: #c4b5fd; /* Violet clair — hover, accents subtils */ --ub-brand-success: #10b981; /* Vert — print ready, succès */ --ub-brand-success-l: #34d399; /* Vert clair */ --ub-brand-success-d: #059669; /* Vert foncé */ --ub-brand-warning: #f59e0b; /* Orange — warnings, préparation requise */ --ub-brand-danger: #ef4444; /* Rouge — erreurs, rejet */ --ub-brand-info: #06b6d4; /* Cyan — info, neutre */ /* ── Surface (fonds) ───────────────────────────────────────────────── */ --ub-bg-base: #08080c; /* Body, modaux backdrop content */ --ub-bg-shell: #0a0a10; /* Shells de modaux */ --ub-bg-surface: #0b0b10; /* Cards, panels */ --ub-bg-elevated: #13131a; /* Cards élevées, tabs actifs */ --ub-bg-raised: #1a1a22; /* Boutons, inputs */ --ub-bg-hover: #22222c; /* Hover état */ --ub-bg-backdrop: rgba(8, 8, 12, 0.78); /* Modal backdrop */ --ub-bg-backdrop-deep: rgba(4, 4, 8, 0.92); /* Backdrop home (plus opaque) */ /* ── Text ──────────────────────────────────────────────────────────── */ --ub-text-primary: #e8e8f0; /* Texte principal */ --ub-text-secondary: #d1d5db; /* Texte secondaire (body) */ --ub-text-muted: #9ca3af; /* Labels, descriptions */ --ub-text-faint: #6b7280; /* Notes, métadonnées */ --ub-text-disabled: #4b5563; /* Désactivé */ --ub-text-inverse: #fff; /* Sur fond brand */ /* ── Borders ───────────────────────────────────────────────────────── */ --ub-border-subtle: rgba(255, 255, 255, 0.05); /* Séparateurs très discrets */ --ub-border-default: rgba(255, 255, 255, 0.06); /* Bord cards standard */ --ub-border-strong: rgba(255, 255, 255, 0.08); /* Bord boutons, inputs */ --ub-border-emphasis: rgba(255, 255, 255, 0.12); /* Bord focus, hover */ --ub-border-brand: rgba(167, 139, 250, 0.25); /* Bord brand subtil */ --ub-border-brand-d: rgba(167, 139, 250, 0.5); /* Bord brand fort */ --ub-border-success: rgba(16, 185, 129, 0.25); --ub-border-warning: rgba(245, 158, 11, 0.25); --ub-border-danger: rgba(239, 68, 68, 0.25); /* ── Spacing ───────────────────────────────────────────────────────── */ --ub-space-0: 0; --ub-space-1: 4px; --ub-space-2: 8px; --ub-space-3: 12px; --ub-space-4: 14px; --ub-space-5: 18px; --ub-space-6: 22px; --ub-space-7: 28px; --ub-space-8: 36px; --ub-space-9: 48px; /* ── Radius ────────────────────────────────────────────────────────── */ --ub-radius-sm: 6px; --ub-radius-md: 8px; --ub-radius-lg: 10px; --ub-radius-xl: 12px; --ub-radius-2xl: 14px; --ub-radius-3xl: 18px; --ub-radius-pill: 999px; /* ── Shadows ───────────────────────────────────────────────────────── */ --ub-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.2); --ub-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --ub-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); --ub-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.6); --ub-shadow-brand: 0 4px 12px rgba(124, 58, 237, 0.3); --ub-shadow-brand-hover: 0 6px 16px rgba(124, 58, 237, 0.45); --ub-shadow-success: 0 4px 12px rgba(16, 185, 129, 0.3); /* ── Typo ──────────────────────────────────────────────────────────── */ --ub-font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ub-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace; --ub-fs-xs: 10px; /* labels, badges */ --ub-fs-sm: 11px; /* meta, footer */ --ub-fs-md: 12px; /* labels boutons, descriptions */ --ub-fs-base: 13px; /* texte standard */ --ub-fs-lg: 14px; /* titres section */ --ub-fs-xl: 17px; /* titres modal */ --ub-fs-2xl: 22px; /* stats */ --ub-fs-3xl: 28px; /* gros chiffres */ --ub-fs-hero: 34px; /* hero titles */ --ub-fw-regular: 400; --ub-fw-medium: 500; --ub-fw-semibold: 600; --ub-fw-bold: 700; --ub-fw-black: 800; --ub-tracking-tight: -0.8px; --ub-tracking-snug: -0.2px; --ub-tracking-wide: 0.6px; --ub-tracking-widest: 0.8px; --ub-leading-tight: 1.1; --ub-leading-snug: 1.4; --ub-leading-normal: 1.6; /* ── Z-index (hiérarchie globale) ──────────────────────────────────── */ --ub-z-base: 1; --ub-z-overlay: 100; /* Tooltips, popovers */ --ub-z-sidebar: 1000; /* UX4 sidebar */ --ub-z-chrome: 10000; /* Toolbars flottantes */ --ub-z-modal-base: 200000; /* Modaux standard */ --ub-z-home: 200004; /* HomeModule (sous PrintHub) */ --ub-z-print-hub: 200005; /* PrintHub */ --ub-z-toast: 200010; /* Toasts (au-dessus de tout) */ --ub-z-system: 200020; /* Critique (auth requise, erreurs fatales) */ /* ── Transitions ───────────────────────────────────────────────────── */ --ub-tr-fast: 120ms ease-out; --ub-tr-default: 180ms ease-out; --ub-tr-slow: 280ms ease-out; --ub-tr-carousel: 800ms ease-in-out; /* ── Gradients réutilisables ──────────────────────────────────────── */ --ub-grad-brand: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%); --ub-grad-success: linear-gradient(135deg, #34d399 0%, #10b981 100%); --ub-grad-hero: linear-gradient(135deg, #fff 0%, #a78bfa 100%); --ub-grad-shell: linear-gradient(180deg, #0a0a10 0%, #0d0d15 100%); --ub-grad-header: linear-gradient(180deg, #13131a 0%, #0d0d12 100%); /* ── Scrollbar (Webkit) ────────────────────────────────────────────── */ --ub-scroll-track: #0b0b10; --ub-scroll-thumb: #2a2a35; --ub-scroll-thumb-h: #3a3a48; --ub-scroll-width: 8px; } /* ═══════════════════════════════════════════════════════════════════════════ UTILITAIRES PARTAGÉS (opt-in via classes .ub-*) ═══════════════════════════════════════════════════════════════════════════ */ .ub-scrollbar::-webkit-scrollbar { width: var(--ub-scroll-width); height: var(--ub-scroll-width); } .ub-scrollbar::-webkit-scrollbar-track { background: var(--ub-scroll-track); } .ub-scrollbar::-webkit-scrollbar-thumb { background: var(--ub-scroll-thumb); border-radius: 4px; } .ub-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--ub-scroll-thumb-h); } /* Animation spin partagée */ @keyframes ub-spin { to { transform: rotate(360deg); } } /* Animation fade-in */ @keyframes ub-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Animation slide up */ @keyframes ub-slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Spinner réutilisable */ .ub-spinner { display: inline-block; width: 22px; height: 22px; border: 2.5px solid rgba(167, 139, 250, 0.25); border-top-color: var(--ub-brand-primary); border-radius: 50%; animation: ub-spin 800ms linear infinite; } .ub-spinner-sm { width: 14px; height: 14px; border-width: 2px; } .ub-spinner-lg { width: 32px; height: 32px; border-width: 3px; } /* Icon container */ .ub-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; vertical-align: middle; } .ub-icon svg { width: 100%; height: 100%; display: block; pointer-events: none; } .ub-icon-sm { width: 14px; height: 14px; } .ub-icon-md { width: 16px; height: 16px; } .ub-icon-lg { width: 20px; height: 20px; } .ub-icon-xl { width: 24px; height: 24px; }