/* ==========================================================================
   tokens.css — Design system FitPartners (source de vérité)
   --------------------------------------------------------------------------
   Variables CSS partagées par tout le prototype. Factorisées au fur et à
   mesure des besoins des écrans (pas d'extraction exhaustive de Figma).
   Convention : couleurs → typographie → rayons → ombres → focus → durées.
   ========================================================================== */

:root {
  /* --- Couleurs de marque -------------------------------------------------- */
  --blue-dark: #0f3d8c;          /* bleu principal (brand/blue Figma) */
  --blue-dark-hover: #0a2d6e;
  --blue-dark-active: #082460;
  --blue-mid: #1a56c4;
  --blue-deep: #0a2b66;          /* brand/blue-dark Figma (texte saisi input) */

  --teal: #28b4b4;               /* barre de progression */
  --teal-hover: #1a9999;
  --teal-active: #147a7a;
  --teal-light: #33c9dc;
  --teal-accessible: #0a6e7d;    /* astérisques « obligatoire » (contraste AA) */
  --teal-eyebrow: #1a8a8a;       /* eyebrow « CRÉATION DE COMPTE » (Figma) */

  /* --- Surfaces & neutres -------------------------------------------------- */
  --white: #ffffff;
  --off-white: #f2f7fd;
  --surface-alt: #eef1f7;        /* fond de page inscription (surface/bg-alt Figma) */
  --surface-dark: #050d1a;
  --dark: #0a1628;

  /* --- Texte --------------------------------------------------------------- */
  --text: #0a1628;
  --text-primary: #0d1b3e;       /* text/primary Figma (titres / labels radio) */
  --text-muted: #3d5270;         /* labels de champ */
  --text-subtle: #5a6e87;        /* icône mail */
  --text-soft: #4a5568;          /* paragraphes descriptifs (Figma) */
  --text-tertiary: #8a94a6;      /* textes d'aide, icône œil (text/tertiary Figma) */
  --text-inverse: #ffffff;

  /* --- Bordures ------------------------------------------------------------ */
  --border-default: #dde2ee;
  --border-input: #d8e0ec;       /* bordure des inputs (Figma) */

  /* --- États sémantiques --------------------------------------------------- */
  --success: #00734a;
  --error: #b91c1c;
  --warning: #92400e;
  --red: #e53e3e;                /* badge de notification (compteur cloche) */
  --vermillon: #b91c1c;          /* « X nouveaux » (rail droit) */

  /* --- Maquette « cards » (tokens additionnels alignés sur la maquette) -----
     Certains doublent des tokens existants (mêmes valeurs) mais reprennent le
     vocabulaire de la maquette pour des composants pixel-perfect. */
  --blue: #0f3d8c;               /* brand/blue (= --blue-dark) */
  --blue-light: #e8f0fa;         /* bordure discussion card */
  --navy: #0a2b66;               /* brand/blue-dark (boîte logo) */
  --green: #0c6b4a;              /* Fit Score — texte du badge */
  --green-light: #c8e9de;        /* Fit Score — fond du badge */
  --green-tint: rgba(12, 107, 74, .16); /* fond pastille des tags secteur (texte = --green) */
  --amber: #f59e0b;              /* étoile de notation */
  --lime: #d6ff00;               /* accent logo (placeholder géométrique) */
  --ink: #0d1b3e;                /* texte primaire (= --text-primary) */
  --text-secondary: #4a5568;     /* texte secondaire (= --text-soft) */
  --surface-bg: #f5f7fa;         /* fond des boutons-icônes */
  --surface-bg-alt: #eef1f7;     /* fond du tag (= --surface-alt) */

  /* --- Colonne « Mes communautés » (Figma 890:22830) ----------------------- */
  --teal-pale: #c3efef;          /* fond des badges compteur du menu (brief : « --teal-light ») */
  --teal-dark: #1a8a8a;          /* item de menu actif (fond plein) */
  --blue-medium: #3261b2;        /* fond du badge « ADMIN » */
  --text-on-dark: #ccd3df;       /* sous-titre sur fond bleu/navy (carte Accueil) */

  /* --- Dégradés ------------------------------------------------------------ */
  --gradient-primary: linear-gradient(135deg, #0f3d8c 0%, #1a56c4 50%, #187070 100%);

  /* --- Typographie --------------------------------------------------------- */
  --font-display: 'Epilogue', 'DM Sans', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* --- Rayons -------------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;             /* inputs */
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 50px;

  /* --- Ombres -------------------------------------------------------------- */
  --shadow-sm: 0 2px 8px rgba(15, 61, 140, .08);
  --shadow-md: 0 8px 24px rgba(15, 61, 140, .12);
  --shadow-lg: 0 20px 50px rgba(15, 61, 140, .15);
  /* Header « mode produit » : ombre qui fonce (pas de halo clair). */
  --shadow-topbar: 0 2px 6px rgba(13, 27, 62, .10), 0 8px 24px rgba(13, 27, 62, .10);

  /* --- Anneaux de focus (accessibilité) ------------------------------------ */
  /* Anneaux pleins : pour les boutons (cibles autonomes). */
  --focus-ring-blue: 0 0 0 3px rgba(15, 61, 140, .45);
  --focus-ring-teal: 0 0 0 3px rgba(40, 180, 180, .5);
  /* Halos doux « Apple-grade » : pour les champs et radios (discret). */
  --focus-halo-blue: 0 0 0 4px rgba(15, 61, 140, .12);
  --focus-halo-teal: 0 0 0 4px rgba(40, 180, 180, .14);
  --focus-halo-error: 0 0 0 4px rgba(185, 28, 28, .12);

  /* --- Transitions --------------------------------------------------------- */
  --t-fast: .15s ease;
  --t-normal: .25s ease;
  --t-slow: .4s ease;

  /* --- Dimensions récurrentes (déduites de Figma) -------------------------- */
  --input-height: 48px;
  --tap-target: 48px;            /* cible tactile minimale (Material/HIG) */
  --content-max: 448px;          /* largeur max du contenu formulaire desktop */
  --icon-size: 20px;             /* taille standard des icônes Lucide dans les champs */
  --header-h: 80px;              /* hauteur de l'en-tête de navigation (Figma nav bar) */
  --footer-h: 56px;              /* hauteur du pied de page (liens discrets) */
}