/* =============================================================
   VARIABLES.CSS — Système de design Flexylead Dashboard
   Toutes les custom properties centralisées ici.
   NE PAS hardcoder de valeurs dans les autres fichiers CSS.
   ============================================================= */

:root {

  /* ── Couleurs primaires (défaut : violet Flexylead) ──────── */
  --color-primary:           #6366f1;
  --color-primary-dark:      #4f46e5;
  --color-primary-darker:    #3730a3;
  --color-primary-light:     #e0e7ff;
  --color-primary-pale:      #818cf8;  /* utilisé dans branding/waiting */

  /* ── Couleurs sémantiques ────────────────────────────────── */
  --color-success:           #10b981;
  --color-success-light:     #d1fae5;
  --color-success-dark:      #059669;
  --color-success-deeper:    #166534;
  --color-success-pale:      #f0fdf4;
  --color-success-bg:        #dcfce7;
  --color-success-border:    #86efac;
  --color-success-vivid:     #22c55e;
  --color-success-vivid-dark:#16a34a;
  --color-success-rich:      #15803d;

  --color-warning:           #f59e0b;
  --color-warning-light:     #fef3c7;
  --color-warning-pale:      #fefce8;  /* forecast bg — yellow-50 */
  --color-warning-pale-dark: #fef9c3;  /* forecast thead bg — yellow-100 */
  --color-warning-dark:      #d97706;
  --color-warning-deep:      #92400e;

  --color-danger:            #ef4444;
  --color-danger-light:      #fee2e2;
  --color-danger-bg:         #fef2f2;
  --color-danger-border:     #fecaca;
  --color-danger-dark:       #dc2626;
  --color-danger-deeper:     #b91c1c;
  --color-danger-deepest:    #991b1b;
  --color-danger-vivid:      #f87171;

  --color-info:              #3b82f6;
  --color-info-light:        #dbeafe;
  --color-info-pale:         #eff6ff;
  --color-info-border:       #bfdbfe;
  --color-info-dark:         #1e40af;
  --color-info-darker:       #1e3a5f;
  --color-info-deeper:       #1d4ed8;
  --color-info-vivid:        #2563eb;

  /* ── Taux / KPI (identiques à sémantiques mais aliasés) ──── */
  --color-taux-good:         #059669;
  --color-taux-mid:          #d97706;
  --color-taux-bad:          #dc2626;

  /* ── Couleurs métier — FREE Telecom ─────────────────────── */
  --color-free:              #CC0000;
  --color-free-dark:         #aa0000;
  --color-free-darker:       #7f0000;
  --color-free-light:        #fee2e2;
  --color-free-pale:         #fef2f2;

  /* ── Couleurs métier — MINT Énergie ─────────────────────── */
  --color-mint:              #00aa73;
  --color-mint-dark:         #008f60;
  --color-mint-darker:       #006647;
  --color-mint-light:        #d1fae5;
  --color-mint-pale:         #f0fdf4;

  /* ── Couleurs métier — PROTECTED Assurance ──────────────── */
  --color-protected:         #6366f1;  /* partage le primaire */
  --color-protected-light:   #e0e7ff;
  --color-protected-orange:  #f97316;  /* couleur source PROTECTED dans filtres règlements */

  /* ── Couleurs métier — Règlements ───────────────────────── */
  --color-reglements:        #374151;
  --color-reglements-dark:   #1f2937;
  --color-reglements-light:  #f3f4f6;

  /* ── Couleurs métier — Stats ─────────────────────────────── */
  --color-stats:             #3b82f6;
  --color-stats-dark:        #2563eb;
  --color-stats-light:       #dbeafe;
  --color-stats-deeper:      #1d4ed8;

  /* ── Couleurs ranking podium ─────────────────────────────── */
  --color-rank-1-bg:         #fef3c7;
  --color-rank-1-text:       #92400e;
  --color-rank-2-bg:         #e5e7eb;
  --color-rank-2-text:       #374151;
  --color-rank-3-bg:         #fed7aa;
  --color-rank-3-text:       #9a3412;

  /* ── Neutres ─────────────────────────────────────────────── */
  --color-white:             #ffffff;
  --color-black:             #1a1a1a;
  --color-gray-50:           #f9fafb;
  --color-gray-100:          #f3f4f6;
  --color-gray-150:          #f1f5f9;   /* intermédiaire utilisé dans reglements */
  --color-gray-200:          #e5e7eb;
  --color-gray-250:          #e2e8f0;   /* intermédiaire filtre */
  --color-gray-300:          #d1d5db;
  --color-gray-400:          #9ca3af;
  --color-gray-450:          #94a3b8;   /* attente règlement */
  --color-gray-500:          #6b7280;
  --color-gray-550:          #64748b;   /* filter-label */
  --color-gray-600:          #4b5563;
  --color-gray-650:          #374151;
  --color-gray-700:          #374151;
  --color-gray-750:          #1e293b;   /* filter-select text */
  --color-gray-800:          #1f2937;
  --color-gray-850:          #111827;
  --color-gray-900:          #111827;

  /* Background page */
  --color-bg-page:           #f8f9fa;
  --color-bg-surface:        #f8fafc;   /* thead matrix, row-total */
  --color-bg-vis:            #fafafa;   /* stats-vis-bar */
  --color-bg-waiting:        #f8f9fa;
  --color-vis-border:        #f0f0f0;   /* vis-bar border */
  --color-vis-label:         #b0b5bf;   /* vis-bar label text */

  /* ── Typographie ─────────────────────────────────────────── */
  --font-family-base:        'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-2xs:           0.625rem;  /* 10px */
  --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.75rem;   /* 28px */
  --font-size-4xl:           2.25rem;   /* 36px */
  --font-size-5xl:           3rem;      /* 48px */
  --font-weight-normal:      400;
  --font-weight-medium:      500;
  --font-weight-semibold:    600;
  --font-weight-bold:        700;
  --line-height-tight:       1.25;
  --line-height-base:        1.5;
  --line-height-relaxed:     1.75;

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-7:   1.75rem;   /* 28px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */

  /* ── Border radius ───────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-3xl:  24px;
  --radius-4xl:  32px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl:  0 16px 40px rgba(0, 0, 0, 0.15);
  --shadow-nav: 0 -2px 10px rgba(0, 0, 0, 0.05);
  --shadow-waiting: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
  --shadow-drawer: 0 -10px 40px rgba(0, 0, 0, 0.2);

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Z-index ─────────────────────────────────────────────── */
  --z-base:      1;
  --z-sticky:    2;
  --z-dropdown:  50;
  --z-nav:       1000;
  --z-drawer:    1000;
  --z-modal:     200;
  --z-toast:     300;
  --z-overlay:   999;
  --z-waiting:   10;

  /* ── Dimensions layout ───────────────────────────────────── */
  --nav-height-mobile:   64px;
  --nav-height-desktop:  168px;
  --container-mobile:    430px;
  --container-tablet:    768px;
  --container-desktop:   900px;
  --container-max:       1400px;
  --sidebar-width:       280px;

  /* ── Breakpoints (référence commentée — usage @media) ────── */
  /* sm: 480px | md: 768px | lg: 1024px | xl: 1280px          */
}

/* ── Thèmes par onglet actif ─────────────────────────────────
   Ces overrides remplacent les couleurs --color-primary* selon
   l'onglet courant. Appliqués via JS sur body.theme-XXX.
   ──────────────────────────────────────────────────────────── */

body.theme-free {
  --color-primary:        var(--color-free);
  --color-primary-dark:   var(--color-free-dark);
  --color-primary-darker: var(--color-free-darker);
  --color-primary-light:  var(--color-free-light);
}

body.theme-mint {
  --color-primary:        var(--color-mint);
  --color-primary-dark:   var(--color-mint-dark);
  --color-primary-darker: var(--color-mint-darker);
  --color-primary-light:  var(--color-mint-light);
}

body.theme-reglements,
body.theme-protected {
  --color-primary:        var(--color-reglements);
  --color-primary-dark:   var(--color-reglements-dark);
  --color-primary-darker: var(--color-gray-900);
  --color-primary-light:  var(--color-reglements-light);
}

body.theme-stats {
  --color-primary:        var(--color-stats);
  --color-primary-dark:   var(--color-stats-dark);
  --color-primary-darker: var(--color-stats-deeper);
  --color-primary-light:  var(--color-stats-light);
}