/* =============================================================================
   tokens.css
   Design tokens — source de vérité unique pour toute l'interface.
   RÈGLE : aucun autre fichier CSS ne définit de valeur brute.
           Tout passe par ces variables.
   ============================================================================= */

:root {

  /* ---------------------------------------------------------------------------
     COULEURS — Palette principale
  --------------------------------------------------------------------------- */

  /* Primary (Teal) */
  --color-primary:        #28C3A9;
  --color-primary-hover:  #20A892;
  --color-primary-dark:   #178A78;
  --color-primary-light:  #DDF8F3;
  --color-primary-subtle: #EBF9F6;

  /* Primary alpha — overlays, focus rings, hover tints.
     Règle : utiliser ces tokens, ne jamais écrire rgba(40,195,169,…) en dur. */
  --color-primary-alpha-04: rgba(40,195,169,0.04);  /* hover ligne tableau (très subtil) */
  --color-primary-alpha-06: rgba(40,195,169,0.06);  /* hover bouton per-page             */
  --color-primary-alpha-08: rgba(40,195,169,0.08);  /* hover ghost, combobox, back-link  */
  --color-primary-alpha-10: rgba(40,195,169,0.10);  /* focus ring — toolbar, filter      */
  --color-primary-alpha-12: rgba(40,195,169,0.12);  /* focus ring — card-toolbar, combo  */
  --color-primary-alpha-20: rgba(40,195,169,0.20);  /* dot glow — stat-strip is-active   */

  /* Surfaces & Backgrounds */
  --color-bg:             #F8FAFC;
  --color-surface:        #FFFFFF;
  --color-surface-raised: #FFFFFF;

  /* Textes */
  --color-text-main:      #1F2937;
  --color-text-muted:     #6B7280;
  --color-text-light:     #9CA3AF;
  --color-text-inverse:   #F8FAFC;

  /* Bordures */
  --color-border:         #E5E7EB;
  --color-border-strong:  #D1D5DB;

  /* États sémantiques */
  --color-success:        #16A34A;
  --color-success-bg:     #F0FDF4;
  --color-success-border: #BBF7D0;

  --color-warning:        #F59E0B;
  --color-warning-bg:     #FFFBEB;
  --color-warning-border: #FDE68A;

  --color-danger:         #EF4444;
  --color-danger-hover:   #DC2626;
  --color-danger-bg:      #FEF2F2;
  --color-danger-border:  #FECACA;

  --color-info:           #3B82F6;
  --color-info-bg:        #EFF6FF;
  --color-info-border:    #BFDBFE;

  /* Sidebar */
  --color-sidebar-bg:     #1F2937;
  --color-sidebar-text:   #D1D5DB;
  --color-sidebar-text-active: #FFFFFF;
  --color-sidebar-item-hover:  rgba(255,255,255,0.06);
  --color-sidebar-item-active: rgba(40,195,169,0.15);
  --color-sidebar-item-active-border: var(--color-primary);
  --color-sidebar-border:  rgba(255,255,255,0.06);

  /* Topbar */
  --color-topbar-bg:      #1F2937;
  --color-topbar-text:    #F8FAFC;
  --color-topbar-border:  rgba(255,255,255,0.08);

  /* ---------------------------------------------------------------------------
     TYPOGRAPHIE
  --------------------------------------------------------------------------- */

  --font-sans:   'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', monospace;

  --text-2xs:    0.625rem;   /* 10px — thead, labels compacts */
  --text-xs:     0.75rem;    /* 12px */
  --text-sm:     0.875rem;   /* 14px */
  --text-base:   1rem;       /* 16px */
  --text-md:     1.0625rem;  /* 17px */
  --text-lg:     1.125rem;   /* 18px */
  --text-xl:     1.25rem;    /* 20px — valeurs KPI, stat-strip */
  --text-2xl:    1.5rem;     /* 24px — valeurs KPI card */
  --text-3xl:    1.875rem;   /* 30px */

  /* Hors-échelle — usage restreint aux tableaux compacts uniquement */
  --text-compact: 0.65625rem; /* 10.5px — data-table--compact th */

  --font-normal:  400;
  --font-medium:  500;
  --font-semi:    600;
  --font-bold:    700;

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  /* ---------------------------------------------------------------------------
     ESPACEMENT — Échelle 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 */

  /* ---------------------------------------------------------------------------
     DIMENSIONS — Layout
  --------------------------------------------------------------------------- */

  --sidebar-width:         240px;
  --sidebar-collapsed:     64px;
  --topbar-height:         56px;
  --content-max-width:     1280px;

  /* ---------------------------------------------------------------------------
     CHAMPS DE FORMULAIRE — Hauteurs canoniques
     Règle : 3 tailles, pas plus. Chaque contexte utilise UNE taille.
       --input-sm  → filtres, toolbars, tableaux compacts (28px)
       --input-md  → formulaires standards, modales (34px)
       --input-lg  → login, formulaires hero (40px)
  --------------------------------------------------------------------------- */

  --input-height-sm:  28px;
  --input-height-md:  34px;
  --input-height-lg:  40px;

  /* ---------------------------------------------------------------------------
     BORDURES & RAYONS
  --------------------------------------------------------------------------- */

  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;

  --border-width:    1px;
  --border-width-md: 1.5px;  /* bordures card, sections dépliables, pill */

  /* ---------------------------------------------------------------------------
     OMBRES
  --------------------------------------------------------------------------- */

  --shadow-xs:   0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:   0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.04);
  --shadow-xl:   0 20px 25px rgba(0,0,0,0.08), 0 8px 10px rgba(0,0,0,0.04);
  --shadow-card: 0 10px 8px rgba(0,0,0,0.07); /* cards dépliables : pf-section, pd-card, filter-panel */

  /* ---------------------------------------------------------------------------
     TRANSITIONS
  --------------------------------------------------------------------------- */

  --transition-fast:   150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   300ms ease;

  /* ---------------------------------------------------------------------------
     Z-INDEX — Hiérarchie des couches
  --------------------------------------------------------------------------- */

  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-sidebar:  300;
  --z-topbar:   400;
  --z-modal:    500;
  --z-toast:    600;
  --z-tooltip:  700;

  /* ---------------------------------------------------------------------------
     BADGES / STATUS — tokens sémantiques
  --------------------------------------------------------------------------- */

  --status-ok-color:       var(--color-success);
  --status-ok-bg:          var(--color-success-bg);
  --status-ok-border:      var(--color-success-border);

  --status-ko-color:       var(--color-danger);
  --status-ko-bg:          var(--color-danger-bg);
  --status-ko-border:      var(--color-danger-border);

  --status-warn-color:     var(--color-warning);
  --status-warn-bg:        var(--color-warning-bg);
  --status-warn-border:    var(--color-warning-border);

  --status-skip-color:     var(--color-text-muted);
  --status-skip-bg:        #F3F4F6;
  --status-skip-border:    var(--color-border);

  --status-pending-color:  var(--color-info);
  --status-pending-bg:     var(--color-info-bg);
  --status-pending-border: var(--color-info-border);

  /* MD mode (manuel/bloqué) — violet */
  --color-md:        #6d28d9;
  --color-md-border: #ddd6fe;
  --color-md-bg:     #ede9fe;
  --color-md-hover:  #d8b4fe;

  /* ---------------------------------------------------------------------------
     FILTRES — tokens pour les panneaux de filtres compacts
     Consommés par : .filter-panel, .combobox (contexte filtre)
     Règle : ces tokens définissent la taille et l'espacement des champs
             dans les panneaux filtres. Les formulaires standards
             continuent d'utiliser --input-height-md / --input-height-lg.
  --------------------------------------------------------------------------- */

  --filter-field-height:    28px;
  --filter-label-size:      var(--text-2xs);           /* 10px */
  --filter-label-color:     #4B5563;                   /* gray-600 — plus foncé que muted */
  --filter-label-weight:    var(--font-medium);
  --filter-ctrl-size:       var(--text-xs);            /* 12px */
  --filter-ctrl-color:      var(--color-text-muted);
  --filter-ctrl-border:     var(--color-text-muted);   /* #6B7280 — même couleur que le label */
  --filter-placeholder:     var(--color-text-light);   /* #9CA3AF — placeholder unifié (input, select vide, combobox) */
  --filter-col-title-size:  var(--text-xs);            /* 12px */
  --filter-col-title-color: var(--color-text-main);
  --filter-gap-field:       var(--space-1);            /* 4px — label ↔ ctrl */
  --filter-gap-grid:        var(--space-1) var(--space-2);  /* 4px 8px — grille label+ctrl */
  --filter-col-padding:     10px 14px;
}