/* ═══════════════════════════════════════════════════════════════════════════
   Simone — Tokens
   Source de vérité de l'apparence. Deux couches, dans cet ordre :

     PRIMITIVES   des couleurs nommées par ce qu'elles SONT (--gray-600)
     SÉMANTIQUES  des rôles nommés par ce qu'ils FONT   (--text-subtle)

   Un composant ne lit JAMAIS une primitive. Il lit un rôle.
   C'est ce qui permet de changer une teinte sans relire l'interface.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── PRIMITIVES ─────────────────────────────────────────────────────────
     Graphite froid : la coque. Violet : l'action. Quatre teintes d'état. */

  --gray-0:    #FFFFFF;
  --gray-50:   #FBFBFC;
  --gray-100:  #F4F4F7;
  --gray-150:  #EDEDF1;
  --gray-200:  #E1E1E7;
  --gray-300:  #CBCBD4;
  --gray-400:  #A6A6B2;
  --gray-450:  #9A9AA4;
  --gray-500:  #8C8C96;
  --gray-600:  #6E6E78;
  --gray-700:  #52525C;
  --gray-800:  #34343C;
  --gray-850:  #272730;
  --gray-900:  #1F1F25;
  --gray-950:  #17171A;
  --gray-975:  #0D0D10;
  --gray-1000: #0A0A0C;

  --violet-50:  #F1F0FE;
  --violet-100: #E5E3FD;
  --violet-200: #CFCBFB;
  --violet-300: #B2ACF8;
  --violet-400: #8B84FF;
  --violet-500: #6D65F0;
  --violet-600: #5B54E8;
  --violet-700: #4B44D6;
  --violet-800: #3A34A6;
  --violet-900: #272270;
  --violet-950: #191640;

  --green-50:  #E3F5EC;  --green-400: #3ECF8E;  --green-600: #16875A;
  --green-700: #0F6B46;  --green-900: #12301F;  --green-300: #6EE0AC;

  --blue-50:   #E4EDFE;  --blue-400:  #7BA2FF;  --blue-600:  #2563EB;
  --blue-700:  #1D4ED8;  --blue-900:  #16203A;  --blue-300:  #A7C0FF;

  --amber-50:  #FDF0DC;  --amber-400: #E0A340;  --amber-600: #B26A00;
  --amber-700: #8A5200;  --amber-900: #33260F;  --amber-300: #EFC47C;

  --red-50:    #FCE9E9;  --red-400:   #F26161;  --red-600:   #D12E2E;
  --red-700:   #A62222;  --red-900:   #361A1A;  --red-300:   #FF9090;

  /* ── RYTHME ─────────────────────────────────────────────────────────── */
  --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;

  /* ── FORME ──────────────────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --radius-full: 999px;
  --border-w: 1px;
  /* ⚠ DEUX LARGEURS, PAS UNE. « --border-w » est celle des CONTRÔLES — champs,
     boutons, anneau de focus : la rétrécir affaiblirait ce qu'on doit voir.
     « --filet-w » est celle des SÉPARATIONS — cartes, lignes de tableau,
     traits : là, un pixel logique est déjà épais. Sur un écran dense il vaut
     un demi-pixel, soit UN pixel d'écran, le filet le plus fin qui existe ;
     ailleurs il reste à 1px, parce qu'un demi-pixel sur un écran simple
     s'efface ou grisaille au lieu de s'affiner. */
  --filet-w: 1px;

  /* ── ICÔNES ─────────────────────────────────────────────────────────────
     Trois tailles, pas davantage. Elles ne suivent PAS la densité : une icône
     qui rétrécit avec la ligne devient illisible avant que le texte ne gêne. */
  --icon-sm: 16px;   /* dans une ligne, à côté d'un texte de 13–14 px */
  --icon-md: 20px;   /* boutons, navigation, barres d'outils */
  --icon-lg: 24px;   /* en-têtes, états vides, fenêtres */

  /* ── TYPOGRAPHIE ────────────────────────────────────────────────────── */
  --font-ui: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-num: var(--font-ui);
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --display-weight: 600;
  --display-tracking: -0.028em;
  --ui-tracking: -0.006em;

  /* ── MOTION ─────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(.32, .72, 0, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-lent: 280ms;   /* grandes surfaces qui entrent : panneau, tiroir */
  --ease-sortie: cubic-bezier(.4, 0, 1, 1); /* ce qui s'en va accélère, sans s'attarder */

  /* ── DENSITÉ — confortable (défaut) ─────────────────────────────────── */
  --control-h: 40px;
  --control-h-sm: 32px;
  --row-h: 56px;
  --th-h: 38px;      /* en-tête de tableau — partagée avec la barre de sélection */
  --pad-card: var(--space-6);
  --pad-section: var(--space-8);
  --text-base: 15px;
  --gap-form: var(--space-5);
}

[data-density="compacte"] {
  --control-h: 32px;
  --control-h-sm: 26px;
  --row-h: 40px;
  --th-h: 32px;
  --pad-card: var(--space-4);
  --pad-section: var(--space-5);
  --text-base: 13.5px;
  --gap-form: var(--space-3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SÉMANTIQUES — mode clair
   Le bandeau latéral est sombre en mode clair : c'est un choix d'identité,
   pas une inversion accidentelle.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --bg:              var(--gray-50);
  --surface:         var(--gray-0);
  --surface-2:       var(--gray-100);
  --surface-sunken:  var(--gray-150);
  --surface-inverse: var(--gray-950);

  --text:         var(--gray-950);
  /* Le chevron des listes (.select) : caret-down du jeu d'icônes, à la couleur
     de --text — une image ne lit pas currentColor. */
  --select-fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%2317171A'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  --text-muted:   var(--gray-700);
  --text-subtle:  var(--gray-600);
  --text-inverse: var(--gray-0);

  --border:        var(--gray-200);
  --border-strong: var(--gray-500);   /* bordure de contrôle : ≥ 3:1 exigé */

  /* Action — et rien d'autre */
  --accent:           var(--violet-600);
  --accent-hover:     var(--violet-700);
  --accent-text:      var(--gray-0);
  --accent-soft:      var(--violet-50);
  --accent-soft-text: var(--violet-700);

  /* États — jamais l'accent */
  --ok:     var(--green-600); --ok-soft:     var(--green-50); --ok-soft-text:     var(--green-700);
  --info:   var(--blue-600);  --info-soft:   var(--blue-50);  --info-soft-text:   var(--blue-700);
  --warn:   var(--amber-600); --warn-soft:   var(--amber-50); --warn-soft-text:   var(--amber-700);
  --danger: var(--red-600);   --danger-soft: var(--red-50);   --danger-soft-text: var(--red-700);
  --danger-text: var(--gray-0);

  --shadow-sm: 0 1px 2px rgba(20, 20, 30, .05);
  --shadow-md: 0 1px 2px rgba(20, 20, 30, .04), 0 6px 16px rgba(20, 20, 30, .08);
  --shadow-lg: 0 2px 4px rgba(20, 20, 30, .04), 0 16px 40px rgba(20, 20, 30, .14);
  --focus-ring: 0 0 0 3px rgba(91, 84, 232, .28);

  --nav-bg:          var(--gray-950);
  --nav-text:        var(--gray-450);
  --nav-text-strong: var(--gray-0);
  --nav-text-active: var(--gray-0);
  --nav-filet:       color-mix(in srgb, var(--nav-text) 22%, transparent);
  --nav-active-bg:   var(--gray-850);
  --nav-icon-active: var(--violet-400);  /* l'accent entre dans la nav par l'icône */
}

/* ═══════════════════════════════════════════════════════════════════════════
   SÉMANTIQUES — mode sombre
   Seuls les RÔLES sont réassignés. Aucune primitive n'est redéfinie.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-mode="sombre"] {
  --bg:              var(--gray-975);
  --surface:         var(--gray-950);
  --surface-2:       var(--gray-900);
  --surface-sunken:  var(--gray-1000);
  --surface-inverse: var(--gray-0);

  --text:         var(--gray-100);
  --select-fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23F4F4F7'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  --text-muted:   var(--gray-450);
  --text-subtle:  var(--gray-500);
  --text-inverse: var(--gray-950);

  --border:        var(--gray-850);
  --border-strong: var(--gray-600);

  --accent:           var(--violet-400);
  --accent-hover:     var(--violet-300);
  --accent-text:      var(--violet-950);
  --accent-soft:      var(--violet-950);
  --accent-soft-text: var(--violet-300);

  --ok:     var(--green-400); --ok-soft:     var(--green-900); --ok-soft-text:     var(--green-300);
  --info:   var(--blue-400);  --info-soft:   var(--blue-900);  --info-soft-text:   var(--blue-300);
  --warn:   var(--amber-400); --warn-soft:   var(--amber-900); --warn-soft-text:   var(--amber-300);
  --danger: var(--red-400);   --danger-soft: var(--red-900);   --danger-soft-text: var(--red-300);
  --danger-text: var(--red-900);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 16px rgba(0, 0, 0, .5);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 16px 40px rgba(0, 0, 0, .65);
  --focus-ring: 0 0 0 3px rgba(139, 132, 255, .32);

  --nav-bg:          var(--gray-1000);
  --nav-text:        var(--gray-450);
  --nav-text-strong: var(--gray-0);
  --nav-text-active: var(--gray-0);
  --nav-filet:       color-mix(in srgb, var(--nav-text) 22%, transparent);
  --nav-active-bg:   var(--gray-900);
  --nav-icon-active: var(--violet-400);
}

@media (min-resolution: 2dppx) {
  :root { --filet-w: 0.5px; }
}