/* ============================================================== * DESIGN SYSTEM TOKENS — Up-me single source of visual truth * * All colors, spacings, typography, shadows, radii live here. * Modules NEVER hardcode values — they use these tokens. * * Three layers of precedence (cascade): * 1. :root → global defaults * 2. .workspace-X → per-workspace branding (Phase 3 multi-tenant) * 3. .theme-light/dark → per-user theme preference * * Naming convention: * --up-{category}-{role}-{variant?} * Examples: * --up-color-primary * --up-color-primary-bg * --up-space-2 * --up-radius-md * --up-shadow-elevated * * Compatibility with Velzon: * We re-use Velzon's --vz-* variables where possible by aliasing * them to --up-* tokens. This way migrating modules to Up tokens * does not break Velzon-styled components. * ============================================================== */ /* ── WEB FONTS — auto-hébergées (offline-strict, même pattern que hkgrotesk) ── * Up·me : Inter (corps, contrôles, données) + Fraunces (titres, voix de marque). * Polices VARIABLES → tout l'axe de poids tient dans un seul woff2. * Fraunces porte l'axe optical-size (opsz) ; font-optical-sizing:auto (défaut * sur police variable) ajuste automatiquement le dessin selon la taille. * Sous-ensemble latin = accents FR couverts (é è à ç ô œ « »). */ @font-face { font-family: "Inter"; src: url("../../assets/fonts/inter-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Fraunces"; src: url("../../assets/fonts/fraunces-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Fraunces"; src: url("../../assets/fonts/fraunces-variable-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; } :root { /* ── COLORS — primary palette ─────────────────────────── */ --up-color-primary: #6366f1; /* indigo, signature Up-me */ --up-color-primary-hover: #4f46e5; --up-color-primary-active: #4338ca; --up-color-primary-bg: #eef2ff; /* very light indigo bg */ --up-color-primary-fg: #ffffff; /* text on primary bg */ --up-color-accent: #a78bfa; /* purple secondary */ --up-color-accent-hover: #8b5cf6; --up-color-accent-bg: #f5f3ff; /* ── COLORS — neutral palette ─────────────────────────── */ /* Pattern Notion/Linear : fond zones = gris pâle, cards/contenu = blanc. Inversé 2026-05-15 par rapport à Up-me original pour uniformiser avec Dashboard et CRM V2 (qui ont leur identité visuelle "gris + blanc"). --up-color-bg = couleur de fond des zones générales (page, body) --up-color-bg-subtle = couleur des cards/contenu posé sur le fond */ --up-color-bg: #FAFAFA; /* = --c-bg du site (Phase 1 reskin Up·me) */ --up-color-bg-subtle: #ffffff; --up-color-bg-muted: #f3f4f6; --up-color-bg-strong: #e5e7eb; --up-color-text: #1b1a2e; /* encre (--ink) — Phase 1 reskin Up·me */ --up-color-text-muted: #5b5872; /* soft */ --up-color-text-subtle: #8e8ba6; /* faint */ --up-color-text-on-dark: #f9fafb; --up-color-border: rgba(120,110,170,.16); --up-color-border-strong: #d1d5db; /* ── COLORS — semantic ────────────────────────────────── */ --up-color-success: #10b981; --up-color-success-bg: #d1fae5; --up-color-warning: #f59e0b; --up-color-warning-bg: #fef3c7; --up-color-danger: #ef4444; --up-color-danger-bg: #fee2e2; --up-color-info: #3b82f6; --up-color-info-bg: #dbeafe; /* ── SPACING (4px base unit) ─────────────────────────── */ --up-space-0: 0; --up-space-px: 1px; --up-space-0_5: 2px; --up-space-1: 4px; --up-space-2: 8px; --up-space-3: 12px; --up-space-4: 16px; --up-space-5: 20px; --up-space-6: 24px; --up-space-8: 32px; --up-space-10: 40px; --up-space-12: 48px; --up-space-16: 64px; --up-space-20: 80px; --up-space-24: 96px; /* ── TYPOGRAPHY ──────────────────────────────────────── */ --up-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --up-font-serif: "Fraunces", Georgia, "Times New Roman", serif; /* titres / voix de marque */ --up-font-mono: ui-monospace, "SF Mono", Menlo, Monaco, "Courier New", monospace; --up-text-xs: 11px; --up-text-sm: 13px; --up-text-base: 14px; --up-text-md: 16px; --up-text-lg: 18px; --up-text-xl: 20px; --up-text-2xl: 24px; --up-text-3xl: 30px; --up-text-4xl: 36px; --up-text-5xl: 48px; --up-font-weight-light: 300; --up-font-weight-normal: 400; --up-font-weight-medium: 500; --up-font-weight-semibold: 600; --up-font-weight-bold: 700; --up-line-height-tight: 1.25; --up-line-height-normal: 1.5; --up-line-height-relaxed: 1.7; --up-letter-spacing-tight: -0.02em; --up-letter-spacing-wide: 0.05em; --up-letter-spacing-wider: 0.15em; /* ── RADIUS ──────────────────────────────────────────── */ --up-radius-none: 0; --up-radius-sm: 4px; --up-radius-md: 6px; --up-radius-lg: 8px; --up-radius-xl: 12px; --up-radius-2xl: 16px; --up-radius-pill: 9999px; --up-radius-circle: 50%; /* ── SHADOWS ─────────────────────────────────────────── */ --up-shadow-none: none; --up-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --up-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); --up-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04); --up-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05); --up-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.10), 0 10px 10px rgba(0, 0, 0, 0.04); --up-shadow-elevated: 0 6px 22px rgba(15, 20, 40, 0.18); --up-shadow-glow: 0 0 24px rgba(99, 102, 241, 0.35); /* ── TRANSITIONS ─────────────────────────────────────── */ --up-duration-fast: 150ms; --up-duration-normal: 250ms; --up-duration-slow: 400ms; --up-ease-default: cubic-bezier(0.4, 0, 0.2, 1); --up-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --up-ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1); /* ── Z-INDEX SCALE ───────────────────────────────────── */ --up-z-base: 1; --up-z-elevated: 10; --up-z-dropdown: 100; --up-z-sticky: 200; --up-z-overlay: 500; --up-z-modal: 1000; --up-z-toast: 2000; --up-z-tooltip: 3000; --up-z-immersive: 9999; /* ── LAYOUT ──────────────────────────────────────────── */ --up-sidebar-width: 280px; --up-sidebar-width-collapsed: 64px; --up-topbar-height: 56px; --up-content-max-width: 1440px; } /* ── DARK THEME OVERRIDES ─────────────────────────────── */ [data-theme="dark"], .theme-dark { /* Dark mode : garde l'original (cards plus claires que fond via bg-subtle). Pas d'inversion en dark — l'identité Up-me en dark fonctionne déjà bien. */ --up-color-bg: #0a0e1a; --up-color-bg-subtle: #131826; --up-color-bg-muted: #1c2230; --up-color-bg-strong: #2a3140; --up-color-text: #f3f4f6; --up-color-text-muted: #9ca3af; --up-color-text-subtle: #6b7280; --up-color-border: #2a3140; --up-color-border-strong: #3a4250; /* Slightly brighter primary on dark for contrast */ --up-color-primary-bg: rgba(99, 102, 241, 0.10); --up-color-accent-bg: rgba(167, 139, 250, 0.10); } /* ── VELZON ALIASES ───────────────────────────────────── */ /* Map our tokens to Velzon's --vz-* so existing components keep working */ :root { --vz-primary: var(--up-color-primary); --vz-primary-rgb: 99, 102, 241; --vz-secondary: var(--up-color-accent); --vz-success: var(--up-color-success); --vz-warning: var(--up-color-warning); --vz-danger: var(--up-color-danger); --vz-info: var(--up-color-info); --vz-body-bg: var(--up-color-bg); --vz-body-color: var(--up-color-text); --vz-border-color: var(--up-color-border); --vz-secondary-bg: var(--up-color-bg-subtle); /* ── PHASE 1-2 — neutres texte, surfaces verre, rayons, ombre (spec handoff) */ --vz-heading-color: var(--up-color-text); /* encre */ --vz-secondary-color: var(--up-color-text-muted); /* soft */ --vz-tertiary-color: var(--up-color-text-subtle); /* faint */ --vz-link-color: #4f46e5; --vz-card-bg: rgba(255,255,255,.62); /* verre — le backdrop-filter est dans flowos-overrides */ --vz-border-radius: 12px; --vz-border-radius-sm: 9px; --vz-border-radius-lg: 16px; --vz-box-shadow: 0 7px 22px rgba(80,70,160,.07); --vz-box-shadow-sm: 0 4px 14px rgba(80,70,160,.06); /* ── Up·me — FOND VIVANT (aurora) + verre renforcé : tokens « 1 knob » pour re-teinter toute l'app d'un coup (2026-06-14). Hex = pour .upme-bg (background + opacity séparée). Triplet RGB = pour composer du rgba (overlay plein écran notes). Surchargés en dark plus bas. */ --up-aurora-1: #B2A6FF; /* lilas */ --up-aurora-1-rgb: 178,166,255; --up-aurora-2: #FCA5A5; /* corail */ --up-aurora-2-rgb: 252,165,165; --up-card-glass: rgba(255,255,255,.46); /* verre + translucide : dashboard + journal */ /* Typo : Velzon lit --vz-font-sans-serif pour le corps (défini seulement dans bootstrap.min.css = "Poppins", jamais auto-hébergé → rendait en fallback système). On le branche sur Inter. Velzon ne lit PAS de var de titre → l'alias ci-dessous est défensif ; la vraie bascule serif des titres se fait par la règle h1..h6 en bas de fichier. */ --vz-font-sans-serif: var(--up-font-sans); --vz-heading-font-family: var(--up-font-serif); /* ── PHASE 4 — SIDEBAR CLAIRE EN VERRE ─────────────────── Velzon pose le navy (#405189) via [data-sidebar=dark]. On bascule data-sidebar="light" (index.html) ET on override ici les vars du menu vertical vers la palette verre Up·me. Le verre lui-même (backdrop-filter) et le filet indigo de l'item actif vivent dans flowos-overrides.css (section sidebar). Valeurs = spec handoff ; neutres #5b5872/#9a96b5 à harmoniser avec les --up-color-* en Phase 1. */ --vz-vertical-menu-bg: rgba(255,255,255,.55); --vz-vertical-menu-border: rgba(120,110,170,.12); --vz-vertical-menu-item-color: #5b5872; --vz-vertical-menu-item-hover-color: #1b1a2e; --vz-vertical-menu-item-active-color: #4f46e5; --vz-vertical-menu-sub-item-color: #6f6c87; --vz-vertical-menu-sub-item-hover-color: #4f46e5; --vz-vertical-menu-title-color: #9a96b5; /* ── PHASE 3 — TOPBAR verre compacte ───────────────────── 56px (gain de place) + fond verre. Règles #page-topbar / recherche dans flowos-overrides.css. */ --vz-header-height: 56px; --vz-header-bg: rgba(255,255,255,.55); } /* ════════════════════════════════════════════════════════════════ PHASE 6 — MODE SOMBRE. Le toggle lune de l'app pose data-theme=dark ET data-bs-theme=dark sur . Les --up-color-* dark sont déjà gérés plus haut ([data-theme="dark"]) → les alias --vz qui les référencent suivent (texte, bg). Ici on surcharge les --vz HARDCODÉS en clair (verre, sidebar, topbar, bordures) vers les valeurs dark du modèle (maquette « Maquette app » bloc [data-theme=dark] : verre rgba(30,28,50,.6), panel rgba(28,26,46,.55), encre #ECEAF6, indigo actif #818CF8). Le fond vivant .upme-bg + le verre local de .card sont surchargés dans flowos-overrides.css (sélecteurs). */ [data-theme="dark"], [data-bs-theme="dark"] { --vz-card-bg: rgba(30,28,50,.6); --vz-header-bg: rgba(28,26,46,.55); --vz-border-color: rgba(180,170,230,.12); --vz-vertical-menu-bg: rgba(28,26,46,.55); --vz-vertical-menu-border: rgba(180,170,230,.10); --vz-vertical-menu-item-color: #A9A4C4; --vz-vertical-menu-item-hover-color: #ECEAF6; --vz-vertical-menu-item-active-color: #818CF8; --vz-vertical-menu-sub-item-color: #9a96b5; --vz-vertical-menu-sub-item-hover-color: #818CF8; --vz-vertical-menu-title-color: #6f6a8c; /* aurora dark (= valeurs actuelles de .upme-bg dark, juste tokenisées) */ --up-aurora-1: #4338ca; --up-aurora-1-rgb: 67,56,202; --up-aurora-2: #1e3a8a; --up-aurora-2-rgb: 30,58,138; } /* ── TITRES EN FRAUNCES ──────────────────────────────────── * Velzon ne lit aucune var de titre. Il force les titres en Poppins via, dans * app.min.css : :is(.h1,.h2,…,h1,h2,…){font-family:Poppins,sans-serif} * Ce :is() a une spécificité (0,1,0) (tirée de .h1) qui bat un simple `h1` * (0,0,1). On MIROITE donc le même :is() pour égaler 0,1,0 ; tokens.css étant * chargé après app.min.css, on gagne sur l'égalité — sans !important. * Phase 0 = font-family seule ; poids/couleur/letter-spacing → Phase 1. */ :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6), .card-title, .page-title, .fw-serif { font-family: var(--up-font-serif); }