/* ============================================================
   SYNERGY 360 — Design Tokens
   Source unique de vérité pour toutes les valeurs de style.
   NE PAS mettre de règles CSS ici — uniquement des variables.
   ============================================================ */

:root {

  /* ── Couleurs primaires ── */
  --color-navy:       #0B2545;   /* Brand principal — confiance institutionnelle */
  --color-navy-deep:  #071A30;   /* Hover actif sur fond sombre */
  --color-sapphire:   #1B4F8A;   /* Hover, éléments actifs */
  --color-indigo:     #4F6AF0;   /* CTA, focus rings, liens actifs */
  --color-indigo-100: #EEF0FD;   /* Fond léger pour états actifs */

  /* ── Accent or — éléments premium ── */
  --color-gold:       #C9952A;
  --color-gold-light: #FDF3DC;

  /* ── Sémantique : statuts ── */
  --color-success:       #0D7A5F;
  --color-success-light: #ECFDF5;
  --color-warning:       #B45309;
  --color-warning-light: #FFFBEB;
  --color-danger:        #B91C1C;
  --color-danger-light:  #FEF2F2;
  --color-info:          #1B4F8A;
  --color-info-light:    #EFF6FF;

  /* ── Neutres (Slate) ── */
  --color-slate-50:  #F8FAFC;   /* Fond général de l'app */
  --color-slate-100: #F1F5F9;   /* Fond secondaire, colonnes alternées */
  --color-slate-200: #E2E8F0;   /* Bordures légères */
  --color-slate-300: #CBD5E1;   /* Bordures visibles */
  --color-slate-400: #94A3B8;   /* Placeholder, icônes inactives */
  --color-slate-500: #64748B;   /* Labels secondaires */
  --color-slate-600: #475569;   /* Texte tertiaire */
  --color-slate-700: #334155;   /* Corps de texte principal */
  --color-slate-800: #1E293B;   /* Texte fort */
  --color-slate-900: #0F172A;   /* Titres */

  /* ── Blanc & transparences ── */
  --color-white:          #FFFFFF;
  --color-overlay:        rgba(11, 37, 69, 0.65);   /* Backdrop modales */
  --color-overlay-light:  rgba(11, 37, 69, 0.08);   /* Hover rows tableau */

  /* ── Typographie ── */
  --font-family:     'Inter', system-ui, -apple-system, sans-serif;
  --font-size-xs:    10.5px;
  --font-size-sm:    12px;
  --font-size-base:  14px;
  --font-size-md:    15px;
  --font-size-lg:    18px;
  --font-size-xl:    22px;
  --font-size-2xl:   28px;

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;
  --font-weight-black:   900;

  --line-height-tight:  1.2;
  --line-height-normal: 1.5;
  --line-height-loose:  1.75;

  /* Données chiffrées : alignement colonnes tableau */
  --font-numeric: 'Inter', sans-serif;
  --font-variant-numeric: tabular-nums;

  /* ── Espacements ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ── Border radius ── */
  --radius-sm: 6px;    /* inputs, badges */
  --radius-md: 10px;   /* cards, dropdowns */
  --radius-lg: 16px;   /* modales, panels */
  --radius-xl: 24px;   /* modale auth */
  --radius-full: 9999px; /* pills, avatars */

  /* ── Ombres ── */
  --shadow-sm: 0 1px 3px rgba(11, 37, 69, 0.08);
  --shadow-md: 0 4px 16px rgba(11, 37, 69, 0.12);
  --shadow-lg: 0 12px 40px rgba(11, 37, 69, 0.18);
  --shadow-focus: 0 0 0 3px rgba(79, 106, 240, 0.30); /* focus ring indigo */

  /* ── Transitions ── */
  --transition-fast:   100ms ease-out;
  --transition-normal: 150ms ease-out;
  --transition-slow:   250ms ease-out;

  /* ── Z-index scale ── */
  --z-dropdown: 1000;
  --z-sticky:   1100;
  --z-modal:    5000;
  --z-toast:    9000;
  --z-auth:     9999;
}