/* FOOTPASS® · Design tokens (source de vérité)
   Couleurs, type, espacement, rayons. Dark premium par défaut, clair via .hm.light.
   Toute nouvelle brique (vue club, écrans autorisations) consomme ces variables. */

:root {
  /* Fonds & surfaces */
  --fp-bg: #0B0B0D;
  --fp-surface: #101013;      /* carte, liste */
  --fp-surface-2: #141417;    /* champ, chip, onglet */
  --fp-surface-3: #1B1B1F;    /* segment, élévation max */
  --fp-active: #141418;       /* état pressé des surfaces */

  /* Bordures */
  --fp-border: rgba(255, 255, 255, 0.07);
  --fp-border-strong: rgba(255, 255, 255, 0.09);
  --fp-hairline: rgba(255, 255, 255, 0.06);

  /* Texte */
  --fp-text: #FAFAFA;
  --fp-text-2: #C7C7CF;
  --fp-text-3: #8E8E96;
  --fp-text-4: #71717A;

  /* Accent & états (le vert = actions clés + vérification, rien d'autre) */
  --acc: #00A37E;
  --acc-bright: #00C49A;
  --fp-warn: #E2B248;
  --fp-danger: #F26D6D;

  /* Échelle type (Inter) : titre 19/800 · sous-titre 13/650 · corps 12.5/400 · label 11/650 · caption 10/600 maj */
  --fp-font: 'Inter', sans-serif;

  /* Espacement base 4 : 4 / 8 / 12 / 16 / 20 / 24 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;

  /* Rayons : 3 niveaux */
  --r-s: 8px;   /* chips internes */
  --r-m: 13px;  /* champs, boutons */
  --r-l: 16px;  /* cartes, feuilles */
}

.hm.light {
  --fp-bg: #F4F4F2;
  --fp-surface: #FFFFFF;
  --fp-surface-2: #FFFFFF;
  --fp-surface-3: #EDEDEB;
  --fp-active: #F7F7F5;
  --fp-border: rgba(15, 15, 16, 0.08);
  --fp-border-strong: rgba(15, 15, 16, 0.10);
  --fp-hairline: rgba(15, 15, 16, 0.07);
  --fp-text: #0F0F10;
  --fp-text-2: #45454C;
  --fp-text-3: #6B6B73;
  --fp-text-4: #8A8A93;
  --fp-warn: #A87B1F;
}