/* ========================================
   VARIABLES CSS GLOBALES - LHSQC
   ========================================
   
   Optimisé pour mobile-first et responsive design
   ======================================== */

/* ========================================
   COULEURS PRIMAIRES
   ======================================== */
:root {
  /* Couleurs principales du site */
  --color-primary: #1e40af;           /* Bleu principal */
  --color-primary-light: #3b82f6;     /* Bleu clair */
  --color-primary-dark: #1e3a8a;      /* Bleu foncé */
  
  /* Couleurs secondaires */
  --color-secondary: #f59e0b;         /* Orange/Jaune */
  --color-secondary-light: #fbbf24;   /* Orange clair */
  --color-secondary-dark: #d97706;    /* Orange foncé */
  
  /* Couleurs d'accent */
  --color-accent: #10b981;            /* Vert */
  --color-accent-light: #34d399;      /* Vert clair */
  --color-accent-dark: #059669;       /* Vert foncé */
}

/* ========================================
   COULEURS SÉMANTIQUES
   ======================================== */
:root {
  /* Couleurs de statut */
  --color-success: #10b981;           /* Vert - Succès */
  --color-warning: #f59e0b;           /* Orange - Attention */
  --color-danger: #ef4444;            /* Rouge - Erreur/Danger */
  --color-info: #3b82f6;              /* Bleu - Information */
  
  /* Couleurs de texte */
  --color-text-primary: #1f2937;      /* Texte principal */
  --color-text-secondary: #6b7280;    /* Texte secondaire */
  --color-text-muted: #9ca3af;        /* Texte atténué */
  --color-text-inverse: #ffffff;      /* Texte sur fond sombre */
  
  /* Couleurs de fond */
  --color-bg-primary: #ffffff;        /* Fond principal */
  --color-bg-secondary: #f9fafb;      /* Fond secondaire */
  --color-bg-tertiary: #f3f4f6;       /* Fond tertiaire */
  --color-bg-dark: #1f2937;           /* Fond sombre */
}

/* ========================================
   COULEURS DE L'ANCIEN SYSTÈME (Compatibilité)
   ======================================== */
:root {
  /* Couleurs héritées de STHSMain.css */
  --color-sths-gray: #dedede;         /* rgb(222, 222, 222) */
  --color-sths-gray-light: #f2f2f2;   /* #f2f2f2 */
  --color-sths-gray-dark: #ccc;       /* #ccc */
  --color-sths-blue: #99bfe6;         /* #99bfe6 */
  --color-sths-blue-dark: #5797d7;    /* #5797d7 */
  --color-sths-black: #000000;        /* #000000 */
  --color-sths-white: #ffffff;        /* #ffffff */
}

/* ========================================
   TYPOGRAPHIE - MOBILE-FIRST
   ======================================== */
:root {
  /* Familles de polices */
  --font-family-primary: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-secondary: 'Montserrat', sans-serif;
  --font-family-mono: 'Courier New', monospace;
  
  /* Tailles de police - Mobile-first */
  --font-size-xs: 0.75rem;            /* 12px - très petit */
  --font-size-sm: 0.875rem;           /* 14px - petit */
  --font-size-base: 1rem;             /* 16px - base (mobile) */
  --font-size-md: 1.125rem;           /* 18px - moyen */
  --font-size-lg: 1.25rem;            /* 20px - grand */
  --font-size-xl: 1.5rem;             /* 24px - très grand */
  --font-size-2xl: 1.875rem;          /* 30px - extra grand */
  --font-size-3xl: 2.25rem;           /* 36px - 3x grand */
  --font-size-4xl: 3rem;              /* 48px - 4x grand */
  --font-size-5xl: 3.75rem;           /* 60px - 5x grand */
  
  /* Poids de police */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Hauteur de ligne */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
}

/* ========================================
   ESPACEMENT - MOBILE-FIRST
   ======================================== */
:root {
  /* Espacement de base */
  --spacing-0: 0;
  --spacing-1: 0.25rem;               /* 4px */
  --spacing-2: 0.5rem;                /* 8px */
  --spacing-3: 0.75rem;               /* 12px */
  --spacing-4: 1rem;                  /* 16px */
  --spacing-5: 1.25rem;               /* 20px */
  --spacing-6: 1.5rem;                /* 24px */
  --spacing-8: 2rem;                  /* 32px */
  --spacing-10: 2.5rem;               /* 40px */
  --spacing-12: 3rem;                 /* 48px */
  --spacing-16: 4rem;                 /* 64px */
  --spacing-20: 5rem;                 /* 80px */
  
  /* Padding spécifiques */
  --padding-xs: 0.25rem;              /* 4px */
  --padding-sm: 0.5rem;               /* 8px */
  --padding-md: 1rem;                 /* 16px */
  --padding-lg: 1.5rem;               /* 24px */
  --padding-xl: 2rem;                 /* 32px */
  --padding-2xl: 3rem;                /* 48px */
  
  /* Marges spécifiques */
  --margin-xs: 0.25rem;               /* 4px */
  --margin-sm: 0.5rem;                /* 8px */
  --margin-md: 1rem;                  /* 16px */
  --margin-lg: 1.5rem;                /* 24px */
  --margin-xl: 2rem;                  /* 32px */
  --margin-2xl: 3rem;                 /* 48px */
}

/* ========================================
   BORDURES
   ======================================== */
:root {
  /* Border radius */
  --border-radius-none: 0;
  --border-radius-sm: 0.25rem;        /* 4px */
  --border-radius-md: 0.375rem;       /* 6px */
  --border-radius-lg: 0.5rem;         /* 8px */
  --border-radius-xl: 0.75rem;        /* 12px */
  --border-radius-2xl: 1rem;          /* 16px */
  --border-radius-full: 50%;
  
  /* Largeurs de bordure */
  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;
  
  /* Styles de bordure */
  --border-style-solid: solid;
  --border-style-dashed: dashed;
  --border-style-dotted: dotted;
  
  /* Couleurs de bordure */
  --border-color-light: #e5e7eb;
  --border-color-medium: #d1d5db;
  --border-color-dark: #9ca3af;
  --border-color-primary: var(--color-primary);
}

/* ========================================
   OMBRES ET EFFETS
   ======================================== */
:root {
  /* Ombres */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  
  /* Ombres spécifiques STHS */
  --shadow-sths: -1px 1px 1px rgba(0, 0, 0, 0.15);
  --shadow-sths-strong: 0 2px 3px 1px #ddd;
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;
}

/* ========================================
   BREAKPOINTS RESPONSIVE - MOBILE-FIRST
   ======================================== */
:root {
  /* Breakpoints - Mobile-first */
  --breakpoint-xs: 480px;             /* Très petit mobile */
  --breakpoint-sm: 640px;             /* Petit mobile */
  --breakpoint-md: 768px;             /* Tablette */
  --breakpoint-lg: 1024px;            /* Petit desktop */
  --breakpoint-xl: 1280px;            /* Desktop */
  --breakpoint-2xl: 1536px;           /* Grand desktop */
  
  /* Breakpoints spécifiques STHS (pour compatibilité) */
  --breakpoint-sths-660: 660px;
  --breakpoint-sths-920: 920px;
  --breakpoint-sths-1160: 1160px;
  --breakpoint-sths-1200: 1200px;
  --breakpoint-sths-1400: 1400px;
  --breakpoint-sths-1500: 1500px;
  --breakpoint-sths-1600: 1600px;
}

/* ========================================
   LAYOUT ET CONTAINERS - MOBILE-FIRST
   ======================================== */
:root {
  /* Largeurs de conteneur */
  --container-max-width: 100%;        /* Mobile: pleine largeur */
  --container-padding: var(--spacing-4); /* 16px par défaut */
  
  /* Largeurs spécifiques STHS */
  --width-10: 10px;
  --width-25: 25px;
  --width-30: 30px;
  --width-35: 35px;
  --width-45: 45px;
  --width-50: 50px;
  --width-55: 55px;
  --width-65: 65px;
  --width-75: 75px;
  --width-100: 100px;
  --width-120: 120px;
  --width-140: 140px;
  --width-200: 200px;
  --width-250: 250px;
  --width-300: 300px;
  --width-350: 350px;
  --width-450: 450px;
  --width-500: 500px;
  --width-650: 650px;
  --width-800: 800px;
  --width-900: 900px;
}

/* ========================================
   RESPONSIVE ADAPTATIONS
   ======================================== */

/* Tablette et plus */
@media (min-width: 768px) {
  :root {
    --container-max-width: 768px;
    --container-padding: var(--spacing-6);
    --font-size-base: 1.125rem;       /* 18px sur tablette */
  }
}

/* Desktop petit */
@media (min-width: 1024px) {
  :root {
    --container-max-width: 1024px;
    --container-padding: var(--spacing-8);
  }
}

/* Desktop */
@media (min-width: 1280px) {
  :root {
    --container-max-width: 1280px;
    --container-padding: var(--spacing-10);
  }
}

/* Grand desktop */
@media (min-width: 1536px) {
  :root {
    --container-max-width: 1400px;
    --container-padding: var(--spacing-12);
  }
}

/* ========================================
   Z-INDEX
   ======================================== */
:root {
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
}

/* ========================================
   UTILITAIRES
   ======================================== */
:root {
  /* Opacités */
  --opacity-0: 0;
  --opacity-25: 0.25;
  --opacity-50: 0.5;
  --opacity-75: 0.75;
  --opacity-100: 1;
  
  /* Curseurs */
  --cursor-pointer: pointer;
  --cursor-default: default;
  --cursor-not-allowed: not-allowed;
  
  /* Overflow */
  --overflow-hidden: hidden;
  --overflow-auto: auto;
  --overflow-scroll: scroll;
}