/** * sys.quebec - Variables CSS centralisées * Source de vérité pour toutes les couleurs, polices et espacements * * Usage: * * Ce fichier doit être importé AVANT les autres CSS pour que les variables soient disponibles. * Conçu pour être embeddable dans des exports HTML standalone. * * Thèmes: Sombre (défaut) et Clair via [data-theme="light"] sur */ /* =================================== THEME SOMBRE (par défaut) =================================== */ :root { /* COULEURS DE FOND */ --bg-primary: #0a0a0f; --bg-secondary: #12121a; --bg-tertiary: #1a1a25; --bg-card: rgba(22, 22, 34, 0.95); --bg-hover: rgba(255, 255, 255, 0.05); --bg-active: rgba(255, 255, 255, 0.08); /* COULEURS DE TEXTE */ --text-primary: #f0f0f5; --text-secondary: #8888a0; --text-muted: #5a5a70; --text-accent: #a78bfa; /* COULEURS D'ACCENT */ --accent: #4a9eff; --accent-hover: #3b8de6; --accent-purple: #8b5cf6; --accent-purple-hover: #7c3aed; /* COULEURS DE FEEDBACK */ --success: #2ECC71; --success-hover: #27AE60; --error: #E74C3C; --error-hover: #C0392B; --warning: #F39C12; --warning-hover: #E67E22; --info: #3498DB; --info-hover: #2980B9; /* COULEURS DE BOUTONS */ --btn-default: var(--success); --btn-default-hover: var(--success-hover); --btn-primary: var(--info); --btn-primary-hover: var(--info-hover); --btn-secondary: rgba(255, 255, 255, 0.08); --btn-secondary-hover: rgba(255, 255, 255, 0.15); --btn-danger: var(--error); --btn-danger-hover: var(--error-hover); --btn-purple: var(--accent-purple); --btn-purple-hover: var(--accent-purple-hover); --btn-pink: #ec4899; --btn-pink-hover: #db2777; --btn-orange: var(--warning); --btn-orange-hover: var(--warning-hover); --btn-cyan: #00BCD4; --btn-cyan-hover: #00ACC1; /* BORDURES */ --border: rgba(255, 255, 255, 0.08); --border-hover: rgba(255, 255, 255, 0.15); --border-focus: var(--accent-purple); /* OMBRES */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.5); /* SCROLLBAR */ --scrollbar-track: var(--bg-secondary); --scrollbar-thumb: rgba(255, 255, 255, 0.2); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.3); /* POLICES */ --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-sans: 'Inter', sans-serif; --font-serif: 'Playfair Display', serif; --font-mono: 'DM Mono', monospace; --font-display: 'Montserrat', sans-serif; --font-handwritten: 'Dancing Script', cursive; --font-pixel: 'Pixel', monospace; --font-pixel-mono: 'Pixel Mono', monospace; /* ESPACEMENTS */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-2xl: 48px; /* RAYONS DE BORDURE */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* TRANSITIONS */ --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; --transition-slow: 0.4s ease; /* Z-INDEX */ --z-dropdown: 100; --z-sidebar: 200; --z-modal: 1000; --z-toast: 2000; --z-tooltip: 3000; } /* =================================== THEME CLAIR Contrastes forts - WCAG AA minimum =================================== */ [data-theme="light"] { /* COULEURS DE FOND */ --bg-primary: #edeef3; --bg-secondary: #e0e1e9; --bg-tertiary: #d3d4df; --bg-card: rgba(255, 255, 255, 0.95); --bg-hover: rgba(0, 0, 0, 0.05); --bg-active: rgba(0, 0, 0, 0.08); /* COULEURS DE TEXTE - contraste fort */ --text-primary: #111127; --text-secondary: #3d3d58; --text-muted: #5c5c78; --text-accent: #6d28d9; /* COULEURS D'ACCENT (renforcées pour contraste sur fond clair) */ --accent: #1a6dd4; --accent-hover: #1259b5; --accent-purple: #6d28d9; --accent-purple-hover: #5b21b6; /* COULEURS DE FEEDBACK (plus sombres pour contraste) */ --success: #16a34a; --success-hover: #15803d; --error: #dc2626; --error-hover: #b91c1c; --warning: #d97706; --warning-hover: #b45309; --info: #2563eb; --info-hover: #1d4ed8; /* COULEURS DE BOUTONS */ --btn-secondary: rgba(0, 0, 0, 0.07); --btn-secondary-hover: rgba(0, 0, 0, 0.12); /* BORDURES (plus visibles) */ --border: rgba(0, 0, 0, 0.13); --border-hover: rgba(0, 0, 0, 0.22); --border-focus: var(--accent-purple); /* OMBRES */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12); --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.15); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.18); /* SCROLLBAR */ --scrollbar-track: var(--bg-secondary); --scrollbar-thumb: rgba(0, 0, 0, 0.22); --scrollbar-thumb-hover: rgba(0, 0, 0, 0.32); } /* =================================== RÈGLES GLOBALES OBLIGATOIRES =================================== */ /* Empêcher la sélection de texte sur les éléments cliquables */ button, .btn, [role="button"], [onclick], .clickable { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Jamais de cursor: not-allowed - utiliser cursor: default */ [disabled], .disabled { cursor: default; opacity: 0.5; }