/* ═══════════════════════════════════════════════════════════════
   JARVIS — Design Tokens
   Centralise toutes les couleurs, rayons, transitions du site.
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ── Couleurs principales ─────────────────────────────────── */
  --color-bg:           #191919;   /* fond sombre dominant       */
  --color-primary:      #3498db;   /* bleu principal (bordures)  */
  --color-primary-btn:  rgba(21, 96, 189, 1); /* bleu boutons   */
  --color-text:         white;     /* texte par défaut           */

  /* ── Couleurs de statut ───────────────────────────────────── */
  --color-success:      #2ecc71;   /* vert  — OK / validé        */
  --color-success-dark: #27ae60;   /* vert foncé — hover         */
  --color-danger:       #e74c3c;   /* rouge — erreur / suppr.    */
  --color-danger-dark:  #c0392b;   /* rouge foncé — hover        */
  --color-warning:      #f39c12;   /* orange — alerte            */

  /* ── Couleurs utilitaires ─────────────────────────────────── */
  --color-spotify:      #1db954;   /* vert Spotify               */
  --color-border-muted: rgba(255, 255, 255, 0.15); /* séparateur */
  --color-overlay:      rgba(0, 0, 0, 0.6);        /* overlay    */

  /* ── Border-radius ───────────────────────────────────────── */
  --radius-card:  10px;   /* tuiles du dashboard            */
  --radius-panel: 25px;   /* grands panneaux (paramètres…)  */
  --radius-btn:   24px;   /* boutons et inputs              */
  --radius-md:     8px;   /* composants modernes (NAS…)     */
  --radius-tag:   20px;   /* étiquettes / tags              */
  --radius-sm:     6px;   /* petits éléments                */
  --radius-pill: 999px;   /* pilules (full-round)           */

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.25s;
}

/* ═══════════════════════════════════════════════════════════════
   Composants utilitaires réutilisables
   ═══════════════════════════════════════════════════════════════ */

/* Tuiles dashboard (fond sombre + coins) */
.card {
  background-color: var(--color-bg);
  border-radius: var(--radius-card);
  padding: 15px;
  color: var(--color-text);
}

/* Input standard du site */
.form-input {
  background-color: var(--color-bg);
  border: 2px solid var(--color-primary);
  color: var(--color-text);
  border-radius: var(--radius-btn);
  padding: 14px 10px;
  outline: none;
}

/* Bouton principal */
.btn-primary {
  background: none;
  border: 2px solid var(--color-primary-btn);
  border-radius: var(--radius-btn);
  color: var(--color-text);
  padding: 14px 40px;
  outline: none;
  cursor: pointer;
  transition: var(--transition-slow);
}
.btn-primary:hover {
  background: var(--color-primary-btn);
}

/* Tronquer texte long */
.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}