/** * Mary Design System - CSS Variables * * Fichier centralisé pour toutes les variables CSS du dashboard. * Importez ce fichier EN PREMIER dans vos autres fichiers CSS. */ :root { /* ======================================== Z-INDEX SCALE Echelle standardisée pour éviter les conflits ======================================== */ --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-sidebar: 400; --z-modal-backdrop: 500; --z-modal: 600; --z-popover: 700; --z-tooltip: 800; --z-toast: 900; --z-max: 9999; /* ======================================== COLORS - Primary (Green) ======================================== */ --primary-50: #ecfdf5; --primary-100: #d1fae5; --primary-200: #a7f3d0; --primary-300: #6ee7b7; --primary-400: #34d399; --primary-500: #10b981; --primary-600: #059669; --primary-700: #047857; --primary-800: #065f46; --primary-900: #064e3b; /* ======================================== COLORS - Secondary (Blue) ======================================== */ --secondary-50: #eff6ff; --secondary-100: #dbeafe; --secondary-200: #bfdbfe; --secondary-300: #93c5fd; --secondary-400: #60a5fa; --secondary-500: #3b82f6; --secondary-600: #2563eb; --secondary-700: #1d4ed8; --secondary-800: #1e40af; --secondary-900: #1e3a8a; /* ======================================== COLORS - Gray (Neutral) ======================================== */ --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; /* ======================================== COLORS - Warm Gray (backgrounds) ======================================== */ --gray-warm-50: #ffffff; --gray-warm-100: #fafafa; --gray-warm-200: #f5f5f4; /* ======================================== COLORS - Slate (Cool Gray) ======================================== */ --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a; /* ======================================== COLORS - Neutral ======================================== */ --neutral-50: #fafafa; --neutral-100: #f5f5f5; --neutral-200: #e5e5e5; --neutral-300: #d4d4d4; --neutral-400: #a3a3a3; --neutral-500: #737373; --neutral-600: #525252; --neutral-700: #404040; --neutral-800: #262626; --neutral-900: #171717; --neutral-950: #1a1a1a; /* ======================================== COLORS - Indigo ------------------------------------------ L'échelle violette a été retirée : elle ne codait aucune idée stable (elle servait tour à tour de « catégorie », de « chaud », de « type »), et une couleur qu'il faut apprendre ne vaut pas mieux que pas de couleur. Ce qui était décoratif est passé au neutre (--slate-*), ce qui portait vraiment une information a reçu une teinte propre. ======================================== */ --indigo-500: #4f7ef0; /* ======================================== COLORS - Extended Green ======================================== */ --green-100: #dcfce7; --green-500: #22c55e; --green-600: #16a34a; --green-700: #15803d; --green-800: #166534; /* ======================================== COLORS - Semantic ======================================== */ --success-50: #ecfdf5; --success-100: #d1fae5; --success-500: #10b981; --success-600: #059669; --success-700: #047857; --warning-50: #fffbeb; --warning-100: #fef3c7; --warning-200: #fde68a; --warning-300: #fcd34d; --warning-400: #fbbf24; --warning-500: #f59e0b; --warning-600: #d97706; --warning-700: #b45309; --warning-800: #92400e; --danger-50: #fef2f2; --danger-100: #fee2e2; --danger-200: #fecaca; --danger-300: #fca5a5; --danger-400: #f87171; --danger-500: #ef4444; --danger-600: #dc2626; --danger-700: #b91c1c; --danger-800: #991b1b; --info-50: #eff6ff; --info-100: #dbeafe; --info-500: #3b82f6; --info-600: #2563eb; /* ======================================== TYPOGRAPHY ======================================== */ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.025em; /* ======================================== SPACING ======================================== */ --spacing-xs: 0.25rem; /* 4px */ --spacing-sm: 0.5rem; /* 8px */ --spacing-md: 1rem; /* 16px */ --spacing-lg: 1.5rem; /* 24px */ --spacing-xl: 2rem; /* 32px */ --spacing-2xl: 3rem; /* 48px */ /* ======================================== BORDERS & RADIUS ======================================== */ --radius-sm: 0.375rem; /* 6px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.25rem; /* 20px */ --radius-full: 9999px; /* ======================================== SHADOWS ======================================== */ --shadow-color: rgba(0, 0, 0, 0.12); --shadow-color-strong: rgba(0, 0, 0, 0.25); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.12), 0 2px 4px -2px rgba(0, 0, 0, 0.08); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.12), 0 4px 6px -4px rgba(0, 0, 0, 0.08); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.06); --shadow-2xl: 0 25px 50px -12px var(--shadow-color-strong); /* Brand shadows */ --shadow-brand-sm: 0 2px 8px rgba(16, 185, 129, 0.08); --shadow-brand-md: 0 4px 16px rgba(16, 185, 129, 0.12); --shadow-brand-lg: 0 8px 24px rgba(16, 185, 129, 0.16); /* ======================================== TRANSITIONS & ANIMATIONS ======================================== */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 150ms; --duration-normal: 200ms; --duration-slow: 300ms; /* ======================================== LAYOUT - Responsive Breakpoints ======================================== */ --breakpoint-xs: 375px; /* Small phone (iPhone SE) */ --breakpoint-sm: 480px; /* Standard phone */ --breakpoint-md: 640px; /* Large phone / small tablet */ --breakpoint-lg: 768px; /* Tablet */ --breakpoint-xl: 1024px; /* Desktop */ --breakpoint-2xl: 1280px; /* Large desktop */ /* Legacy alias */ --breakpoint-mobile: 768px; /* Sidebar */ --sidebar-width: 280px; --sidebar-collapsed-width: 80px; /* Desktop Sidebar Rail */ --rail-width-collapsed: 64px; --rail-width-expanded: 252px; --rail-bg: #ffffff; --rail-border: var(--gray-200); /* Legacy alias */ --icon-bar-width: var(--rail-width-collapsed); /* Top Bar */ --top-bar-height: 56px; --top-bar-bg: #ffffff; --top-bar-border: var(--gray-200); /* Tab Bar (Mobile) */ --tab-bar-height: 56px; --tab-bar-height-safe: calc(56px + env(safe-area-inset-bottom, 0px)); --tab-bar-bg: rgba(255, 255, 255, 0.92); --tab-bar-blur: 20px; /* Command Center */ --cc-modal-width: 560px; --cc-modal-max-height: 70vh; --cc-modal-radius: 16px; --cc-modal-shadow: var(--shadow-2xl); --cc-radius: 20px; /* ======================================== RAIL ITEMS ======================================== */ --rail-item-height: 42px; --rail-item-color: var(--gray-600); --rail-item-color-hover: var(--gray-900); --rail-item-color-active: var(--primary-700); --rail-item-bg-hover: var(--gray-100); --rail-item-bg-active: var(--primary-50); /* ======================================== TAB ITEMS (Mobile) ======================================== */ --tab-item-color: var(--gray-500); --tab-item-color-active: var(--primary-600); --tab-item-size: 24px; /* ======================================== FOCUS STATES ======================================== */ --focus-ring: 0 0 0 3px rgba(16, 185, 129, 0.25); --focus-ring-offset: 2px; /* ======================================== MARY SEMANTIC - Primary Brand (aliases referencing core scales) ======================================== */ --mary-primary: var(--primary-500); --mary-primary-50: var(--primary-50); --mary-primary-100: var(--primary-100); --mary-primary-200: var(--primary-200); --mary-primary-300: var(--primary-300); --mary-primary-400: var(--primary-400); --mary-primary-500: var(--primary-500); --mary-primary-600: var(--primary-600); --mary-primary-700: var(--primary-700); --mary-primary-800: var(--primary-800); --mary-primary-900: var(--primary-900); /* ======================================== MARY SEMANTIC - Secondary ======================================== */ --mary-secondary: var(--secondary-500); --mary-secondary-50: var(--secondary-50); --mary-secondary-100: var(--secondary-100); --mary-secondary-200: var(--secondary-200); --mary-secondary-300: var(--secondary-300); --mary-secondary-400: var(--secondary-400); --mary-secondary-500: var(--secondary-500); --mary-secondary-600: var(--secondary-600); --mary-secondary-700: var(--secondary-700); --mary-secondary-800: var(--secondary-800); --mary-secondary-900: var(--secondary-900); /* ======================================== MARY SEMANTIC - Grays ======================================== */ --mary-gray-50: var(--gray-50); --mary-gray-100: var(--gray-100); --mary-gray-200: var(--gray-200); --mary-gray-300: var(--gray-300); --mary-gray-400: var(--gray-400); --mary-gray-500: var(--gray-500); --mary-gray-600: var(--gray-600); --mary-gray-700: var(--gray-700); --mary-gray-800: var(--gray-800); --mary-gray-900: var(--gray-900); /* ======================================== MARY SEMANTIC - Status & Alerts ======================================== */ --mary-success: var(--success-500); --mary-success-light: var(--success-100); --mary-success-dark: var(--primary-700); --mary-warning: #f59e0b; --mary-warning-light: var(--warning-100); --mary-warning-dark: var(--warning-600); --mary-error: var(--danger-500); --mary-error-light: var(--danger-100); --mary-error-dark: var(--danger-600); --mary-info: var(--info-500); --mary-info-light: var(--info-100); --mary-info-dark: var(--info-600); /* ======================================== SOCLE DE THÈME — surfaces, encres, filets, marque et statuts ------------------------------------------------------------ UNE grammaire pour tout le produit. dark-mode.css la retourne d'un bloc (`html.dark-mode`, 0,1,1 — il gagne sur le `:root` d'une feuille d'app même chargée après le bundle). Toute feuille d'app doit exprimer sa palette EN ALIAS de ce socle (`--tn-bg-soft: var(--sf-2)`) plutôt que de retaper des littéraux. Une palette écrite en alias n'a RIEN à déclarer dans dark-mode.css : elle bascule toute seule. C'est la seule façon de ne pas retaper les mêmes quinze couleurs sous soixante noms différents. Les valeurs claires suivent la grammaire réellement en vigueur dans le produit (direction Attio/Apple : #1a1a1a, #f5f5f7, filets translucides), pas les gris Tailwind des feuilles héritées. DEUX rôles, deux jetons — ne jamais les confondre, ils tombent sur la même valeur en CLAIR et divergent en SOMBRE : --sf-3 appui POSÉ SUR la carte (pastille, en-tête de table) --sf-under fond de page SOUS la carte C'est exactement le piège qui avait aplati tout le sombre en noir sur noir quand --gray-warm-50 portait les deux. Ne PAS utiliser pour ce qui doit rester blanc par nature (QR à scanner, aperçu de PDF ou de ticket, maquette d'écran client, feuille d'impression). ======================================== */ /* --- Surfaces --- */ --sf-page: #ffffff; /* fond de page → #000000 */ --sf-1: #ffffff; /* carte, panneau, surface primaire → #161b22 */ --sf-2: #fafafa; /* creux, survol, zone en retrait → #1c2128 */ --sf-3: #f5f5f7; /* appui POSÉ SUR la carte → #21262d */ --sf-pop: #ffffff; /* modale, menu déroulant, popover → #242a33 */ --sf-under: #f5f5f7; /* fond SOUS la carte → #0d1117 */ /* --- Filets --- Translucides à dessein : un filet noir à 7 % se pose correctement sur n'importe quelle surface, un filet opaque doit être choisi par fond. */ --sf-line: rgba(0, 0, 0, 0.07); /* filet → #2d333b */ --sf-line-strong: rgba(0, 0, 0, 0.12); /* filet appuyé → #444c56 */ /* --- Encres --- */ --fg-1: #1a1a1a; /* texte principal → #f0f6fc */ --fg-2: #4d4d52; /* texte secondaire → #adbac7 */ --fg-3: #67676c; /* texte discret → #8b949e */ --fg-4: #86868b; /* mention, horodatage → #768390 */ --fg-5: #b0b0b0; /* le plus effacé → #6e7681 */ /* --- Marque et statuts --- En sombre le vert de marque s'éclaircit : #00a86b sur #161b22 tombe sous le contraste minimum. Même raison pour l'ambre et le rouge. */ --ac-brand: #00a86b; /* → #3fb950 */ --ac-brand-strong: #047857; /* → #56d364 */ --ac-brand-soft: rgba(0, 168, 107, 0.09); /* → rgba(63,185,80,0.15) */ --ac-brand-pulse: rgba(0, 168, 107, 0.18); /* → rgba(63,185,80,0.25) */ --ac-warn: #b45309; /* → #e3b341 */ --ac-warn-soft: rgba(217, 119, 6, 0.12); /* → rgba(227,179,65,0.15) */ --ac-danger: #c81e1e; /* → #f85149 */ --ac-danger-soft: rgba(220, 38, 38, 0.09); /* → rgba(248,81,73,0.15) */ /* Bleu canard plutôt que la sarcelle #0d9488 ou le bleu #3b82f6 : les deux échouaient au contraste sur du texte (3,74 et 3,68), or ces jetons servent d'ENCRE dans 96 déclarations sur 132. Et la sarcelle ne tombait qu'à 17° de teinte du vert de marque, qui sert AUSSI de succès : sur une pastille de 6 px, « information » et « succès » devenaient la même couleur. Le canard garde le caractère froid des fiches avec 35° d'écart. */ --ac-info: #0e7490; /* → #22d3ee */ --ac-info-soft: rgba(14, 116, 144, 0.10); /* → rgba(34,211,238,0.15) */ /* Le NEUTRE porte ce qui n'a pas de statut : un partenaire, une catégorie « autre », une pastille sans verdict. Le violet servait à ça avant d'être banni du produit. */ --ac-neutre: #4d4d52; /* → #adbac7 */ --ac-neutre-soft: #f0f0f3; /* → rgba(139,148,158,0.15) */ --ac-focus: 0 0 0 3px rgba(0, 168, 107, 0.30); /* ======================================== MARY SEMANTIC - Backgrounds ======================================== */ --mary-bg-primary: #ffffff; --mary-bg-secondary: var(--gray-50); --mary-bg-tertiary: var(--gray-100); --mary-bg-dark: var(--gray-900); /* ======================================== MARY SEMANTIC - Text ======================================== */ --mary-text-primary: var(--gray-900); --mary-text-secondary: var(--gray-500); --mary-text-tertiary: var(--gray-400); --mary-text-inverse: #ffffff; /* ======================================== MARY SEMANTIC - Borders ======================================== */ --mary-border-light: var(--gray-200); --mary-border-medium: var(--gray-300); --mary-border-dark: var(--gray-400); /* ======================================== MARY SEMANTIC - Shadows ======================================== */ --mary-shadow-sm: var(--shadow-sm); --mary-shadow-md: var(--shadow-md); --mary-shadow-lg: var(--shadow-lg); --mary-shadow-xl: var(--shadow-xl); /* ======================================== BRAND INTEGRATION COLORS ======================================== */ --mary-gmail: #ea4335; --mary-gmail-light: #fecaca; --mary-gcal: #4285f4; --mary-gcal-light: #dbeafe; --mary-stripe: #635bff; --mary-stripe-light: #e0e7ff; --mary-banking: #0ea5e9; --mary-banking-light: #e0f2fe; /* ======================================== MODULE-SPECIFIC COLORS ======================================== */ /* CRM Module */ --crm-primary: var(--mary-primary); --crm-contact: #10b981; --crm-opportunity: #f59e0b; --crm-activity: #3b82f6; /* POS Module */ --pos-primary: var(--mary-secondary); --pos-blue: #3b82f6; --pos-sale: #10b981; --pos-return: #ef4444; /* Finance Module */ --finance-primary: var(--mary-primary); --finance-revenue: #10b981; --finance-expense: #ef4444; --finance-neutral: #6b7280; /* Sales Module */ --sales-primary: var(--mary-primary); --sales-invoice: #10b981; --sales-quote: #f59e0b; --sales-order: #3b82f6; /* Achats Module */ --achats-primary: var(--mary-primary); --achats-supplier: #6366f1; --achats-expense: #ef4444; --achats-order: #f59e0b; /* Messagerie Module */ --messagerie-primary: var(--mary-gmail); --messagerie-inbox: #10b981; --messagerie-sent: #3b82f6; --messagerie-draft: #f59e0b; /* Agenda Module */ --agenda-primary: var(--mary-primary); --agenda-event: #10b981; --agenda-meeting: #3b82f6; --agenda-task: #f59e0b; --agenda-reminder: #ec4899; } /* ======================================== GLOBAL RESPONSIVE RULES ======================================== */ /* Responsive images — prevent overflow on all screens */ img, video, svg { max-width: 100%; height: auto; } /* Minimum touch target size (WCAG 2.5.8) */ @media (pointer: coarse) { button, [role="button"], a.btn, .mary-btn, input[type="submit"], input[type="button"] { min-height: 44px; } } /* Protect hover-only effects from touch devices */ @media (hover: hover) and (pointer: fine) { .mary-card-hover:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } } /* Force 16px on form inputs to prevent iOS auto-zoom */ @media (max-width: 768px) { input, select, textarea { font-size: 16px !important; } }