/* ===================================================================== Design System — Tokens (variables CSS) --------------------------------------------------------------------- Style : Fintech Mint (Pennylane / Tiime / Qonto) Convention : ne JAMAIS écrire de valeur hex dans components.css — passer toujours par une variable définie ici. --- Source : porté depuis _Rusl/design_system_chantier/sandbox/_shared/tokens.css (sans les 3 blocs [data-color="C|D|E"] orphelins — DI-7 étape 0quater). Spec : CORR-DS-IMPL-1 ===================================================================== */ :root { /* ───────────────────────────────────────────────────────────────── Neutrals — Slate (gris froid, jamais changé selon couleur Chef) ───────────────────────────────────────────────────────────────── */ --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; /* Spec CORR-DS-IMPL-9 : labels secondaires sandbox 18 (10× usages) */ --slate-500: #64748b; --slate-600: #475569; /* Spec CORR-DS-IMPL-9 : labels formulaires sandbox 18 (10× usages) */ --slate-700: #334155; --slate-800: #1e293b; /* FIX-052 : etait fantome (7x color:), l'echelle sautait 700->900 */ --slate-900: #0f172a; /* ───────────────────────────────────────────────────────────────── Statuts sémantiques figés (ne changent JAMAIS, peu importe la couleur Chef choisie par l'utilisateur) ───────────────────────────────────────────────────────────────── */ /* Success (badge Payée, delta KPI ↑, validation) — toujours vert mint */ --success-50: #ecfdf5; --success-100: #d1fae5; --success-200: #a7f3d0; /* FIX-052 : etait fantome (1x border-color:) */ --success-500: #10b981; --success-600: #059669; --success-700: #047857; /* Warning / Pending (badge En attente, Envoyé) — toujours amber */ /* FIX-051 : -100/-200/-600 ajoutes (etaient utilises sans fallback -> gradients/fonds transparents). Ramp monotone : 50 -> 100 -> 200 -> 500 -> 600 -> 700. -300 reste volontairement non defini (sauve par son fallback inline #fcd34d). */ --warning-50: #fef3c7; --warning-100: #fde68a; --warning-200: #fcd34d; --warning-500: #f59e0b; --warning-600: #d97706; --warning-700: #92400e; /* Danger / Overdue (badge En retard, erreur, delta KPI ↓) — toujours rouge */ /* FIX-051 (jumeau §7) : -100/-200 ajoutes (memes tokens fantomes que warning, cassaient le badge « Critique » + bannieres echeance). Ramp monotone entre 50 et 500. */ --danger-50: #fee2e2; --danger-100: #fecaca; --danger-200: #fca5a5; --danger-500: #dc2626; --danger-600: #b91c1c; --danger-700: #991b1b; /* ───────────────────────────────────────────────────────────────── Couleur Chef (accent) — par défaut Vert menthe (A) Surchargée par :root[data-color="B"] et :root[data-color="F"] ci-dessous Note : codes C, D, E retirés (non supportés par DI-3 backend ENUM('A','B','F')) ───────────────────────────────────────────────────────────────── */ --accent-50: #ecfdf5; --accent-100: #d1fae5; --accent-200: #a7f3d0; /* Spec CORR-DS-IMPL-2 : utilise par .lp-btn-ghost (border zone live-preview) */ --accent-300: #6ee7b7; /* Spec CORR-DS-IMPL-9 : annual-footer.is-grand valeur grand TTC */ --accent-400: #34d399; /* FIX-052 : etait fantome (5x border/box-shadow). Themable : ce bloc = mint defaut. */ --accent-500: #10b981; --accent-600: #059669; --accent-700: #047857; --accent-on-dark: #6ee7b7; /* Spec CORR-DS-IMPL-9 : variante claire pour fond slate-900 annual-footer (A defaut) */ /* ───────────────────────────────────────────────────────────────── Géométrie / élévation ───────────────────────────────────────────────────────────────── */ /* Radius par ROLE (card/btn/input/pill) + FIX-052 : par TAILLE (sm/md) — deux conventions cohabitent, le code referencait deja sm/md sans qu'ils soient definis (coins a angle droit). Echelle : sm(6) < input/btn(8) < md(10) < card(14) ; les 6 usages sm/md verifies ne visant aucun element « card ». */ --radius-card: 14px; --radius-md: 10px; /* FIX-052 : etait fantome (4x border-radius: champs/items recherche+modale) */ --radius-btn: 8px; --radius-input: 8px; --radius-sm: 6px; /* FIX-052 : etait fantome (2x border-radius: entetes modale catalogue) */ --radius-pill: 99px; --shadow-card: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.04); --shadow-card-hover: 0 2px 4px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.06); --shadow-focus: 0 0 0 3px var(--accent-50); /* ───────────────────────────────────────────────────────────────── Typographie ───────────────────────────────────────────────────────────────── */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --fs-xs: 11.5px; /* Labels uppercase, hint, footer */ --fs-sm: 12.5px; /* Dates, sous-titres, métadonnées */ --fs-md: 13.5px; /* Texte courant tableau / formulaire */ --fs-base: 14px; /* Body */ --fs-lg: 16px; /* Titres de section, brand */ --fs-xl: 22px; /* KPI valeur */ --fs-2xl: 24px; /* Titre de page */ /* ───────────────────────────────────────────────────────────────── Espacements (échelle 4px) ───────────────────────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; /* ───────────────────────────────────────────────────────────────── Layout ───────────────────────────────────────────────────────────────── */ --sidebar-width: 240px; --header-height: 56px; /* Porté depuis app.css:4 (existe en prod, cf. B-G10 audit 1) */ --main-padding: 32px 36px; } /* ===================================================================== Overrides Couleur Chef — sélection via data-color sur Codes A (défaut, sans override), B, F retenus par DI-3. Codes C, D, E orphelins retirés. ===================================================================== */ :root[data-color="B"] { /* Bleu pétrole / Teal — Stripe Atlas · Notion · Linear */ --accent-50: #ecfeff; --accent-100: #cffafe; --accent-200: #a5f3fc; /* Spec CORR-DS-IMPL-2 */ --accent-300: #67e8f9; /* Spec CORR-DS-IMPL-9 : annual-footer.is-grand valeur grand TTC */ --accent-400: #22d3ee; /* FIX-052 : override cyan (sinon heriterait du mint -> halo vert menthe sur ce theme) */ --accent-500: #0891b2; --accent-600: #0e7490; --accent-700: #155e75; --accent-on-dark: #67e8f9; /* Spec CORR-DS-IMPL-9 : variante claire pour fond slate-900 (contraste lisibilite vs --accent-500 teal trop fonce sur dark) */ --shadow-focus: 0 0 0 3px var(--accent-50); } :root[data-color="F"] { /* Orange terracotta — Notion · Substack */ --accent-50: #fff7ed; --accent-100: #ffedd5; --accent-200: #fed7aa; /* Spec CORR-DS-IMPL-2 */ --accent-300: #fdba74; /* Spec CORR-DS-IMPL-9 : annual-footer.is-grand valeur grand TTC */ --accent-400: #fb923c; /* FIX-052 : override orange (sinon heriterait du mint) */ --accent-500: #ea580c; --accent-600: #c2410c; --accent-700: #9a3412; --accent-on-dark: #fdba74; /* Spec CORR-DS-IMPL-9 : variante claire pour fond slate-900 (contraste lisibilite vs --accent-500 terracotta fonce sur dark) */ --shadow-focus: 0 0 0 3px var(--accent-50); }