/* ────────────────────────────────────────────────────────────── Design tokens — variables globales du dashboard commerçant. Les tokens existants sont préservés à l'identique (aucun changement visuel sur les rules qui les consomment déjà). Les nouveaux tokens (spacing, typo, radius, shadow) serviront de fondation aux futurs écrans extraits (J3+). ────────────────────────────────────────────────────────────── */ :root { /* ── Couleurs (existantes, préservées) ── */ --bg: #F8F8FC; --card: #FFFFFF; --primary: #0F0F14; --secondary: #6B7280; --separator: #E5E7EB; --blue: #0066FF; --green: #00B377; --red: #EF4444; --radius: 14px; /* alias historique, conservé pour compat */ /* ── Couleurs enrichies (nouvelles) ── */ --text: #0F0F14; /* texte principal (= --primary, plus parlant) */ --text-muted: #8E8E93; --muted: #8E8E93; /* alias utilisé dans les styles inline historiques */ --text-inverse:#FFFFFF; --danger: #FF3B30; /* alias rouge pour "supprimer" */ --accent: #4F46E5; /* indigo accent (CTA, liens) */ --surface: #F8F9FB; /* surface secondaire (cartes neutres) */ --blue-soft: #E0EBFF; --green-soft: #DCFCE7; --red-soft: #FEE2E2; --amber: #F59E0B; --amber-soft: #FEF3C7; /* ── Typographie ── */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --text-xs: 11px; --text-sm: 12px; --text-base: 13px; --text-md: 14px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 22px; --text-3xl: 24px; --text-4xl: 28px; /* ── Espacements (échelle x4) ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* ── Rayons (échelle) ── */ --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 14px; --radius-2xl: 16px; --radius-full: 999px; /* ── Ombres (échelle) ── */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.04); --shadow-sm: 0 2px 8px rgba(0,0,0,0.05); --shadow-md: 0 4px 16px rgba(0,0,0,0.08); --shadow-lg: 0 8px 32px rgba(0,0,0,0.08); /* ── Transitions standard ── */ --t-fast: 0.12s; --t: 0.15s; --t-slow: 0.3s; /* ── Layer z-index (ordre explicite) ── */ --z-nav: 100; --z-modal: 1000; --z-toast: 1100; } /* ────────────────────────────────────────────────────────────── Dark mode — activé via ou classe .dark sur body. Redéfinit les mêmes tokens en version sombre. Pas de transition globale car trop coûteux (paint complet). ────────────────────────────────────────────────────────────── */ :root[data-theme="dark"], html.dark, body.dark { /* Couleurs de base inversées */ --bg: #0B0B10; --card: #16161D; --primary: #F5F5F7; /* texte principal clair */ --secondary: #9A9AA6; --separator: #2A2A33; --blue: #4A8FFF; --green: #30D158; --red: #FF6B6B; /* Couleurs enrichies */ --text: #F5F5F7; --text-muted: #9A9AA6; --muted: #9A9AA6; --text-inverse:#0B0B10; /* utilisé pour texte sur fond clair */ --danger: #FF6B6B; --accent: #6D5EFA; --surface: #1C1C25; --blue-soft: #1E2A4D; --green-soft: #143B22; --red-soft: #3D1C1C; --amber: #F59E0B; --amber-soft: #3D2D0A; /* Ombres plus subtiles sur fond sombre (le contraste vient du border) */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.4); --shadow-sm: 0 2px 8px rgba(0,0,0,0.45); --shadow-md: 0 4px 16px rgba(0,0,0,0.5); --shadow-lg: 0 8px 32px rgba(0,0,0,0.6); }