/* ════════════════════════════════════════════════════════════
   KHDEMTY.MA — Variables CSS (v2 - Accessibilité)
   ──────────────────────────────────
   Amélioré pour artisans 35-50 ans :
   - Contraste plus élevé
   - Texte plus lisible
   - Tailles augmentées
═════════════════════════════════════════════════════════════ */

:root {
  /* ── Couleurs principales (inchangées) ─────────────────── */
         
  --color-bg:           #0F1117;
  --color-bg-elevated:  #1A1F2E;
  --color-bg-input:     #232838;        /* Plus clair pour distinguer */
  --color-border:       #353B50;        /* Plus visible */
  --color-border-focus: #FF6B2B;
  --color-border-r:     #FF6B2B;

  /* ── Couleurs texte (CONTRASTE AMÉLIORÉ) ───────────────── */
  --color-text:         #FFFFFF;        /* Blanc pur (avant #F0EDE8) */
  --color-text-muted:   #B4B8CC;        /* Beaucoup plus clair (avant #8B8FA8) */
  --color-text-dim:     #8A8FA6;        /* Plus visible (avant #6B7280) */

  /* ── Couleur d'accent ──────────────────────────────────── */
  --color-primary:      #FF6B2B;
  --color-primary-hover:#FF8347;        /* Plus clair au hover */
  --color-primary-dim:  rgba(255, 107, 43, 0.15);

  /* ── Couleurs fonctionnelles ───────────────────────────── */
  --color-success:      #34D399;        /* Vert plus vif */
  --color-success-dim:  rgba(52, 211, 153, 0.15);
  --color-whatsapp:     #25D366;
  --color-whatsapp-hover:#2DDC73;
  --color-urgent:       #F87171;        /* Rouge plus accessible */
  --color-urgent-hover: #EF4444;
  --color-warning:      #FBBF24;

  /* ── Typographie (TAILLES AUGMENTÉES) ──────────────────── */
  --font-family:        'Inter', -apple-system, BlinkMacSystemFont,
                        'Segoe UI', sans-serif;

  --font-size-xs:       13px;           /* avant 12 */
  --font-size-sm:       15px;           /* avant 14 */
  --font-size-base:     17px;           /* avant 16 — +1px critique mobile */
  --font-size-lg:       19px;
  --font-size-xl:       22px;
  --font-size-2xl:      28px;
  --font-size-3xl:      36px;
  --font-size-4xl:      52px;

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

  --line-height-tight:   1.25;
  --line-height-base:    1.6;            /* Plus aéré */
  --line-height-relaxed: 1.8;

  /* ── Espacements (inchangés) ───────────────────────────── */
  --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:   6px;
  --radius-base: 10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-full: 9999px;

  /* ── Ombres plus visibles ──────────────────────────────── */
  --shadow-sm:  0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 6px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 16px 40px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 32px rgba(255, 107, 43, 0.3);

  /* ── 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;
}