/* ============================================================
   RPN MASTER LAYOUT SYSTEM™ — TOKENS v1.0
   Source unique de vérité visuelle RPN Academy.
   Ne jamais coder une couleur/taille en dur ailleurs :
   toujours référencer ces variables.
   ============================================================ */

:root {
  /* --- Couleurs de marque (contrat stable) --- */
  --rpn-navy:        #0a1628;   /* fond coque (topbar, sidebar) */
  --rpn-navy-2:      #101f36;   /* navy élevé (hover, panneaux) */
  --rpn-navy-3:      #16283f;   /* navy bordures internes */
  --rpn-blue:        #2196F3;   /* primaire */
  --rpn-blue-deep:   #1565c0;
  --rpn-blue-soft:   #e3f0fd;   /* fonds bleus clairs (cards) */
  --rpn-green:       #43a047;   /* accent / succès / éco */
  --rpn-green-soft:  #e6f4e7;
  --rpn-white:       #ffffff;

  /* --- Surface de contenu (canvas clair, look plateforme) --- */
  --rpn-canvas:      #f4f7fb;
  --rpn-card:        #ffffff;
  --rpn-border:      #dde6f0;
  --rpn-ink:         #12233c;   /* texte principal sur clair */
  --rpn-ink-2:       #4a5d78;   /* texte secondaire */
  --rpn-ink-3:       #7d8ea6;   /* texte discret / meta */

  /* --- Texte sur navy --- */
  --rpn-on-navy:     #e8eef7;
  --rpn-on-navy-2:   #9fb0c8;

  /* --- Statuts / badges communautés --- */
  --c-free:       #78909c;
  --c-green:      #43a047;
  --c-pro:        #1565c0;
  --c-founding:   #d4a017;   /* or */
  --c-prosp:      #b0713a;   /* bronze/cuivre — PRO Strategic Partner */
  --c-business:   #283593;   /* bleu royal profond */
  --c-enterprise: #4a148c;   /* pourpre impérial */
  --c-beta:       #8e24aa;
  --c-soon:       #90a4ae;
  --c-active:     #2e7d32;
  --c-warn:       #ef6c00;
  --c-error:      #c62828;

  /* --- Typographie --- */
  --font-display: 'Rajdhani', sans-serif;   /* titres, nav, chiffres */
  --font-body:    'Exo 2', sans-serif;      /* texte courant */
  --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-md: 1rem;
  --fs-lg: 1.125rem; --fs-xl: 1.375rem;
  --fs-h3: 1.5rem; --fs-h2: 2rem; --fs-h1: 2.75rem;

  /* --- Layout --- */
  --topbar-h: 64px;
  --sidebar-w: 248px;
  --sidebar-w-min: 72px;      /* mode replié (prévu, activable) */
  --content-max: 1240px;
  --radius: 12px;
  --radius-sm: 8px;
  --gap: 20px;
  --shadow: 0 2px 10px rgba(10,22,40,.07);
  --shadow-lg: 0 8px 28px rgba(10,22,40,.14);

  /* --- Transitions --- */
  --t-fast: .15s ease;
  --t-med: .25s ease;
}

/* Respect des préférences utilisateur */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}