/* BANANA LOVER · tokens.css : :root complet + resets (copié fidèlement de la maquette V12) */
/* ==========================================================
   BANANA LOVER · TOKENS (charte graphique Clémence Arquey)
   ITC Avant Garde Gothic Pro → Jost · Proxima Nova → Mulish
   ========================================================== */
:root{
  --bl-teal:#1e8280; --bl-pink:#d7165b; --bl-yellow:#fbbb45;
  --bl-noir:#05100f; --bl-blanc:#fbf8f9; --bl-bordeaux:#922f58;
  --bl-teal-2:#2eb3ba; --bl-teal-3:#98d1c9; --bl-teal-4:#46baba;
  --bl-yellow-2:#f6a313; --bl-yellow-3:#fff076; --bl-pink-2:#f6b5c1;

  --surface-page:var(--bl-noir);
  --surface-raised:#0c1918;
  --surface-overlay:#101f1e;
  --surface-light:var(--bl-blanc);

  --text-primary:var(--bl-blanc);
  --text-secondary:rgba(251,248,249,.64);
  --text-faint:rgba(251,248,249,.4);
  --text-on-light:var(--bl-noir);
  --text-on-light-secondary:rgba(5,16,15,.62);

  --border-subtle:rgba(251,248,249,.12);
  --border-strong:rgba(251,248,249,.28);

  --accent:var(--bl-pink); --accent-hover:#ef2570;
  /* Focus = teal (état positif/actif « tu es ici »), distinct du pink qui reste
     réservé aux CTA, à la sélection et aux erreurs. Évite que le focus d'un champ
     soit confondu avec le rouge/rose d'alerte. */
  --focus-ring:rgba(46,179,186,.55);
  --field-focus:var(--bl-teal-2);
  --field-focus-ring:rgba(46,179,186,.4);
  /* Sélection / état actif = teal aussi (une option choisie n'est pas une alerte).
     Le pink ne sert plus qu'aux CTA et aux erreurs. */
  --selected:var(--bl-teal-2);
  --selected-tint:rgba(46,179,186,.12);

  --font-display:'Jost',sans-serif;
  --font-body:'Mulish',sans-serif;

  --container:1320px; --pad:32px;
  --radius-s:2px; --radius-m:4px; --radius-l:8px; --radius-pill:999px;

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:200ms; --dur-base:320ms; --dur-slow:640ms;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--surface-page);color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--bl-pink);color:var(--bl-blanc)}