/* ==========================================================================
   VARIABLES & DESIGN TOKENS - HOMME BLEU
   Exact Figma LP4 Tokens (Frame 579:712)
   ========================================================================== */

:root {
  /* Couleurs d'arrière-plan */
  --bg-page: #090909;
  --bg-dark-card: #161616;
  --bg-light-card: #f2f2f2;
  --bg-white-card: #ffffff;
  --bg-profil-card: #f6f6f6;

  /* Couleurs de texte */
  --text-white: #ffffff;
  --text-offwhite: #f2f2f2;
  --text-gray: #a5a5a5;
  --text-dark: #1f1f1f;
  --text-dark-muted: #5e5e5e;
  --text-dim: #818181;

  /* Accents Figma */
  --accent-cyan: #3cd2ff;
  --accent-arrow: #1fa8f5;
  --accent-red: #fe5555;

  /* Bordures */
  --border-dark: #333333;
  --border-pill: #595959;
  --border-light: #d6d6d6;
  --border-cyan: #3cd2ff;

  /* Boutons */
  --btn-primary-bg: #f2f2f2;
  --btn-primary-text: #202020;
  --btn-secondary-bg: #161616;
  --btn-secondary-border: #595959;
  --btn-secondary-text: #f2f2f2;
  --btn-dark-solid-bg: #090909;
  --btn-dark-solid-text: #f2f2f2;

  /* Typographie */
  --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Tailles */
  --header-height: 88px;
  --content-max-width: 1200px;
  --container-max-width: 1440px;

  /* Rayons (Radius) */
  --radius-btn: 12px;
  --radius-card: 24px;
  --radius-card-large: 32px;
  --radius-pill: 30px;
  --radius-tile: 12px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}