/* ============================================
   AURA — DESIGN TOKENS (v2, calqués sur le site réel)
   À importer en tout premier, avant le CSS de chaque page :
   <link rel="stylesheet" href="css/design-tokens.css">
   ============================================ */

:root{
  /* Fond */
  --bg:            #F6F3ED;
  --card:          #FFFFFF;

  /* Accent = noir plein (style Hinge) */
  --pink:          #17161A;
  --pink-hover:    #322F35;
  --pink-glow-5:   rgba(23,22,26,0.05);
  --pink-glow-10:  rgba(23,22,26,0.08);
  --pink-glow-20:  rgba(23,22,26,0.12);
  --pink-border:   rgba(23,22,26,0.18);
  --pink-border-strong: rgba(23,22,26,0.25);
  --pink-border-x-strong: rgba(23,22,26,0.35);

  /* Couleur de texte à utiliser SUR un fond --pink (noir) */
  --on-accent:     #FFFFFF;

  /* Vert (succès / économies) — inchangé, indépendant du thème */
  --green:         #22c55e;
  --green-glow:    #22c55e18;
  --green-border:  #22c55e44;

  /* Bordures noires translucides */
  --border-08:     rgba(23,22,26,0.05);
  --border-10:     rgba(23,22,26,0.08);
  --border-15:     rgba(23,22,26,0.12);
  --border-20:     rgba(23,22,26,0.16);
  --border-40:     rgba(23,22,26,0.32);

  /* Texte */
  --text:          #17161A;
  --text-soft:     #322F35;
  --muted:         #6E6C68;
  --muted-2:       #4A4844;
  --muted-dim:     #8A8782;
  --muted-dim-2:   #9A9894;
  --muted-faint:   #A8A59D;
  --muted-faint-2: #B8B5AD;

  /* Boutons sombres neutres */
  --dark-btn:       #17161A;
  --dark-btn-hover: #322F35;

  /* Surfaces additionnelles (navbar, overlays tuto) */
  --bg-darker:      #EFEBE2;
  --overlay:        rgba(23, 22, 26, 0.45);

  /* Typo */
  --font-display:  'Syne', sans-serif;
  --font-body:     'Inter', sans-serif;

  /* Rayons communs déjà utilisés sur le site */
  --radius-s:  10px;
  --radius-m:  16px;
  --radius-l:  20px;
  --radius-pill: 999px;
}

/* Classes utilitaires prêtes à l'emploi, reprises depuis tarifs.html */
body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}
.logo{
  font-family: var(--font-display);
  color: var(--pink);
}
.btn-rose{
  background: var(--pink);
  color: #fff;
}
.btn-rose:hover{ background: var(--pink-hover); }

.btn-outline{
  background: transparent;
  color: var(--muted-dim);
  border: 0.5px solid var(--border-20);
}
.btn-outline:hover{
  border-color: var(--border-40);
  color: var(--text);
}