/* ============================================ Margueritte Design System — tokens ============================================ Unique lieu ou une valeur de design est ecrite (spec docs/specs/design-system/2026-07-30-design-system-spec.md, sections 1-2). - La palette brute (--slate-*, --emerald-*, --amber-*, --sky-*, --violet-*, --red-*) est PRIVEE a ce fichier: seul tokens.css peut y faire reference. Le reste du code (CSS, .razor, MudTheme) ne consomme que des tokens semantiques --app-*. - Aucun hex ni rgb()/rgba() hors de ce fichier (garde scripts/check-ui-design-tokens.ps1, baseline ratchet pour l'existant). - Le MudTheme de Components/Layout/MainLayout.razor duplique certaines de ces valeurs (Mud exige des chaines C#); la coherence est verrouillee par DesignTokensCoherenceTests dans Margueritte.Api.Tests. - Light-only a l'usage: les valeurs dark de reference vivent dans la spec (section 1.2), pas ici. */ :root { /* ------------------------------------------ Palette brute — PRIVEE a ce fichier ------------------------------------------ */ --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; --emerald-50: #ecfdf5; --emerald-100: #d1fae5; --emerald-300: #6ee7b7; --emerald-500: #10b981; --emerald-600: #059669; --emerald-700: #047857; --emerald-800: #065f46; --emerald-900: #064e3b; --amber-50: #fffbeb; --amber-100: #fef3c7; --amber-500: #f59e0b; --amber-600: #d97706; --sky-50: #f0f9ff; --sky-100: #e0f2fe; --sky-200: #bae6fd; --sky-300: #7dd3fc; --sky-500: #0ea5e9; --sky-600: #0284c7; --violet-50: #f5f3ff; --violet-100: #ede9fe; --violet-500: #8b5cf6; --violet-600: #7c3aed; --red-50: #fef2f2; --red-100: #fee2e2; --red-500: #ef4444; --red-600: #dc2626; /* ------------------------------------------ Couleurs semantiques (spec 1.2) ------------------------------------------ */ --app-bg: var(--slate-50); --app-surface: #ffffff; --app-surface-sunken: var(--slate-50); --app-surface-sunken-strong: var(--slate-100); --app-surface-inverse: var(--slate-800); --app-text: var(--slate-800); --app-text-muted: var(--slate-500); --app-text-faint: var(--slate-400); --app-text-inverse: rgba(255, 255, 255, 0.7); --app-text-inverse-faint: rgba(255, 255, 255, 0.45); --app-border: var(--slate-200); --app-border-subtle: var(--slate-100); --app-border-strong: var(--slate-300); --app-accent: var(--slate-800); --app-accent-contrast: #ffffff; /* Par etat: couleur pleine (icones, bordures), -text (texte lisible sur fond clair ou teinte, decision v1.1 A/B), -bg (bandeaux, zones), -bg-strong (badges, chips - decision v1.1 C). */ --app-success: var(--emerald-500); --app-success-text: var(--emerald-700); --app-success-bg: var(--emerald-50); --app-success-bg-strong: var(--emerald-100); --app-warning: var(--amber-500); --app-warning-text: var(--amber-600); --app-warning-bg: var(--amber-50); --app-warning-bg-strong: var(--amber-100); --app-danger: var(--red-500); --app-danger-text: var(--red-600); --app-danger-bg: var(--red-50); --app-danger-bg-strong: var(--red-100); --app-info: var(--sky-500); --app-info-text: var(--sky-600); --app-info-bg: var(--sky-50); --app-info-bg-strong: var(--sky-100); --app-highlight: var(--violet-500); --app-highlight-text: var(--violet-600); --app-highlight-bg: var(--violet-50); --app-highlight-bg-strong: var(--violet-100); /* Barres de donnees en fond de cellule (tableaux demographiques): teintes pales, le chiffre reste en --app-text par-dessus. La teinte bleue porte la pyramide des ages, la neutre les demi-barres Total / Ensemble, un cran plus foncee que le survol de ligne (--app-surface-sunken) pour rester visible sous lui. */ --app-barre-donnees: var(--sky-100); --app-barre-donnees-neutre: var(--slate-200); --app-focus-ring: rgba(14, 165, 233, 0.4); --app-selection-bg: var(--sky-50); /* Voile de chargement pose au-dessus d'une surface claire. */ --app-veil: rgba(255, 255, 255, 0.9); /* ------------------------------------------ Sidebar — theme sombre local (decision 2026-08-06) La region .app-sidebar mappe ces tokens sur les variables --mud-palette-* (mecanisme natif MudBlazor); les elements faits main de la sidebar consomment ensuite les memes variables Mud que les MudNavLink voisins. ------------------------------------------ */ --app-sidebar-primary: #6393eb; --app-sidebar-primary-rgb: 99, 147, 235; --app-sidebar-hover: rgba(255, 255, 255, 0.06); --app-sidebar-surface: rgba(255, 255, 255, 0.05); --app-sidebar-lines: rgba(255, 255, 255, 0.1); --app-sidebar-divider: rgba(255, 255, 255, 0.08); --app-sidebar-text: rgba(255, 255, 255, 0.88); --app-sidebar-text-secondary: rgba(255, 255, 255, 0.52); /* Fond encastre du declencheur de recherche (plus sombre que le fond de la sidebar; retabli sur decision utilisateur du 2026-08-06). */ --app-sidebar-recess: rgba(0, 0, 0, 0.4); --app-sidebar-recess-hover: rgba(0, 0, 0, 0.5); /* ------------------------------------------ Espacements (spec 1.3) — multiples de 4px ------------------------------------------ */ --app-space-1: 4px; --app-space-2: 8px; --app-space-3: 12px; --app-space-4: 16px; --app-space-5: 20px; --app-space-6: 24px; --app-space-8: 32px; --app-space-10: 40px; --app-space-12: 48px; /* ------------------------------------------ Rayons et ombres (spec 1.4) ------------------------------------------ */ --app-radius-sm: 6px; --app-radius: 8px; --app-radius-lg: 12px; --app-radius-pill: 999px; /* Plat par defaut: aucune ombre au repos, la bordure fait le travail. */ --app-shadow-hover: 0 1px 3px rgba(0, 0, 0, 0.06); --app-shadow-overlay: 0 8px 24px rgba(15, 23, 42, 0.12); /* ------------------------------------------ Layout ------------------------------------------ */ --sidebar-width: 260px; --sidebar-collapsed-width: 68px; --transition-speed: 200ms; } /* ------------------------------------------ Environnement de staging (decision 2026-09-02) L'interface entiere signale l'environnement : accent et surfaces inverses (barre laterale) en vert, accent de navigation assorti. L'attribut est pose sur par App.razor (EnvironnementApplicatif) ; ThemesApplication.Staging duplique ces valeurs pour Mud et DesignTokensCoherenceTests verrouille l'accord. Les tokens de texte et d'etat ne changent pas : seul le cadre change de couleur. ------------------------------------------ */ :root[data-environnement="staging"] { --app-surface-inverse: var(--emerald-900); --app-accent: var(--emerald-800); --app-sidebar-primary: var(--emerald-300); --app-sidebar-primary-rgb: 110, 231, 183; }