/* ============================================
   SOMEF Design System - Variables CSS
   Niveau 1 : CRITIQUE - Toujours chargé
   ============================================ */

:root {
  /* ============================================
     Couleurs Principales
     ============================================ */
  
  /* Brand Colors */
  --color-primary: #d33343;
  --color-primary-dark: #b02a38;
  --color-primary-light: #e85d6d;
  --color-primary-hover: #fff;
  
  /* Neutres */
  --color-text: #252122;
  --color-text-light: #666666;
  --color-text-lighter: #999999;
  --color-text-inverse: #ffffff;
  --color-bg: #ffffff;
  --color-bg-light: #f8f9fa;
  --color-bg-dark: #252122;
  --color-bg-category: #ea002b;
  
  /* Accents */
  --color-accent-cyan: #209ca0;
  --color-accent-blue: #2b3c45;
  
  /* États */
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-error: #dc3545;
  --color-info: #17a2b8;
  
  /* ============================================
     Typographie
     ============================================ */
  
  --font-family-primary: 'gestaw01-mediumregular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-bold: 'gestaw01-boldregular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-monospace: monospace, monospace;
  
  --font-size-base: 16px;
  --font-size-small: 0.875rem;
  --font-size-large: 1.125rem;
  --font-size-h1: 30px;
  --font-size-h2: 24px;
  --font-size-h3: 20px;
  --font-size-h4: 18px;
  --font-size-h5: 16px;
  --font-size-h6: 14px;
  
  --line-height-base: 1.5;
  --line-height-heading: 1.1;
  --line-height-tight: 1.2;
  
  --font-weight-normal: normal;
  --font-weight-bold: bold;
  
  /* ============================================
     Espacements
     ============================================ */
  
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  
  --spacing-section: 40px;
  --spacing-container: 15px;
  
  /* ============================================
     Bordures
     ============================================ */
  
  --border-radius-sm: 3px;
  --border-radius-md: 4px;
  --border-radius-lg: 8px;
  --border-radius-circle: 50%;
  
  --border-width: 1px;
  --border-color: #e0e0e0;
  --border-color-light: #f1f1f1;
  
  /* ============================================
     Ombres
     ============================================ */
  
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
  
  /* ============================================
     Transitions
     ============================================ */
  
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* ============================================
     Z-index
     ============================================ */
  
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal: 1040;
  --z-index-tooltip: 1050;
  --z-index-slick: 999;
  
  /* ============================================
     Layout
     ============================================ */
  
  --header-height: 80px;
  --header-nav-height: auto;
  --logo-width: 150px;
  --banner-height: 378px;
  
  /* ============================================
     Composants Spécifiques
     ============================================ */
  
  /* Header */
  --header-bg: var(--color-bg);
  --header-shadow: var(--shadow-md);
  --header-nav-bg: var(--color-bg-light);
  --header-link-color: var(--color-text);
  --header-link-hover: var(--color-primary);
  
  /* Footer */
  --footer-bg: var(--color-bg-dark);
  --footer-text-color: var(--color-text-inverse);
  --footer-link-color: #cccccc;
  --footer-link-hover: var(--color-primary);
  --footer-padding: var(--spacing-section) 0;
  
  /* Product Card */
  --product-card-border-radius: var(--border-radius-md);
  --product-card-shadow: var(--shadow-sm);
  --product-card-hover-shadow: var(--shadow-md);
  --product-card-padding: var(--spacing-md);
  --product-card-spacing: var(--spacing-md);
  --product-card-title-color: var(--color-text);
  --product-card-title-size: var(--font-size-h3);
  --product-card-price-color: var(--color-primary);
  
  /* Breadcrumb */
  --breadcrumb-bg: transparent;
  --breadcrumb-padding: var(--spacing-md) 0;
  --breadcrumb-separator: "›";
  --breadcrumb-link-color: var(--color-text-light);
  --breadcrumb-link-hover: var(--color-primary);
  --breadcrumb-current-color: var(--color-text);
  
  /* Slider */
  --slider-button-bg: var(--color-primary);
  --slider-button-hover-bg: var(--color-bg);
  --slider-button-color: var(--color-text-inverse);
  --slider-button-hover-color: var(--color-primary);
  --slider-dot-color: var(--color-accent-cyan);
  --slider-dot-active: var(--color-bg-category);
  
  /* Buttons */
  --button-primary-bg: var(--color-primary);
  --button-primary-color: var(--color-text-inverse);
  --button-primary-hover-bg: var(--color-primary-dark);
  --button-secondary-bg: var(--color-bg);
  --button-secondary-color: var(--color-text);
  --button-secondary-hover-bg: var(--color-bg-light);
}