/* ============================================ DESIGN TOKENS - SILOE Cabinet Comptable Système de variables CSS centralisé ============================================ */ :root { /* ============================================ COULEURS PRIMAIRES (extraites des logos) ============================================ */ /* Bleu SILOE (identité principale) */ --color-primary-900: #003870; --color-primary-800: #004A94; --color-primary: #0052A5; --color-primary-600: #2E6EBA; --color-primary-500: #5B8FCE; --color-primary-400: #88AEE0; --color-primary-300: #B5CEF2; /* Dégradé Feu (accent dynamique) */ --color-accent-orange: #FF9333; --color-accent-red: #FF4421; --color-accent-coral: #FF6B47; /* Gradients signature */ --gradient-fire: linear-gradient(135deg, #FF9333 0%, #FF6B47 50%, #FF4421 100%); --gradient-fire-subtle: linear-gradient(135deg, rgba(255,147,51,0.12) 0%, rgba(255,68,33,0.08) 100%); --gradient-blue-depth: linear-gradient(180deg, #003870 0%, #0052A5 100%); /* ============================================ COULEURS NEUTRES SOPHISTIQUÉES ============================================ */ --color-black: #0F1419; --color-black-soft: #1E252D; --color-gray-900: #2D3741; --color-gray-800: #4A5464; --color-gray-700: #6B7583; --color-gray-600: #8B94A3; --color-gray-500: #A8B0BD; --color-gray-400: #C5CBD6; --color-gray-300: #D9DFE8; --color-gray-200: #E4E8EC; --color-gray-100: #F0F2F5; --color-white-soft: #F8F9FB; --color-white: #FFFFFF; /* ============================================ TYPOGRAPHIE ============================================ */ /* Familles de polices */ --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Crimson Pro', Georgia, 'Times New Roman', serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; /* Échelle modulaire (ratio 1.250 - Major Third) */ --text-xs: 0.64rem; /* 10.24px */ --text-sm: 0.8rem; /* 12.8px */ --text-base: 1rem; /* 16px */ --text-md: 1.25rem; /* 20px */ --text-lg: 1.563rem; /* 25px */ --text-xl: 1.953rem; /* 31.25px */ --text-2xl: 2.441rem; /* 39.06px */ --text-3xl: 3.052rem; /* 48.83px */ --text-4xl: 3.815rem; /* 61.04px */ --text-5xl: 4.768rem; /* 76.29px */ /* Poids de police */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* Hauteurs de ligne optimisées */ --leading-tight: 1.2; --leading-snug: 1.4; --leading-normal: 1.65; --leading-relaxed: 1.8; --leading-loose: 2.1; /* Letterspacing contextuel */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.05em; /* ============================================ ESPACEMENTS (système 8pt) ============================================ */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 2.5rem; /* 40px */ --space-8: 3rem; /* 48px */ --space-9: 4rem; /* 64px */ --space-10: 5rem; /* 80px */ --space-11: 6rem; /* 96px */ --space-12: 8rem; /* 128px */ --space-13: 10rem; /* 160px */ --space-14: 12rem; /* 192px */ /* ============================================ OMBRES SOPHISTIQUÉES (multi-couches) ============================================ */ --shadow-xs: 0 1px 2px rgba(15, 20, 25, 0.04); --shadow-sm: 0 1px 3px rgba(15, 20, 25, 0.06), 0 1px 2px rgba(15, 20, 25, 0.04); --shadow-md: 0 4px 6px rgba(15, 20, 25, 0.07), 0 2px 4px rgba(15, 20, 25, 0.05); --shadow-lg: 0 10px 15px rgba(15, 20, 25, 0.08), 0 4px 6px rgba(15, 20, 25, 0.05); --shadow-xl: 0 20px 25px rgba(15, 20, 25, 0.1), 0 10px 10px rgba(15, 20, 25, 0.04); --shadow-2xl: 0 25px 50px rgba(15, 20, 25, 0.15), 0 15px 20px rgba(15, 20, 25, 0.08); /* Ombres spéciales */ --shadow-glow-fire: 0 0 20px rgba(255, 147, 51, 0.3), 0 0 40px rgba(255, 68, 33, 0.15); --shadow-glow-blue: 0 0 20px rgba(0, 82, 165, 0.25), 0 0 40px rgba(0, 82, 165, 0.12); /* ============================================ BORDURES & RAYONS ============================================ */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; --border-width: 1px; --border-width-md: 2px; --border-width-lg: 3px; /* ============================================ TRANSITIONS & ANIMATIONS ============================================ */ /* Durées */ --duration-instant: 100ms; --duration-fast: 200ms; --duration-base: 300ms; --duration-slow: 400ms; --duration-slower: 600ms; --duration-slowest: 800ms; /* Easings craftés */ --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --ease-in-smooth: cubic-bezier(0.4, 0, 1, 1); --ease-out-smooth: cubic-bezier(0, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); --ease-natural: cubic-bezier(0.32, 0.72, 0, 1); /* ============================================ LAYOUT & GRILLE ============================================ */ --container-xs: 480px; --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1440px; --container-max: 1600px; --gutter: var(--space-5); --gutter-mobile: var(--space-4); /* ============================================ Z-INDEX SYSTÈME ============================================ */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-overlay: 400; --z-modal: 500; --z-popover: 600; --z-tooltip: 700; /* ============================================ EFFETS SPÉCIAUX ============================================ */ /* Glassmorphism */ --glass-light: rgba(255, 255, 255, 0.08); --glass-medium: rgba(255, 255, 255, 0.12); --glass-strong: rgba(255, 255, 255, 0.18); --backdrop-blur-sm: blur(8px); --backdrop-blur-md: blur(16px); --backdrop-blur-lg: blur(24px); /* Opacités */ --opacity-subtle: 0.88; --opacity-medium: 0.72; --opacity-strong: 0.48; } /* ============================================ VARIANTES RESPONSIVE (réduction sur mobile) ============================================ */ @media (max-width: 768px) { :root { --text-3xl: 2.441rem; --text-4xl: 3.052rem; --text-5xl: 3.815rem; --space-9: 3rem; --space-10: 4rem; --space-11: 5rem; --space-12: 6rem; } }