/**
 * CSS Variables - Lin Teas Theme
 * Fichier unique pour toutes les variables CSS du thème
 * Remplace toutes les définitions dupliquées dans les autres fichiers
 * 
 * @package LinTeas
 * @since 1.0.0
 */

:root {
  /* ===================================
     PALETTE PRINCIPALE LIN TEAS
     ================================== */
  
  /* Couleurs principales - Bleu-vert doux et zen */
  --color-primary: #7FB3A3;      /* Bleu-vert doux (principal) */
  --color-secondary: #A8D0C6;    /* Bleu-vert très clair */
  --color-accent: #B85450;       /* Rouge cinabre premium */
  --color-accent-light: #C86B66; /* Rouge cinabre clair */
  --color-accent-dark: #A04A45;  /* Rouge cinabre foncé */
  --color-gold: #D3AE27;         /* Or premium */
  --color-earth: #B09E99;        /* Terre */
  --color-red: #DC143C;          /* Rouge chinois (conservé) */

  /* ===================================
     COULEURS SYSTÈME
     ================================== */
  
  /* Couleurs de base */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-dark: #2C3E50;         /* Gris foncé */
  --color-light: #F8F9FA;        /* Gris très clair */
  
  /* Couleurs de texte */
  --color-text: #333333;
  --color-text-light: #666666;
  --color-text-muted: #999999;
  
  /* Couleurs grises */
  --color-gray: #E5E5E5;
  --color-gray-light: #F5F5F5;
  --color-gray-medium: #CCCCCC;
  --color-gray-dark: #999999;
  
  /* Couleurs de fond */
  --color-cream: #FEFEFE;
  --color-background: #FFFFFF;

  /* ===================================
     TYPOGRAPHIE
     ================================== */
  
  --font-primary: 'Playfair Display', serif;
  --font-secondary: 'Inter', sans-serif;
  
  /* Tailles de police */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  --font-size-5xl: 3rem;      /* 48px */

  /* ===================================
     ESPACEMENTS
     ================================== */
  
  --spacing-xs: 0.5rem;    /* 8px */
  --spacing-sm: 0.75rem;   /* 12px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-xxl: 3rem;     /* 48px */
  --spacing-xxxl: 4rem;    /* 64px */

  /* ===================================
     RAYONS ET FORMES
     ================================== */
  
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 50%;

  /* ===================================
     OMBRES
     ================================== */
  
  --shadow-light: 0 2px 10px rgba(0,0,0,0.1);
  --shadow-medium: 0 4px 20px rgba(0,0,0,0.15);
  --shadow-soft: 0 2px 10px rgba(0,0,0,0.1);
  --shadow-strong: 0 8px 25px rgba(0,0,0,0.15);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.16);

  /* ===================================
     TRANSITIONS
     ================================== */
  
  --transition-smooth: all 0.3s ease;
  --transition-bounce: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* ===================================
     LARGEURS ET CONTENEURS
     ================================== */
  
  --container-max-width: 1200px;
  --container-padding: 20px;
  --container-max-width-wide: 1400px;

  /* ===================================
     GRADIENTS
     ================================== */
  
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  --gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
  --gradient-soft: linear-gradient(135deg, rgba(127, 179, 163, 0.1) 0%, rgba(168, 208, 198, 0.1) 100%);

  /* ===================================
     VARIABLES ADMIN (pour les modules)
     ================================== */
  
  /* Couleurs admin Lin Teas */
  --admin-primary: #7FB3A3;
  --admin-secondary: #A8D0C6;
  --admin-accent: #E8B86D;
  --admin-success: #46b450;
  --admin-warning: #ffb900;
  --admin-error: #dc3232;
  --admin-info: #00a0d2;
  
  /* Couleurs de fond admin */
  --admin-bg: #f1f1f1;
  --admin-card-bg: #ffffff;
  --admin-border: #ddd;
  --admin-border-light: #e5e5e5;
  
  /* Texte admin */
  --admin-text: #23282d;
  --admin-text-light: #666;
  --admin-text-lighter: #999;
  
  /* Espacements admin */
  --admin-gap: 20px;
  --admin-gap-sm: 10px;
  --admin-gap-lg: 30px;
  
  /* Rayons admin */
  --admin-radius: 8px;
  --admin-radius-lg: 12px;
  
  /* Ombres admin */
  --admin-shadow: 0 2px 8px rgba(0,0,0,0.1);
  --admin-shadow-hover: 0 4px 16px rgba(0,0,0,0.15);

  /* ===================================
     Z-INDEX SCALE
     ================================== */
  
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;

  /* ===================================
     BREAKPOINTS (pour référence)
     ================================== */
  
  /* Ces valeurs sont utilisées dans les media queries */
  /* --breakpoint-sm: 576px; */
  /* --breakpoint-md: 768px; */
  /* --breakpoint-lg: 992px; */
  /* --breakpoint-xl: 1200px; */
  /* --breakpoint-xxl: 1400px; */
}