/* ════════════════════════════════════════════════════════════
   KHDEMTY.MA — Variables CSS globales
   ──────────────────────────────────
   Toute modification de design passe par ce fichier.
═════════════════════════════════════════════════════════════ */

:root {
  /* ── Couleurs principales ──────────────────────────────── */
  --color-bg:           #0F1117;   /* Noir profond bleuté */
  --color-bg-elevated:  #1A1F2E;   /* Cards, sections alternées */
  --color-bg-input:     #1A1F2E;   /* Inputs et formulaires */
  --color-border:       #2A2F40;   /* Bordures discrètes */
  --color-border-focus: #FF6B2B;   /* Bordure au focus */

  /* ── Couleurs texte ─────────────────────────────────────── */
  --color-text:         #F0EDE8;   /* Texte principal */
  --color-text-muted:   #8B8FA8;   /* Texte secondaire, labels */
  --color-text-dim:     #6B7280;   /* Texte très discret */

  /* ── Couleur d'accent (orange terracotta) ───────────────── */
  --color-primary:      #FF6B2B;   /* CTA principal */
  --color-primary-hover:#E55A1F;   /* Hover */
  --color-primary-dim:  rgba(255, 107, 43, 0.1);  /* Backgrounds discrets */

  /* ── Couleurs fonctionnelles ────────────────────────────── */
  --color-success:      #2DD4BF;   /* Badge vérifié, succès */
  --color-success-dim:  rgba(45, 212, 191, 0.1);
  --color-whatsapp:     #25D366;   /* Boutons WhatsApp uniquement */
  --color-whatsapp-hover:#1FB855;
  --color-urgent:       #EF4444;   /* Bouton urgence */
  --color-urgent-hover: #DC2626;
  --color-warning:      #F59E0B;   /* Avertissements */

  /* ── Typographie ───────────────────────────────────────── */
  --font-family:        'Inter', -apple-system, BlinkMacSystemFont,
                        'Segoe UI', sans-serif;

  --font-size-xs:       12px;
  --font-size-sm:       14px;
  --font-size-base:     16px;
  --font-size-lg:       18px;
  --font-size-xl:       20px;
  --font-size-2xl:      24px;
  --font-size-3xl:      32px;
  --font-size-4xl:      48px;

  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  --line-height-tight:   1.2;
  --line-height-base:    1.5;
  --line-height-relaxed: 1.75;

  /* ── Espacements ────────────────────────────────────────── */
  --spacing-1:  4px;
  --spacing-2:  8px;
  --spacing-3:  12px;
  --spacing-4:  16px;
  --spacing-5:  20px;
  --spacing-6:  24px;
  --spacing-8:  32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;

  /* ── Border radius ──────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-base: 8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ── Ombres ─────────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 24px rgba(255, 107, 43, 0.2);

  /* ── Largeurs containers ────────────────────────────────── */
  --max-width-content: 1200px;
  --max-width-narrow:  800px;

  /* ── Transitions ────────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ── Z-index ────────────────────────────────────────────── */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-modal:     500;
  --z-toast:     1000;
}