/* ============================================================
   Ibiza1IA — Design System
   tokens.css : variables globales (source de vérité unique)
   ------------------------------------------------------------
   Ne contient AUCUNE couleur d'accent en dur.
   L'accent (--accent...) est fourni par les fichiers product-*.css.
   ============================================================ */

:root {
  /* ---------- Typographie ---------- */
  --font-base: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-display: 2rem;      /* 32px — titres de page                */
  --fs-h1: 1.5rem;         /* 24px                                 */
  --fs-h2: 1.25rem;        /* 20px                                 */
  --fs-h3: 1.0625rem;      /* 17px                                 */
  --fs-body: 0.9375rem;    /* 15px — corps de texte                */
  --fs-sm: 0.8125rem;      /* 13px — légendes, métadonnées         */
  --fs-xs: 0.6875rem;      /* 11px — micro-labels, badges          */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.2;
  --lh-base: 1.55;

  /* ---------- Échelle d'espacement (base 4px) ---------- */
  --sp-1: 0.25rem;   /* 4  */
  --sp-2: 0.5rem;    /* 8  */
  --sp-3: 0.75rem;   /* 12 */
  --sp-4: 1rem;      /* 16 */
  --sp-5: 1.5rem;    /* 24 */
  --sp-6: 2rem;      /* 32 */
  --sp-7: 3rem;      /* 48 */
  --sp-8: 4rem;      /* 64 */

  /* ---------- Couleurs neutres (échelle de gris unique) ---------- */
  --c-bg: #f6f7f9;          /* fond général de l'app                */
  --c-surface: #ffffff;     /* cartes, panneaux                     */
  --c-surface-2: #f1f3f5;   /* surfaces secondaires, zones douces   */
  --c-border: #e4e7eb;      /* bordures standard                    */
  --c-border-strong: #cdd2d9;

  --c-text: #1a1d21;        /* texte principal                      */
  --c-text-muted: #6b7280;  /* texte secondaire                     */
  --c-text-faint: #9aa1ab;  /* texte tertiaire, placeholders        */
  --c-text-on-accent: #ffffff; /* surchargé par produit si besoin   */

  /* Sidebar (sombre, neutre — la couleur produit sert d'accent) */
  --c-sidebar-bg: #14161a;
  --c-sidebar-surface: #1d2026;
  --c-sidebar-text: #c7ccd3;
  --c-sidebar-text-muted: #858b95;
  --c-sidebar-border: #2a2e36;

  /* ---------- Palette d'identité des produits ----------
     Couleurs de marque des 4 produits, visibles sur toutes les pages
     (dots des pills topbar). Distinctes de --accent : l'accent du
     produit COURANT est fourni par product-*.css. */
  --product-aibiza: #EFFF02;
  --product-connect: #F65002;
  --product-analytics: #2fa84f;
  --product-onair: #A52298;

  /* ---------- Couleurs sémantiques (fixes, tous produits) ---------- */
  --c-success: #16a34a;
  --c-success-soft: #e8f6ee;
  --c-danger: #dc2626;
  --c-danger-soft: #fdecec;
  --c-warning: #d97706;
  --c-warning-soft: #fef3e2;
  --c-info: #0891b2;
  --c-info-soft: #e6f6fa;
  --c-orange: #ea580c;        /* palier intermédiaire warning→danger (ex. scores 20-39) */
  --c-orange-soft: #fdeee3;
  /* Échelle OFFICIELLE des scores Ibiza (alignée outils externes) :
     0-19 rouge (--c-danger), 20-44 orange (--c-orange),
     45-59 vert clair (good), 60-100 vert foncé (strong).
     Source de vérité JS : scripts/modules/score-scale.js */
  --c-score-strong: #15803d;       /* vert foncé — score 60-100 */
  --c-score-strong-soft: #dcf2e3;
  --c-score-good: #65a30d;         /* vert clair — score 45-59  */
  --c-score-good-soft: #f1f8e2;
  /* Triplets RGB des couleurs sémantiques (pour rgba + bg-opacity de Bootstrap) */
  --c-success-rgb: 22, 163, 74;
  --c-danger-rgb: 220, 38, 38;
  --c-warning-rgb: 217, 119, 6;
  --c-info-rgb: 8, 145, 178;
  --c-text-muted-rgb: 107, 114, 128;

  /* Marque tierce / accents spécifiques (fixes, tous thèmes) */
  --c-gold: #e6a700;          /* podium / top 10 des charts            */
  --c-gold-soft: #fdf3d8;
  --c-on-gold: #3a2c00;       /* texte posé sur fond or (contraste)    */
  --c-spotify: #1db954;       /* popularité Spotify                    */
  /* Sources de monitoring Music Intelligence (fixes, tous thèmes) */
  --c-src-beatport: #f6640a;  /* Beatport — orange                     */
  --c-src-tracklist: #1f6feb; /* 1001Tracklists — bleu                 */
  --c-src-shazam: #0a9bdb;    /* Shazam — bleu clair                   */
  --c-src-airplay: #7c3aed;   /* Airplay radios — violet               */
  /* Couleurs de marque réseaux sociaux (fixes, tous thèmes) */
  --c-social-instagram: #e4405f;
  --c-social-facebook: #1877f2;
  --c-social-x: #000000;
  --c-social-linkedin: #0a66c2;
  --c-on-social: #ffffff;     /* texte/icône sur fond de marque sociale */

  /* ---------- Accent (valeurs de repli — surchargées par produit) ---------- */
  --accent: #6f42c1;
  --accent-hover: #5a35a0;
  --accent-soft: rgba(111, 66, 193, 0.12);
  --accent-contrast: #ffffff;  /* couleur du texte posé SUR l'accent */

  /* ---------- Rayons ---------- */
  --radius-sm: 0.375rem;   /* 6px  — petits éléments               */
  --radius: 0.625rem;      /* 10px — boutons, champs               */
  --radius-lg: 0.875rem;   /* 14px — cartes                        */
  --radius-pill: 999px;

  /* ---------- Ombres (subtiles, en couches) ---------- */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow: 0 4px 12px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 12px 28px rgba(16, 24, 40, 0.12), 0 4px 8px rgba(16, 24, 40, 0.06);

  /* ---------- Transitions ---------- */
  --t-fast: 120ms ease;
  --t-base: 200ms ease;

  /* ---------- Layout ---------- */
  --sidebar-w: 256px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 60px;
  --page-max: 1280px;
}

/* ---------- Reset léger & base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

body.ds {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ds h1, .ds h2, .ds h3, .ds h4 {
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  margin: 0 0 var(--sp-3);
}
.ds h1 { font-size: var(--fs-h1); }
.ds h2 { font-size: var(--fs-h2); }
.ds h3 { font-size: var(--fs-h3); }
.ds p  { margin: 0 0 var(--sp-3); }
.ds a  { color: var(--accent); text-decoration: none; }
.ds a:hover { text-decoration: underline; }
.ds code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.85em;
  background: var(--c-surface-2);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--c-text);
}

/* ---------- TEINTE D'UN RÉSEAU SOCIAL (contrat --net) ----------
   Un composant qui doit porter la couleur d'un réseau lit UNIQUEMENT la
   variable --net (jamais un token --c-social-* en dur) : voir .pill--net et
   .stat-card--net. Ces classes ne font que poser la teinte, elles ne stylent
   rien — on les combine avec le composant. Ajouter un réseau = une ligne ici.
   Exemple : <div class="stat-card stat-card--net net--instagram"> */
.net--instagram { --net: var(--c-social-instagram); }
.net--facebook  { --net: var(--c-social-facebook); }
.net--x         { --net: var(--c-social-x); }
.net--linkedin  { --net: var(--c-social-linkedin); }