/** * Liquid Glass Design System - Variables CSS * Version: 1.0 * Support: Dark Mode (défaut) + Light Mode * * Usage: * - Dark mode: * - Light mode: */ /* ======================================== IMPORTS ======================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Roboto:wght@300;400;500;700&family=Source+Sans+Pro:wght@300;400;600;700&display=swap'); /* ======================================== VARIABLES GLOBALES (indépendantes du thème) ======================================== */ :root { /* Espacements */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-2xl: 48px; /* Border radius */ --radius-xs: 5px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* Transitions */ --transition-fast: 0.15s ease; --transition-base: 0.3s ease; --transition-slow: 0.5s ease; /* Glass effect */ --glass-blur: 20px; --glass-blur-sm: 10px; --glass-blur-md: 15px; --glass-blur-lg: 30px; /* Z-index layers */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* Typographie */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; --font-headings: 'Source Sans Pro', sans-serif; /* Font sizes */ --font-xs: 0.75rem; /* 12px */ --font-sm: 0.875rem; /* 14px */ --font-base: 1rem; /* 16px */ --font-lg: 1.125rem; /* 18px */ --font-xl: 1.25rem; /* 20px */ --font-2xl: 1.5rem; /* 24px */ --font-3xl: 2rem; /* 32px */ --font-4xl: 2.5rem; /* 40px */ /* Font weights */ --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; } /* ======================================== DARK MODE (DÉFAUT) ======================================== */ body, body[data-theme="dark"] { /* Couleurs principales - Bleu doux et élégant */ --primary: #7b91d4; --primary-light: #8fa3dc; --primary-dark: #6a7fc0; --secondary: #8fa3dc; --secondary-light: #a3b5e6; --accent: #7b91d4; --accent-light: #8fa3dc; /* Couleurs Habyl (de la charte graphique) */ --habyl-green: #1CAF84; --habyl-gray: #535353; --habyl-orange: #DB712E; /* Couleurs de fond */ --bg-gradient-start: #0f0f23; --bg-gradient-end: #1a1a3e; --bg-mesh-1: rgba(123, 145, 212, 0.08); --bg-mesh-2: rgba(143, 163, 220, 0.06); --bg-mesh-3: rgba(163, 181, 230, 0.04); /* Glass effect (dark mode) */ --glass-bg: rgba(255, 255, 255, 0.05); --glass-bg-hover: rgba(255, 255, 255, 0.08); --glass-bg-active: rgba(255, 255, 255, 0.12); --glass-border: rgba(255, 255, 255, 0.18); --glass-border-hover: rgba(255, 255, 255, 0.3); /* Ombres */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2); --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.25); --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.3); --shadow-glow: 0 0 20px rgba(123, 145, 212, 0.4); --shadow-glow-accent: 0 0 20px rgba(143, 163, 220, 0.4); /* Focus rings */ --focus-ring: 0 0 0 3px rgba(var(--primary-rgb), 0.1); --focus-ring-error: 0 0 0 3px rgba(var(--error-rgb), 0.1); /* Modal */ --modal-backdrop-bg: rgba(0, 0, 0, 0.75); --modal-backdrop-blur: 4px; /* Couleurs de texte */ --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.7); --text-tertiary: rgba(255, 255, 255, 0.5); /* Couleurs fonctionnelles */ --success: #10b981; --success-rgb: 16, 185, 129; --success-bg: rgba(16, 185, 129, 0.1); --success-border: rgba(16, 185, 129, 0.3); --warning: #f59e0b; --warning-rgb: 245, 158, 11; --warning-bg: rgba(245, 158, 11, 0.1); --warning-border: rgba(245, 158, 11, 0.3); --error: #ef4444; --error-rgb: 239, 68, 68; --error-bg: rgba(239, 68, 68, 0.1); --error-border: rgba(239, 68, 68, 0.3); --info: #3b82f6; --info-rgb: 59, 130, 246; --info-bg: rgba(59, 130, 246, 0.1); --info-border: rgba(59, 130, 246, 0.3); /* RGB values for primary */ --primary-rgb: 123, 145, 212; --primary-light-rgb: 143, 163, 220; --primary-bg: rgba(123, 145, 212, 0.1); --primary-border: rgba(123, 145, 212, 0.3); /* Couleurs de navigation (de la charte graphique - adaptées pour dark) */ --nav-entree: #DA4453; --nav-sortie: #967ADC; --nav-documents: #DA4453; --nav-proprietes: #F6BB42; --nav-contacts: #3BAFDA; --nav-bailleurs: #7DB1B1; --nav-sync-ok: #8CC152; --nav-sync-error: #DA4453; --nav-facturation: #F6BB42; --nav-compte: #4A89DC; --nav-aide: #DA4453; } /* ======================================== LIGHT MODE ======================================== */ body[data-theme="light"] { /* Couleurs principales - Bleu doux et élégant (version light) */ --primary: #7b91d4; --primary-light: #8fa3dc; --primary-dark: #6a7fc0; --secondary: #8fa3dc; --secondary-light: #a3b5e6; --accent: #7b91d4; --accent-light: #8fa3dc; /* Couleurs Habyl (identiques) */ --habyl-green: #1CAF84; --habyl-gray: #535353; --habyl-orange: #DB712E; /* Couleurs de fond */ --bg-gradient-start: #f8fafc; --bg-gradient-end: #e8edff; --bg-mesh-1: rgba(123, 145, 212, 0.06); --bg-mesh-2: rgba(143, 163, 220, 0.04); --bg-mesh-3: rgba(163, 181, 230, 0.03); /* Glass effect (light mode - plus de transparence) */ --glass-bg: rgba(255, 255, 255, 0.65); --glass-bg-hover: rgba(255, 255, 255, 0.75); --glass-bg-active: rgba(255, 255, 255, 0.85); --glass-border: rgba(123, 145, 212, 0.2); --glass-border-hover: rgba(123, 145, 212, 0.35); /* Ombres (plus douces en light) */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 12px 36px rgba(0, 0, 0, 0.15); --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.2); --shadow-glow: 0 0 20px rgba(123, 145, 212, 0.2); --shadow-glow-accent: 0 0 20px rgba(143, 163, 220, 0.2); /* Focus rings */ --focus-ring: 0 0 0 3px rgba(var(--primary-rgb), 0.15); --focus-ring-error: 0 0 0 3px rgba(var(--error-rgb), 0.15); /* Modal */ --modal-backdrop-bg: rgba(255, 255, 255, 0.6); --modal-backdrop-blur: 6px; /* Couleurs de texte (inversées) */ --text-primary: #1e293b; --text-secondary: #64748b; --text-tertiary: #94a3b8; /* Couleurs fonctionnelles (mêmes couleurs, backgrounds adaptés) */ --success: #22c55e; --success-rgb: 34, 197, 94; --success-bg: rgba(34, 197, 94, 0.1); --success-border: rgba(34, 197, 94, 0.3); --warning: #f59e0b; --warning-rgb: 245, 158, 11; --warning-bg: rgba(245, 158, 11, 0.1); --warning-border: rgba(245, 158, 11, 0.3); --error: #ef4444; --error-rgb: 239, 68, 68; --error-bg: rgba(239, 68, 68, 0.1); --error-border: rgba(239, 68, 68, 0.3); --info: #3b82f6; --info-rgb: 59, 130, 246; --info-bg: rgba(59, 130, 246, 0.1); --info-border: rgba(59, 130, 246, 0.3); /* RGB values for primary */ --primary-rgb: 123, 145, 212; --primary-light-rgb: 143, 163, 220; --primary-bg: rgba(123, 145, 212, 0.1); --primary-border: rgba(123, 145, 212, 0.3); /* Couleurs de navigation (identiques) */ --nav-entree: #DA4453; --nav-sortie: #967ADC; --nav-documents: #DA4453; --nav-proprietes: #F6BB42; --nav-contacts: #3BAFDA; --nav-bailleurs: #7DB1B1; --nav-sync-ok: #8CC152; --nav-sync-error: #DA4453; --nav-facturation: #F6BB42; --nav-compte: #4A89DC; --nav-aide: #DA4453; } /* ======================================== TRANSITIONS DE THÈME ======================================== */ body { transition: background-color var(--transition-base), color var(--transition-base); } /* Transition smooth pour tous les éléments avec variables */ * { transition-property: background-color, border-color, color, box-shadow; transition-duration: var(--transition-base); transition-timing-function: ease; } /* Désactiver les transitions sur les transformations pour les performances */ *:not(.animate) { transition-property: background-color, border-color, color, box-shadow !important; } /* ======================================== FALLBACK POUR BACKDROP-FILTER ======================================== */ @supports not (backdrop-filter: blur()) { body[data-theme="dark"] .glass, body:not([data-theme]) .glass { background: rgba(30, 30, 60, 0.9) !important; } body[data-theme="light"] .glass { background: rgba(255, 255, 255, 0.95) !important; } } /* ======================================== PRÉFÉRENCES SYSTÈME (AUTO MODE - Phase 2) ======================================== */ @media (prefers-color-scheme: dark) { body[data-theme="auto"] { /* Hérite des variables dark mode */ } } @media (prefers-color-scheme: light) { body[data-theme="auto"] { /* Hérite des variables light mode */ } } /* ======================================== ACCESSIBILITÉ ======================================== */ /* Réduire les animations si demandé par l'utilisateur */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Contraste élevé */ @media (prefers-contrast: high) { body[data-theme="dark"] { --glass-border: rgba(255, 255, 255, 0.5); --text-secondary: rgba(255, 255, 255, 0.9); } body[data-theme="light"] { --glass-border: rgba(99, 102, 241, 0.5); --text-secondary: #475569; } }