/* ============================================================
   CMS Design System — Design tokens (DS.1, V1-DS)
   ------------------------------------------------------------
   Valeurs PAR DÉFAUT = thème « fasore » (design v2, docs/designs/palette-v2.md).
   Le thème actif en base (ui_config.ui_theme) est servi par
   /api/UiThemes/active/css, chargé APRÈS ce fichier : il surcharge
   ces variables sans redéploiement (bascule par l'API).
   Les tokens sémantiques sont DÉRIVÉS des échelles (var(--…)) : un
   thème qui ne les définit pas reste cohérent avec sa propre palette.
   ============================================================ */

:root {

  /* ─── Accent (Primary FasoRE = step 700) ───────────────────── */
  --color-primary-50:  #FBF0F0;
  --color-primary-100: #F7DCDC;
  --color-primary-200: #EDB5B5;
  --color-primary-300: #E18080;
  --color-primary-400: #CB2424;
  --color-primary-500: #AB2424;
  --color-primary-600: #8C2424;
  --color-primary-700: #721313;
  --color-primary-800: #590F0F;
  --color-primary-900: #3F0A0A;

  --color-primary:               var(--color-primary-700);
  --color-primary-hover:         var(--color-primary-600);
  --color-primary-active:        var(--color-primary-800);
  --color-primary-contrast:      #FFFFFF;
  --color-primary-contrast-soft: var(--color-primary-contrast);
  --color-accent-gradient-start: var(--color-primary-400);
  --color-accent-gradient-end:   var(--color-primary-600);
  --color-accent-border-strong:  var(--color-primary-500);
  --color-accent-scrollbar:      var(--color-primary-800);
  --color-accent-separator:      var(--color-primary-300);

  /* ─── Neutres ──────────────────────────────────────────────── */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #F5F5F5;
  --color-neutral-100: #F3F3F3;
  --color-neutral-200: #EEEEEE;
  --color-neutral-300: #E2E2E2;
  --color-neutral-400: #D2D2D2;
  --color-neutral-500: #A8A8A8;
  --color-neutral-600: #797979;
  --color-neutral-700: #525252;
  --color-neutral-800: #303030;
  --color-neutral-900: #000000;

  /* ─── Sémantiques (danger ≠ accent : erreurs de validation) ── */
  --color-success-light: #E9EFE6;
  --color-success:       #255C07;
  --color-success-dark:  #1A4205;
  --color-warning-light: #F8EEE3;
  --color-warning:       #AD6514;
  --color-warning-dark:  #7A470E;
  --color-danger-light:  #FBF0F0;
  --color-danger:        #B3261E;
  --color-danger-dark:   #721313;
  --color-info-light:    #E9EFF5;
  --color-info:          #245B8F;
  --color-info-dark:     #183D60;

  /* ─── Surfaces ─────────────────────────────────────────────── */
  --color-surface-app:          var(--color-neutral-200);
  --color-surface-card:         var(--color-neutral-100);
  --color-surface-input:        var(--color-neutral-0);
  --color-surface-subtle:       #E6E6E6;
  --color-surface-sidebar:      var(--color-neutral-300);
  --color-surface-submenu:      var(--color-primary-100);
  --color-surface-nav-hover:    transparent;
  --color-surface-row-hover:    #E4E4E4;
  --color-surface-tile:         #D9D9D9;
  --color-surface-tab-inactive: var(--color-neutral-50);
  --color-surface-filter-label: var(--color-neutral-400);
  --color-surface-auth-brand:   var(--color-primary);
  --color-surface-auth-glass:   rgba(255, 255, 255, 0.14);

  /* ─── Textes et icônes ─────────────────────────────────────── */
  --color-text-primary:          var(--color-neutral-900);
  --color-text-body:             var(--color-neutral-800);
  --color-text-secondary:        var(--color-neutral-700);
  --color-text-muted:            #494949;
  --color-text-placeholder:      #757575;
  --color-text-on-primary:       var(--color-primary-contrast);
  --color-text-on-primary-muted: var(--color-neutral-400);
  --color-text-brand:            var(--color-text-primary);
  --color-text-nav:              var(--color-primary);
  --color-text-nav-hover:        var(--color-primary-600);
  --color-text-nav-muted:        #7B4B4B;
  --color-text-nav-sub-active:   var(--color-text-nav);
  --color-link:                  var(--color-primary);
  --color-icon:                  var(--color-primary);
  --color-icon-nav:              var(--color-icon);
  --color-icon-neutral:          #1E1E1E;

  /* ─── Bordures ─────────────────────────────────────────────── */
  --color-border-default: #D3D3D3;
  --color-border-input:   #898989;   /* WCAG 1.4.11 : 3:1 sur fonds clairs */
  --color-border-ring:    #D5D5D5;
  --color-border-sidebar: #A9A9A9;
  --color-divider:        var(--color-neutral-600);
  --color-focus-ring:     var(--color-primary-400);

  /* ─── Statuts et urgence (badges / pills v2) ───────────────── */
  --color-status-draft:           var(--color-neutral-800);
  --color-status-draft-text:      #FFFFFF;
  --color-status-draft-outline:   var(--color-neutral-600);
  --color-status-accepted:        var(--color-success);
  --color-status-accepted-text:   #FFFFFF;
  --color-status-rejected:        var(--color-primary);
  --color-status-rejected-text:   #FFFFFF;
  --color-status-waiting:         #BF7016;
  --color-status-waiting-strong:  var(--color-warning);
  --color-status-waiting-text:    #FFFFFF;
  --color-status-pending:         #CA9B35;
  --color-status-pending-text:    #1D1B20;
  --color-status-pending-outline: #BF7016;
  --color-urgency-high:           var(--color-primary);
  --color-urgency-medium:         var(--color-warning);
  --color-urgency-low:            var(--color-success);
  --color-urgency-text:           #FFFFFF;

  /* ─── Typographie ──────────────────────────────────────────── */
  --font-family-sans: 'Poppins', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-family-data: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.8125rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.75rem;
  --text-4xl:  2.25rem;

  --leading-xs:   1rem;
  --leading-sm:   1.25rem;
  --leading-base: 1.5rem;
  --leading-lg:   1.75rem;
  --leading-xl:   1.875rem;
  --leading-2xl:  2rem;
  --leading-3xl:  2.25rem;

  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* ─── Espacement (base 4px) ────────────────────────────────── */
  --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;
  --space-16: 64px;

  /* ─── Rayons ───────────────────────────────────────────────── */
  --radius-none:         0;
  --radius-xs:           4px;
  --radius-sm:           6px;
  --radius-md:           8px;
  --radius-lg:           12px;
  --radius-xl:           16px;
  --radius-2xl:          24px;
  --radius-3xl:          40px;
  --radius-full:         9999px;
  --radius-badge:        4px;
  --radius-button:       8px;
  --radius-button-auth:  10px;
  --radius-tab:          8px;
  --radius-input:        16px;
  --radius-input-grid:   8px;
  --radius-filter:       9999px;
  --radius-status-pill:  12px;
  --radius-nav-item:     12px;
  --radius-menu:         8px;
  --radius-dropzone:     16px;
  --radius-card:         24px;
  --radius-tile:         40px;

  /* ─── Ombres ───────────────────────────────────────────────── */
  --shadow-xs:     0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-sm:     0 2px 4px 0 rgba(0,0,0,.15);
  --shadow-md:     0 4px 4px 0 rgba(0,0,0,.25);
  --shadow-lg:     0 8px 16px -4px rgba(0,0,0,.25);
  --shadow-card:   0 4px 4px 0 rgba(0,0,0,.25);
  --shadow-button: 4px 4px 4px 0 rgba(0,0,0,.25);
  --shadow-avatar: 0 0 0 1px rgba(0,0,0,.2);
  --shadow-focus:  0 0 0 3px rgba(203,36,36,.35);

  /* ─── Animations ───────────────────────────────────────────── */
  --duration-fast:  100ms;
  --duration-base:  200ms;
  --duration-slow:  300ms;
  --duration-enter: 400ms;
  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── Dimensions du shell ──────────────────────────────────── */
  --sidebar-width-expanded:  280px;
  --sidebar-width-collapsed: 72px;
  --appbar-height:           80px;
  --table-row-height:        56px;
  --table-header-height:     48px;
  --control-height:          44px;
  --button-height-lg:        48px;
  --gradient-nav-active: linear-gradient(90deg, var(--color-accent-gradient-start) 0%, var(--color-accent-gradient-end) 100%);
}

/* Fond et police globaux */
html, body {
  background-color: var(--color-surface-app);
}

body {
  margin: 0;
  font-family: var(--font-family-sans);
  color: var(--color-text-body);
  -webkit-font-smoothing: antialiased;
}