// ============================================================= // Variables — design tokens du projet // ============================================================= // Ce fichier est la source de vérité pour toutes les valeurs // de couleur, typographie et espacement utilisées dans le projet. // Modifier une valeur ici la propage à l'ensemble des composants. // ------------------------------------------------------------- // Couleurs principales // ------------------------------------------------------------- $color-primary: #007bff; $color-primary-bg: #cce5ff; $color-primary-bg-hover: #b8daff; $color-danger: #dc3545; $color-success-bg: #d4edda; $color-success-border: #c3e6cb; $color-success-text: #155724; $color-danger-bg: #f8d7da; $color-danger-border: #f5c6cb; $color-danger-text: #721c24; $color-warning-bg: #fff3cd; $color-warning-text: #856404; $color-info-bg: #d1ecf1; $color-info-text: #0c5460; $color-card-shadow: rgba(0, 0, 0, 0.07); // ------------------------------------------------------------- // Couleurs neutres // ------------------------------------------------------------- $color-text: #212529; $color-text-muted: #6c757d; $color-text-subtle: #aaa; $color-bg-light: #f8f9fa; $color-bg-white: #ffffff; $color-bg-initials: #e9ecef; $color-border: #dee2e6; $color-border-light: #ccc; // ------------------------------------------------------------- // Typographie // ------------------------------------------------------------- $font-family-base: Arial, sans-serif; $font-size-xs: 0.85rem; $font-size-sm: 0.875rem; $font-size-base: 1rem; $font-size-md: 1.05rem; $font-size-lg: 1.15rem; $font-size-xl: 1.2rem; $font-size-2xl: 1.4rem; $font-size-3xl: 1.75rem; $font-size-display: 2rem; $font-size-display-lg: 4rem; $font-size-footer: 0.9rem; $line-height-none: 1; $line-height-tight: 1.2; $line-height-snug: 1.3; $line-height-base: 1.5; $font-weight-regular: 400; $font-weight-semibold: 600; $font-weight-bold: 700; // ------------------------------------------------------------- // Espacements // ------------------------------------------------------------- $spacing-2xs: 0.125rem; $spacing-xs: 0.25rem; $spacing-sm: 0.5rem; $spacing-md: 1rem; $spacing-lg: 1.5rem; $spacing-xl: 2rem; $spacing-2xl: 3rem; // ------------------------------------------------------------- // Bordures // ------------------------------------------------------------- $radius-sm: 3px; $radius-md: 4px; $radius-lg: 8px; // ------------------------------------------------------------- // États interactifs // ------------------------------------------------------------- $focus-ring-width: 2px; $focus-ring-color: rgba(0, 123, 255, 0.16); $transition-fast: 0.15s ease; $transition-base: 0.2s ease; // ------------------------------------------------------------- // Layout // ------------------------------------------------------------- $layout-content-max-width: 960px; // ------------------------------------------------------------- // Responsive // ------------------------------------------------------------- $breakpoint-mobile: 600px;