/* SimplyPro — tokens typo/couleurs
   À charger en premier : <link rel="stylesheet" href="{% static 'app/css/tokens.css' %}"> */

:root{
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Couleurs texte */
  --c-title:      #183153;  /* titres de page */
  --c-text:       #344563;  /* texte principal / sidebar */
  --c-muted:      #718096;  /* texte secondaire */
  --c-platform:   #263B57;  /* nom plateforme */
  --c-btn:        #526581;  /* libellés de boutons */
  --c-accent:     #5B5CE2;  /* item actif, onglet actif, action principale */
  --c-on-accent:  #FFFFFF;

  /* Bordures / fonds */
  --c-border:     #E2E8F0;
  --c-border-str: #CBD5E1;
  --c-surface:    #FFFFFF;
  --c-bg:         #F2F4F8;
  --c-hover:      #F8FAFC;

  /* États */
  --c-err-bg:#FEF2F2; --c-err-bd:#FECACA; --c-err-tx:#B91C1C;
  --c-ok-bg:#F0FDF4;  --c-ok-bd:#BBF7D0;  --c-ok-tx:#15803D;

  /* Échelle typo : taille / graisse */
  --t-page:      32px; --w-page:      400;
  --t-platform:  16px; --w-platform:  500;
  --t-body:      14px; --w-body:      400;
  --t-ui:        14px; --w-ui:        500;  /* boutons, onglets, item actif */
  --t-small:     13px; --w-small:     400;
  --t-badge:     12px; --w-badge:     600;
}

/* Classes utilitaires */
.t-page{font:var(--w-page) var(--t-page)/1.25 var(--font);color:var(--c-title);letter-spacing:-.02em}
.t-platform{font:var(--w-platform) var(--t-platform)/1.3 var(--font);color:var(--c-platform)}
.t-body{font:var(--w-body) var(--t-body)/1.5 var(--font);color:var(--c-text)}
.t-muted{font:var(--w-small) var(--t-small)/1.5 var(--font);color:var(--c-muted)}
.t-ui{font:var(--w-ui) var(--t-ui)/1.2 var(--font);color:var(--c-btn)}
.t-active{font:var(--w-ui) var(--t-ui)/1.2 var(--font);color:var(--c-accent)}
.t-badge{font:var(--w-badge) var(--t-badge)/1.2 var(--font);color:#fff}