/* ========================================================= DESIGN SYSTEM — TOKENS Variables CSS natives, source unique de vérité pour les couleurs (hors marque), typographies, espacements, rayons, ombres, breakpoints et z-index du framework UI maison. Les tokens de couleur de marque (--ds-color-primary, --ds-color-secondary et leurs variantes) sont déclarés dans include/skin-crm-dynamic.php qui lit la configuration BDD. Ce fichier doit être chargé AVANT tokens.css ou après — peu importe, les variables CSS sont à portée globale via :root. Toutes les variables sont préfixées --ds-* pour éviter les collisions avec les variables existantes (--mensa, --crm-*). ========================================================= */ :root { /* ---------- Couleurs neutres ---------- */ --ds-color-white: #ffffff; --ds-color-black: #000000; --ds-color-gray-50: #f7f9fa; --ds-color-gray-100: #eef1f3; --ds-color-gray-200: #dde2e7; --ds-color-gray-300: #c2c9d1; --ds-color-gray-400: #98a1aa; --ds-color-gray-500: #6b7480; --ds-color-gray-600: #4d5560; --ds-color-gray-700: #373d42; /* aligné sur --crm-primary par défaut */ --ds-color-gray-800: #23313f; --ds-color-gray-900: #141a1f; /* ---------- Couleurs sémantiques ---------- */ /* Conservées proches des teintes Inspinia historiques pour cohérence visuelle */ --ds-color-success: #1ab394; --ds-color-success-soft: #e6f7f3; --ds-color-success-strong: #138271; --ds-color-warning: #f8ac59; --ds-color-warning-soft: #fef3e6; --ds-color-warning-strong: #d68b3a; --ds-color-danger: #ed5565; --ds-color-danger-soft: #fde6e9; --ds-color-danger-strong: #c93a4a; --ds-color-info: #23c6c8; --ds-color-info-soft: #e3f7f7; --ds-color-info-strong: #1a9799; /* ---------- Couleur "lien" (bleu standard) ---------- Réservée aux LIENS cliquables (.ds-root a). Les CTA / boutons primary restent en vert Mensa (--ds-color-secondary) pour garder la cohérence avec l'historique CRM et ne pas perturber les utilisateurs. Le bleu ne sert qu'à l'affordance "texte cliquable hors bouton". --------------------------------------------------- */ --ds-color-link: #1c84c6; --ds-color-link-hover: #156ba6; /* ---------- Surfaces ---------- */ --ds-color-bg-page: #f3f5f7; --ds-color-bg-surface: #ffffff; --ds-color-bg-muted: var(--ds-color-gray-50); /* ---------- Texte ---------- */ --ds-color-text: var(--ds-color-gray-900); --ds-color-text-muted: var(--ds-color-gray-500); --ds-color-text-subtle: var(--ds-color-gray-400); --ds-color-text-inverse: var(--ds-color-white); /* ---------- Bordures ---------- */ --ds-color-border: var(--ds-color-gray-200); --ds-color-border-strong: var(--ds-color-gray-300); --ds-color-border-focus: var(--ds-color-secondary, #85af7c); /* ---------- Sidebar (héritée du skin Mensa) ---------- */ --ds-color-sidebar-bg: var(--ds-color-primary, #373d42); --ds-color-sidebar-bg-hover: #2b3134; --ds-color-sidebar-text: #cfd8dc; --ds-color-sidebar-active: var(--ds-color-secondary, #85af7c); /* ---------- Typographie ---------- Tailles en px direct (pas en rem) : le projet legacy fixe html { font-size: 10px } via Bootstrap 3 / Inspinia, ce qui décale toutes les valeurs en rem. Le px direct garantit une taille stable quel que soit le contexte de cohabitation. ----------------------------------- */ --ds-font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ds-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --ds-font-size-xs: 11px; /* hints, badges count : équivalent libellé Inspinia */ --ds-font-size-sm: 12px; /* texte courant, labels, paragraphes : base du scope .ds-root */ --ds-font-size-md: 14px; /* titres carte, inputs, boutons : taille des composants importants en legacy */ --ds-font-size-lg: 16px; --ds-font-size-xl: 18px; --ds-font-size-2xl: 20px; --ds-font-size-3xl: 24px; --ds-font-size-4xl: 30px; --ds-line-height-tight: 1.2; --ds-line-height-normal: 1.45; --ds-line-height-relaxed: 1.65; --ds-font-weight-regular: 400; --ds-font-weight-medium: 500; --ds-font-weight-semibold: 600; --ds-font-weight-bold: 700; /* ---------- Espacements (échelle 4-base, px direct) ---------- */ --ds-space-0: 0; --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 20px; --ds-space-6: 24px; --ds-space-8: 32px; --ds-space-10: 40px; --ds-space-12: 48px; --ds-space-16: 64px; --ds-space-20: 80px; --ds-space-24: 96px; /* ---------- Rayons ---------- */ --ds-radius-none: 0; --ds-radius-sm: 3px; --ds-radius-md: 6px; --ds-radius-lg: 10px; --ds-radius-xl: 16px; --ds-radius-pill: 999px; /* ---------- Ombres ---------- */ --ds-shadow-xs: 0 1px 1px rgba(20, 26, 31, 0.04); --ds-shadow-sm: 0 1px 2px rgba(20, 26, 31, 0.06), 0 1px 3px rgba(20, 26, 31, 0.04); --ds-shadow-md: 0 4px 8px rgba(20, 26, 31, 0.08), 0 2px 4px rgba(20, 26, 31, 0.04); --ds-shadow-lg: 0 12px 24px rgba(20, 26, 31, 0.10), 0 4px 8px rgba(20, 26, 31, 0.06); --ds-shadow-focus: 0 0 0 3px rgba(133, 175, 124, 0.30); /* anneau focus vert Mensa */ /* ---------- Transitions ---------- */ --ds-transition-fast: 120ms ease-out; --ds-transition-base: 180ms ease-out; --ds-transition-slow: 260ms ease-out; /* ---------- Z-index ---------- */ --ds-z-base: 0; --ds-z-dropdown: 1000; --ds-z-sticky: 1020; --ds-z-fixed: 1030; --ds-z-modal-backdrop: 1040; --ds-z-modal: 1050; --ds-z-popover: 1060; --ds-z-tooltip: 1070; --ds-z-toast: 1080; /* ---------- Layout ---------- */ --ds-sidebar-width: 220px; --ds-sidebar-width-mini: 70px; --ds-topbar-height: 56px; --ds-content-max-width: 1400px; } /* ---------- Breakpoints (utilisables via @media) ---------- Convention : variables non utilisables directement dans @media (limitation CSS native), donc référence à conserver dans la doc. --ds-breakpoint-sm: 576px --ds-breakpoint-md: 768px --ds-breakpoint-lg: 992px --ds-breakpoint-xl: 1200px --ds-breakpoint-2xl: 1440px Utilisation type : @media (min-width: 768px) { ... } --------------------------------------------------------- */ /* ---------- Reset moderne minimal pour le scope DS ---------- Activé uniquement sur les éléments portant .ds-root. Permet d'appliquer la nouvelle typographie / espacements sans contaminer le CSS Inspinia/Bootstrap des pages legacy. --------------------------------------------------------- */ .ds-root { font-family: var(--ds-font-sans); font-size: var(--ds-font-size-sm); /* 12px : proche du body legacy 11px Verdana */ line-height: var(--ds-line-height-normal); color: var(--ds-color-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .ds-root *, .ds-root *::before, .ds-root *::after { box-sizing: border-box; }