/* ============================================================
   SOFTAFRIK — Design Tokens
   Source unique de vérité pour couleurs, typo, espacement.
   Ne contient que des variables CSS — pas de règles de style.
   ============================================================ */

:root {

  /* ── Couleurs principales ────────────────────────────────── */
  --color-primary:       #133233;
  --color-primary-dark:  #0F2B2D;
  --color-primary-light: #E8E3DA;

  --color-secondary:      #96C796;
  --color-secondary-dark: #7FB77F;

  --color-accent:       #E8872F;
  --color-accent-dark:  #D97721;
  --color-accent-light: #FBE3CE;
  --color-support:      #547867;

  --color-bg:      #F7F7F5;
  --color-white:   #FFFFFF;
  --color-text:    #133233;
  --color-text-muted: #547867;
  --color-neutral: #D8DCD7;

  /* Échelle de gris */
  --gray-50:  #F7F7F5;
  --gray-100: #E8E3DA;
  --gray-200: #D8DCD7;
  --gray-300: #C9D1CA;
  --gray-400: #8AA196;
  --gray-500: #547867;
  --gray-600: #3F5F53;
  --gray-700: #2D4946;
  --gray-800: #1B4041;
  --gray-900: #0F2B2D;

  /* ── Couleurs de statut commande ─────────────────────────── */
  --status-success-bg:     #EAF6EA;
  --status-success-text:   #2D6B2D;
  --status-success-border: #96C796;

  --status-pending-bg:     #FFF1E6;
  --status-pending-text:   #A55B16;
  --status-pending-border: #E8872F;

  --status-progress-bg:     #EEF3F0;
  --status-progress-text:   #133233;
  --status-progress-border: #8AA196;

  --status-error-bg:     #FDEAEA;
  --status-error-text:   #A12C2C;
  --status-error-border: #E7A8A8;

  --status-info-bg:     #EDF5F2;
  --status-info-text:   #1B4041;
  --status-info-border: #96C796;

  --color-danger:      #dc2626;
  --color-danger-dark: #b91c1c;
  --color-danger-light:#fee2e2;

  --color-warning:      #f59e0b;
  --color-warning-dark: #d97706;
  --color-warning-light:#fef3c7;

  /* ── Typographie ─────────────────────────────────────────── */
  --font-heading: 'Poppins', sans-serif;
  --font-body:    'Inter', sans-serif;

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --text-h1:      2.5rem;    /* 40px */
  --text-h2:      2rem;      /* 32px */
  --text-h3:      1.5rem;    /* 24px */
  --text-h4:      1.25rem;   /* 20px */
  --text-body:    1rem;      /* 16px */
  --text-small:   0.875rem;  /* 14px */
  --text-caption: 0.75rem;   /* 12px */

  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-normal: 1.5;
  --lh-relaxed:1.65;

  /* ── Espacement (échelle 4px) ────────────────────────────── */
  --sp-1:  0.25rem;   /*  4px */
  --sp-2:  0.5rem;    /*  8px */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */
  --sp-20: 5rem;      /* 80px */

  /* ── Rayons ──────────────────────────────────────────────── */
  --radius-xs:   0.25rem;  /*  4px */
  --radius-sm:   0.5rem;   /*  8px */
  --radius-md:   0.75rem;  /* 12px  – cartes */
  --radius-lg:   1rem;     /* 16px  – modals */
  --radius-xl:   1.5rem;   /* 24px */
  --radius-pill: 999px;    /* pills, badges, boutons arrondis */

  /* ── Ombres ──────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.06);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.04);
  --shadow-xl: 0 20px 25px rgba(0,0,0,.08), 0 10px 10px rgba(0,0,0,.04);

  /* ── Layout ──────────────────────────────────────────────── */
  --container-max: 1200px;
  --container-pad: var(--sp-6);
  --topbar-h:      68px;
  --sidebar-w:     260px;
  --bottom-nav-h:  64px;

  /* ── Transitions ─────────────────────────────────────────── */
  --t-fast:   150ms ease;
  --t-normal: 250ms ease;
  --t-slow:   400ms ease;

  /* ── Z-index ─────────────────────────────────────────────── */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-fixed:    300;
  --z-overlay:  350;
  --z-modal:    400;
  --z-toast:    500;
}