/*
 * ============================================================
 *  KWMS — Design System Tokens
 *  Source unique de vérité pour toutes les variables CSS
 *  Palette : Vert Émeraude Business
 * ============================================================
 */

/* Cairo (Arabic/Latin) depuis Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');

:root {

  /* ================================================================
     COULEURS — Palette principale
  ================================================================ */

  /* Émeraude (couleur d'action principale) */
  --color-primary:        #059669;
  --color-primary-dark:   #047857;
  --color-primary-darker: #065f46;
  --color-primary-light:  #d1fae5;
  --color-primary-alpha:  rgba(5, 150, 105, 0.12);

  /* Accent (bleu ciel pour infos, liens) */
  --color-accent:         #0ea5e9;
  --color-accent-light:   #e0f2fe;

  /* Sémantiques */
  --color-success:        #22c55e;
  --color-success-light:  #dcfce7;
  --color-danger:         #ef4444;
  --color-danger-light:   #fef2f2;
  --color-warning:        #f59e0b;
  --color-warning-light:  #fffbeb;
  --color-info:           #3b82f6;
  --color-info-light:     #eff6ff;

  /* Surfaces & fonds */
  --color-white:          #ffffff;
  --color-surface:        #f8fafc;
  --color-surface-alt:    #f0fdf4;   /* légèrement teinté vert */
  --color-surface-dark:   #ecfdf5;

  /* Textes */
  --color-text:           #111827;
  --color-text-secondary: #4b5563;
  --color-text-muted:     #9ca3af;
  --color-text-on-primary:#ffffff;

  /* Bordures */
  --color-border:         #e5e7eb;
  --color-border-dark:    #d1d5db;
  --color-border-focus:   #059669;

  /* Overlay */
  --color-overlay:        rgba(0, 0, 0, 0.55);
  --color-overlay-blur:   rgba(0, 0, 0, 0.45);


  /* ================================================================
     TYPOGRAPHIE
  ================================================================ */

  --font-family:          'Cairo', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;

  /* Tailles (échelle 4/3) */
  --text-xs:   0.75rem;    /*  12px */
  --text-sm:   0.875rem;   /*  14px */
  --text-base: 1rem;       /*  16px */
  --text-lg:   1.125rem;   /*  18px */
  --text-xl:   1.25rem;    /*  20px */
  --text-2xl:  1.5rem;     /*  24px */
  --text-3xl:  1.875rem;   /*  30px */
  --text-4xl:  2.25rem;    /*  36px */

  /* Graisses */
  --font-normal:     400;
  --font-medium:     500;
  --font-semibold:   600;
  --font-bold:       700;
  --font-extrabold:  800;

  /* Interlignage */
  --leading-tight:   1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.75;


  /* ================================================================
     ESPACEMENT (multiple de 4px)
  ================================================================ */

  --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-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */


  /* ================================================================
     BORDER RADIUS
  ================================================================ */

  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;


  /* ================================================================
     OMBRES
  ================================================================ */

  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm:    0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl:    0 16px 40px rgba(0, 0, 0, 0.14);
  --shadow-2xl:   0 24px 60px rgba(0, 0, 0, 0.18);

  /* Focus ring */
  --shadow-focus:         0 0 0 3px rgba(5, 150, 105, 0.25);
  --shadow-focus-danger:  0 0 0 3px rgba(239, 68, 68, 0.25);


  /* ================================================================
     LAYOUT MOBILE (valeurs critiques partagées)
  ================================================================ */

  --header-height:  64px;
  --nav-height:     68px;

  /* Paddings automatiques pour ne pas être caché par header/nav */
  --layout-pt: var(--header-height);
  --layout-pb: var(--nav-height);

  /* Desktop layout */
  --sidebar-width:           220px;
  --sidebar-width-collapsed:  60px;
  --desktop-header-height:    60px;


  /* ================================================================
     TRANSITIONS
  ================================================================ */

  --ease-out:     cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;

  --transition-fast:   var(--duration-fast) var(--ease-out);
  --transition-base:   var(--duration-base) var(--ease-in-out);
  --transition-slow:   var(--duration-slow) var(--ease-in-out);


  /* ================================================================
     Z-INDEX
  ================================================================ */

  --z-base:    0;
  --z-raised:  10;
  --z-header:  100;
  --z-nav:     100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   2000;
}