/* * _app2/shared/assets/css/tokens.css * * Variables design tokens Dativo (palette, typo, spacings, shadows, transitions, z-layers). * Importe en premier par toute page _app2/. Source de verite unique des valeurs. * Toute valeur visuelle est referencee via var(--dv-*) — jamais en dur dans components.css. * * Phase 0 / Item F5 + Phase 2.5 Sprint A (sections 12 et 13 ajoutees 26/05/2026) */ :root { /* ===================================================== * 1. PALETTE DATIVO (cf. CLAUDE.md projet §5.1) * ===================================================== */ --dv-color-forest: #1f3d33; --dv-color-emerald: #4e7f65; --dv-color-tender: #157f77; --dv-color-dew: #dcf1e0; --dv-color-cream: #ffffff; --dv-color-terra: #e37222; --dv-color-emerald-hover: #3f6a54; --dv-color-emerald-active: #324f41; --dv-color-tender-hover: #0f6a63; --dv-color-terra-hover: #c75f12; /* ===================================================== * 2. NEUTRES * ===================================================== */ --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. SEMANTIQUE * ===================================================== */ --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. ETATS * ===================================================== */ --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; --dv-text-xs: 0.75rem; --dv-text-sm: 0.8125rem; --dv-text-md: 0.875rem; --dv-text-base: 1rem; --dv-text-lg: 1.125rem; --dv-text-xl: 1.375rem; --dv-text-2xl: 1.75rem; --dv-text-3xl: 2.25rem; --dv-leading-tight: 1.2; --dv-leading-snug: 1.35; --dv-leading-normal: 1.5; --dv-leading-relaxed: 1.65; --dv-weight-regular: 400; --dv-weight-medium: 500; --dv-weight-semibold: 600; --dv-weight-bold: 700; /* ===================================================== * 6. SPACING * ===================================================== */ --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 * ===================================================== */ --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 * ===================================================== */ --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; --dv-avatar-bg-2: #4e7f65; --dv-avatar-bg-3: #157f77; --dv-avatar-bg-4: #e37222; --dv-avatar-bg-5: #6b8e7f; --dv-avatar-bg-6: #8c5a3c; --dv-avatar-bg-7: #5c7a8a; --dv-avatar-bg-8: #9a7baa; }