/**
 * File: variables.css
 * Theme: PIP'N'HUB
 * Description: Variables CSS - POINT CENTRAL CUSTOMISATION
 * Author: krafsht
 * 
 * ⚙️ CUSTOMISATION : Modifier uniquement ce fichier pour changer tout le thème
 */

:root {
  /* ========== COULEURS ========== */
  /* Modifiez ces 3 couleurs pour changer tout le thème */
  
  --color-primary: #000028;           /* Couleur dominante (titres, texte, header, footer) */
  --color-secondary: #c129b9;         /* Couleur accent (boutons, liens, highlights) */
  --color-neutral: #dcdcdc;           /* Couleur neutre (borders, backgrounds) */
  
  /* Variantes auto-générées (ne pas modifier) */
  --color-secondary-light: #e89fe1;
  --color-secondary-dark: #a11f9a;
  
  /* Texte */
  --color-text: var(--color-primary);
  --color-text-light: #666;
  --color-text-muted: #999;
  --color-text-inverse: #fff;
  
  /* Backgrounds */
  --color-bg: #fff;
  --color-bg-alt: #f8f8f8;
  --color-bg-dark: var(--color-primary);
  
  /* Borders */
  --color-border: var(--color-neutral);
  --color-border-light: #efefef;
  
  
  /* ========== TYPOGRAPHIE ========== */
  /* Modifiez ces fonts pour changer toutes les polices */
  
  --font-display: 'FugazOne', Georgia, serif;      /* Titres */
  --font-body: 'Roboto', Arial, sans-serif;        /* Texte */
  --font-accent: 'Roboto Condensed', Arial, sans-serif; /* Menus, badges */
  
  /* Tailles */
  --text-xs: 0.75rem;   /* 12px */
  --text-sm: 0.875rem;  /* 14px */
  --text-base: 1rem;    /* 16px */
  --text-lg: 1.125rem;  /* 18px */
  --text-xl: 1.25rem;   /* 20px */
  --text-2xl: 1.5rem;   /* 24px */
  --text-3xl: 2rem;     /* 32px */
  --text-4xl: 2.5rem;   /* 40px */
  --text-5xl: 3rem;     /* 48px */
  
  /* Weights */
  --font-normal: 400;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Line heights */
  --leading-tight: 1.2;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;
  
  
  /* ========== ESPACEMENTS (8pt grid) ========== */
  
  --space-xs: 0.5rem;   /* 8px */
  --space-sm: 1rem;     /* 16px */
  --space-md: 1.5rem;   /* 24px */
  --space-lg: 2rem;     /* 32px */
  --space-xl: 3rem;     /* 48px */
  --space-2xl: 4rem;    /* 64px */
  
  
  /* ========== LAYOUT ========== */
  
  --container-max: 1200px;
  --content-max: 800px;
  --grid-gap: var(--space-md);
  
  
  /* ========== EFFETS ========== */
  
  --transition: 0.3s ease;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
  --border-radius: 4px;
}