/* * _app2/shared/assets/css/tokens.css * * Variables design tokens Dativo (palette, typo, spacings, shadows, transitions, z-layers). * Importé en premier par toute page _app2/. Source de vérité unique des valeurs. * Toute valeur visuelle est référencée via var(--dv-*) — jamais en dur dans components.css. * * Phase 0 / Item F5 (cf. _app2/.documentation/PlanDev_PHASE_0_FONDATIONS.md * et PlanDev_DESIGN_SYSTEM.md §1) */ :root { /* ===================================================== * 1. PALETTE DATIVO (cf. CLAUDE.md projet §5.1) * ===================================================== */ /* Charte V2 « Emerald » (cf. CHARTE_GRAPHIQUE.html) — Emerald #4E7F65 = primaire, Forest = encre. Échelle Emerald teinte unique 148°. */ --dv-color-forest: #1f3d33; /* ENCRE — texte, titres, fonds foncés (blanc 11,8:1 AAA) */ --dv-color-emerald: #4e7f65; /* PRIMAIRE — logo, CTA, aplats marque, liens (blanc 4,6:1 AA) */ --dv-color-tender: #157f77; /* Teal accent — highlights, badges (blanc 4,8:1 AA) */ --dv-color-dew: #dcf1e0; /* Badges, highlights, fond soft (texte encre 9,7:1) */ --dv-color-cream: #ffffff; /* Fond de page */ --dv-color-terra: #e37222; /* Accent conversion — label ≥19px bold (blanc 3,1:1) */ /* Échelle Emerald (teinte 148°) — surfaces, états, dérivés */ --dv-color-emerald-900: #193828; --dv-color-emerald-800: #264c38; --dv-color-emerald-700: #37664d; --dv-color-emerald-600: #44755b; --dv-color-emerald-500: #4e7f65; /* = --dv-color-emerald (primaire) */ --dv-color-emerald-400: #659e80; --dv-color-emerald-300: #84bd9f; --dv-color-emerald-200: #a7d6bd; --dv-color-emerald-100: #caebd9; --dv-color-emerald-50: #e4f7ed; /* États boutons primaires — RGAA : on FONCE au survol/clic, jamais on éclaircit */ --dv-color-emerald-hover: #37664d; /* Emerald 700 — survol (blanc 6,6:1 AAA) */ --dv-color-emerald-active: #264c38; /* Emerald 800 — clic (blanc 9,7:1 AAA) */ --dv-color-tender-hover: #0f6a63; --dv-color-terra-hover: #c75f12; /* Alias de rôle primaire (= Emerald) */ --dv-color-primary: var(--dv-color-emerald); --dv-color-primary-hover: var(--dv-color-emerald-hover); --dv-color-primary-active: var(--dv-color-emerald-active); /* ===================================================== * 2. NEUTRES — échelle greenish-cream tirée vers gris * (cohérence chromatique avec forest/emerald) * ===================================================== */ --dv-g-50: #fafbfa; --dv-g-100: #f3f6f4; --dv-g-200: #e5ebe7; --dv-g-300: #cfd8d2; --dv-g-400: #a3b0a8; --dv-g-500: #74837a; --dv-g-600: #54625a; --dv-g-700: #3d4842; --dv-g-800: #2a322d; --dv-g-900: #1a201d; /* ===================================================== * 3. SÉMANTIQUE — usages contextualisés (themable) * ===================================================== */ --dv-bg-page: var(--dv-color-cream); --dv-bg-card: var(--dv-color-cream); --dv-bg-elevated: #fdfefd; --dv-bg-muted: var(--dv-g-100); --dv-bg-overlay: rgba(31, 61, 51, 0.55); --dv-text-primary: var(--dv-color-forest); --dv-text-muted: var(--dv-g-600); --dv-text-subtle: var(--dv-g-500); --dv-text-inverse: var(--dv-color-cream); --dv-text-link: var(--dv-color-tender); --dv-border-default: var(--dv-g-200); --dv-border-strong: var(--dv-g-300); --dv-border-focus: var(--dv-color-emerald); /* ===================================================== * 4. ÉTATS (success / warning / danger / info) * Chacun avec : couleur principale, bg léger, border * ===================================================== */ --dv-color-success: #15803d; --dv-color-success-bg: #dcfce7; --dv-color-success-border: #86efac; --dv-color-warning: #b45309; --dv-color-warning-bg: #fef3c7; --dv-color-warning-border: #fcd34d; --dv-color-danger: #b91c1c; --dv-color-danger-bg: #fee2e2; --dv-color-danger-border: #fca5a5; --dv-color-info: #1d4ed8; --dv-color-info-bg: #dbeafe; --dv-color-info-border: #93c5fd; /* ===================================================== * 5. TYPOGRAPHIE * ===================================================== */ --dv-font-title: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; --dv-font-body: 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; --dv-font-accent: 'Fraunces', Georgia, 'Times New Roman', serif; --dv-font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; /* Tailles (échelle modulaire, base 16px) */ --dv-text-xs: 0.75rem; /* 12px — micro */ --dv-text-sm: 0.8125rem; /* 13px — tables, helper */ --dv-text-md: 0.875rem; /* 14px — corps standard */ --dv-text-base: 1rem; /* 16px — base navigateur */ --dv-text-lg: 1.125rem; /* 18px — sous-titre */ --dv-text-xl: 1.375rem; /* 22px — H3 */ --dv-text-2xl: 1.75rem; /* 28px — H2 */ --dv-text-3xl: 2.25rem; /* 36px — H1 hero */ /* Line-heights */ --dv-leading-tight: 1.2; --dv-leading-snug: 1.35; --dv-leading-normal: 1.5; --dv-leading-relaxed: 1.65; /* Weights */ --dv-weight-regular: 400; --dv-weight-medium: 500; --dv-weight-semibold: 600; --dv-weight-bold: 700; /* ===================================================== * 6. SPACING (échelle 4px) * ===================================================== */ --dv-space-0: 0; --dv-space-1: 4px; --dv-space-2: 8px; --dv-space-3: 12px; --dv-space-4: 16px; --dv-space-5: 20px; --dv-space-6: 24px; --dv-space-8: 32px; --dv-space-10: 40px; --dv-space-12: 48px; --dv-space-16: 64px; --dv-space-20: 80px; --dv-space-24: 96px; /* ===================================================== * 7. RADII * ===================================================== */ --dv-radius-none: 0; --dv-radius-sm: 4px; --dv-radius-md: 8px; --dv-radius-lg: 12px; --dv-radius-xl: 16px; --dv-radius-full: 9999px; /* ===================================================== * 8. SHADOWS — tons forest (cohérence avec palette) * ===================================================== */ --dv-shadow-sm: 0 1px 2px 0 rgba(31, 61, 51, 0.06); --dv-shadow-md: 0 4px 6px -1px rgba(31, 61, 51, 0.10), 0 2px 4px -2px rgba(31, 61, 51, 0.08); --dv-shadow-lg: 0 10px 15px -3px rgba(31, 61, 51, 0.12), 0 4px 6px -4px rgba(31, 61, 51, 0.08); --dv-shadow-xl: 0 20px 25px -5px rgba(31, 61, 51, 0.14), 0 8px 10px -6px rgba(31, 61, 51, 0.08); /* ===================================================== * 9. TRANSITIONS * ===================================================== */ --dv-ease: cubic-bezier(0.4, 0, 0.2, 1); --dv-transition-fast: 120ms var(--dv-ease); --dv-transition-normal: 200ms var(--dv-ease); --dv-transition-slow: 320ms var(--dv-ease); /* ===================================================== * 10. Z-INDEX LAYERS * ===================================================== */ --dv-z-base: 1; --dv-z-dropdown: 100; --dv-z-sticky: 200; --dv-z-modal: 1000; --dv-z-toast: 1100; --dv-z-tooltip: 1200; /* ===================================================== * 11. LAYOUT (constantes utiles) * ===================================================== */ --dv-container-max: 1280px; --dv-sidebar-width: 240px; /* ===================================================== * 12. ICONES — tailles Lucide * (Phase 2.5 Sprint A — Item A1) * ===================================================== */ --dv-icon-sm: 16px; --dv-icon-md: 20px; --dv-icon-lg: 24px; --dv-icon-xl: 32px; /* ===================================================== * 13. AVATARS — palette deterministe (8 couleurs) * Derivees de la charte + variantes desaturees * (Phase 2.5 Sprint A — Item A4) * ===================================================== */ --dv-avatar-bg-1: #1f3d33; /* forest */ --dv-avatar-bg-2: #4e7f65; /* emerald */ --dv-avatar-bg-3: #157f77; /* tender */ --dv-avatar-bg-4: #e37222; /* terra */ --dv-avatar-bg-5: #6b8e7f; /* sage (desature) */ --dv-avatar-bg-6: #8c5a3c; /* terracota tamise */ --dv-avatar-bg-7: #5c7a8a; /* slate bleute */ --dv-avatar-bg-8: #9a7baa; /* mauve doux */ }