/* ============================================================
   Ruach Hub — assets/css/tokens.css
   Variables de design (couleurs, type, espacement, rayons,
   ombres) issues du design system Ruach Hub.
   ------------------------------------------------------------
   Les polices sont chargées par WordPress (voir inc/enqueue.php),
   PAS via @import ici — d'où l'absence de la règle @import.
   Ces variables sont synchronisées avec les Global Colors /
   Global Fonts d'Elementor (voir README, section réglages).
   ============================================================ */

:root {
  /* ---------- FAMILLES ---------- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ---------- NEUTRES (encre + papier) ---------- */
  --paper:        #FBFBFA;
  --surface:      #FFFFFF;
  --surface-sunk: #F2F2F0;
  --ink:          #131417;
  --ink-soft:     #2B2D33;

  --fg-1: #131417;
  --fg-2: #565A62;
  --fg-3: #8B9099;
  --fg-on-dark:    #F4F4F2;
  --fg-on-dark-2:  #A7ABB2;

  --line:        #E7E7E3;
  --line-strong: #D4D4CF;

  /* ---------- MARQUE — Ruach teal ---------- */
  --ruach-50:  #E5F4F1;
  --ruach-100: #C2E7E0;
  --ruach-300: #5CC3B3;
  --ruach-500: #0E9E8E;  /* PRIMAIRE */
  --ruach-600: #0B8275;  /* hover */
  --ruach-700: #096A60;  /* press / texte sur clair */
  --ruach-900: #073F39;

  --primary:        var(--ruach-500);
  --primary-hover:  var(--ruach-600);
  --primary-press:  var(--ruach-700);
  --primary-tint:   var(--ruach-50);
  --on-primary:     #FFFFFF;

  /* ---------- ACCENTS PAR VERTICALE ---------- */
  --it:     #3B5BDB;  --it-tint:     #E8ECFB;
  --ia:     #7C4DD6;  --ia-tint:     #EDE6FA;
  --apps:   #E08A2B;  --apps-tint:   #FBEFDD;
  --sport:  #E5484D;  --sport-tint:  #FBE5E6;

  /* ---------- SÉMANTIQUE ---------- */
  --success: #2F9E44;  --success-tint: #E6F4E9;
  --warning: #E08A2B;  --warning-tint: #FBEFDD;
  --danger:  #E5484D;  --danger-tint:  #FBE5E6;
  --info:    #3B5BDB;  --info-tint:    #E8ECFB;

  --focus-ring: 0 0 0 3px rgba(14,158,142,0.32);

  /* ---------- RAYONS ---------- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- ÉLÉVATION ---------- */
  --shadow-xs: 0 1px 2px rgba(19,20,23,0.05);
  --shadow-sm: 0 1px 3px rgba(19,20,23,0.07), 0 1px 2px rgba(19,20,23,0.04);
  --shadow-md: 0 6px 18px -6px rgba(19,20,23,0.12), 0 2px 6px -2px rgba(19,20,23,0.06);
  --shadow-lg: 0 18px 44px -16px rgba(19,20,23,0.20), 0 6px 14px -8px rgba(19,20,23,0.10);
  --shadow-focus: var(--focus-ring);

  /* ---------- ESPACEMENT (base 4px) ---------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 24px;  --space-6: 32px;
  --space-7: 48px;  --space-8: 64px;  --space-9: 96px;  --space-10: 128px;

  /* Largeur de contenu */
  --maxw: 1200px;

  /* ---------- TYPE — ÉCHELLE ---------- */
  --text-display: 4.5rem;
  --text-h1:      3rem;
  --text-h2:      2.125rem;
  --text-h3:      1.5rem;
  --text-h4:      1.25rem;
  --text-lg:      1.1875rem;
  --text-base:    1rem;
  --text-sm:      0.875rem;
  --text-xs:      0.78125rem;
}