/* ============================================================
   variables.css — Design Tokens (BADEL)
   Centralise toutes les variables CSS partagées entre les pages
   ============================================================ */

:root {
  /* ── Couleurs principales ── */
  --primary-dark:    #112836;
  --primary-dark-2:  #1a3a4d;
  --primary-dark-3:  #0d1c27;
  --primary-dark-4:  #143445;
  --primary-dark-5:  #1a4b61;

  --accent-green:    #00ff84;
  --accent-green-2:  #00d46a;
  --accent-green-3:  #00c46a;
  --accent-green-4:  #00e676;

  /* ── Couleurs de fond ── */
  --light-bg:    #f5f7f9;
  --light-bg-2:  #f6fdfa;
  --light-bg-3:  #f8fcfb;
  --input-bg:    #f0f7fa;

  /* ── Couleurs de texte ── */
  --text-dark:   #333333;
  --text-medium: #555555;
  --text-light:  #777777;
  --text-muted:  #888888;

  /* ── Couleurs sémantiques ── */
  --color-success:  #00c853;
  --color-error:    #ff4444;
  --color-info:     #2196F3;
  --color-warning:  #d48806;

  /* ── Couleurs de statut (transactions) ── */
  --status-completed-bg:  #e6f7ee;
  --status-completed-text: #00a661;
  --status-pending-bg:    #fff8e6;
  --status-pending-text:  #d48806;
  --status-cancelled-bg:  #ffe6e6;
  --status-cancelled-text: #d40000;

  /* ── Blanc ── */
  --white: #ffffff;

  /* ── Typographie ── */
  --font-primary: 'Inter', sans-serif;
  --font-arabic:  'Amiri', serif;

  /* ── Espacements ── */
  --spacing-xs:  0.5rem;    /*  8px */
  --spacing-sm:  1rem;      /* 16px */
  --spacing-md:  1.5rem;    /* 24px */
  --spacing-lg:  2rem;      /* 32px */
  --spacing-xl:  3rem;      /* 48px */

  /* ── Bordures & Rayons ── */
  --border-radius-sm:  8px;
  --border-radius:     15px;
  --border-radius-lg:  20px;
  --border-radius-xl:  30px;

  /* ── Ombres ── */
  --shadow-sm:   0 2px 5px rgba(0, 0, 0, 0.08);
  --shadow:      0 4px 15px rgba(0, 0, 0, 0.1);
  --shadow-md:   0 8px 20px rgba(0, 0, 0, 0.12);
  --shadow-lg:   0 15px 30px rgba(0, 0, 0, 0.2);
  --shadow-accent: 0 4px 15px rgba(0, 255, 132, 0.3);

  /* ── Transitions ── */
  --transition-fast:   0.2s ease;
  --transition:        0.3s ease;
  --transition-normal: all 0.3s ease;
  --transition-slow:   0.5s ease;

  /* ── Dimensions communes ── */
  --header-height:    55px;
  --footer-height:    70px;
  --sidebar-width:    350px;
  --filter-width:     280px;

  /* ── Z-index ── */
  --z-header:  100;
  --z-footer:  100;
  --z-sidebar:  90;
  --z-modal:  2000;
  --z-notification: 10000;
}