/* ==========================================================================
   TOKENS.CSS
   Variables centralisées de la charte graphique.
   Toute évolution de couleur/espacement/typo passe par ce fichier,
   à charge pour components.css et les templates de les consommer.
   ========================================================================== */

:root {

  /* --- Couleurs de marque --------------------------------------------- */
  --color-accent-50:  #FAECE7;
  --color-accent-100: #F5C4B3;
  --color-accent-200: #F0997B;
  --color-accent-400: #D85A30;  /* accent principal (boutons primaires, titres) */
  --color-accent-600: #993C1D;
  --color-accent-800: #712B13;  /* texte sur fond accent clair */
  --color-accent-900: #4A1B0C;

  --color-navy-100: #B8C4D4;
  --color-navy-400: #2D4562;
  --color-navy-600: #1B2E45;    /* nav bar */
  --color-navy-800: #101C2B;

  /* --- Gris neutres (fonds, bordures, tableaux) ------------------------ */
  --color-gray-50:  #FAFAF8;
  --color-gray-100: #F5F4F0;    /* fond zébré */
  --color-gray-200: #EDEAE2;    /* en-tête de tableau */
  --color-gray-300: #D3D1C7;    /* bordures */
  --color-gray-500: #888780;    /* texte secondaire */
  --color-gray-700: #5F5E5A;
  --color-gray-900: #2C2C2A;    /* texte principal */

  /* --- Couleurs sémantiques (statuts, alertes) -------------------------- */
  --color-success-50:  #EAF3DE;
  --color-success-600: #3B6D11;
  --color-danger-50:   #FCEBEB;
  --color-danger-600:  #A32D2D;
  --color-warning-50:  #FAEEDA;
  --color-warning-600: #854F0B;

  /* --- Rôles fonctionnels (ce que les composants consomment) ----------- */
  --surface-page:      var(--color-gray-50);
  --surface-card:      #FFFFFF;
  --surface-header:    var(--color-navy-600);
  --surface-row-alt:   var(--color-gray-100);
  --surface-table-head: var(--color-gray-200);

  --text-primary:      var(--color-gray-900);
  --text-secondary:    var(--color-gray-700);
  --text-muted:        var(--color-gray-500);
  --text-on-navy:      #FFFFFF;
  --text-on-navy-muted: var(--color-navy-100);
  --text-on-accent:    #FFFFFF;
  --text-accent:       var(--color-accent-800);

  --border-default:    var(--color-gray-300);
  --border-strong:     var(--color-gray-500);

  --action-primary-bg:       var(--color-accent-400);
  --action-primary-bg-hover: var(--color-accent-600);
  --action-secondary-bg:       transparent;
  --action-secondary-border:   var(--color-gray-300);
  --action-secondary-border-hover: var(--color-gray-500);

  /* --- Typographie ------------------------------------------------------ */
  --font-sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --line-height-base: 1.5;

  /* --- Espacements -------------------------------------------------------- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;

  /* --- Rayons et bordures -------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --border-width: 0.5px;

  /* --- Hauteurs de composants ---------------------------------------------- */
  --h-control: 34px;
  --h-navbar: 44px;
}