/* =========================================================
   SA CORP – DESIGN TOKENS
   Centralisation complète des couleurs
   ========================================================= */

:root {

  /* =====================================================
     BRAND — IDENTITÉ SA CORP
     ===================================================== */

  --brand-blue: #476AFF;          /* Couleur principale SA Corp */
  --brand-blue-light: #6B86FF;    /* Bleu clair (sur fond sombre) */
  --brand-black: #13100D;         /* Noir principal SA Corp */
  --brand-purple: #A07CFF;       /* Couleur secondaire SA Corp */


  /* =====================================================
     BACKGROUNDS / SURFACES
     ===================================================== */

  --bg-white: #ffffff;
  --bg-soft: #fafafa;
  --bg-muted: #f5f5f5;
  --bg-navy: #0f172a;             /* Fond sombre hero / sections */


  /* =====================================================
     TEXT COLORS
     ===================================================== */

  --text-primary: #13100D;        /* Texte principal */
  --text-strong: #333;            /* Titres secondaires */
  --text-muted: #666;             /* Texte secondaire */
  --text-subtle: #999;            /* Texte tertiaire / icônes */


  /* =====================================================
     BORDERS
     ===================================================== */

  --border-light: #e8e8e8;        /* Border universelle */
  --border-medium: #d0d0d0;       /* Border hover / séparation */


  /* =====================================================
     CHIPS / UI BACKGROUNDS
     ===================================================== */

  --blue-extra-light: #f0f3ff;    /* Fond chips bleu clair */


  /* =====================================================
     FUNCTIONAL COLORS (NON BRAND)
     ===================================================== */

  --blue-dark: #3657e0;           /* Gradient endpoint principal */
  --blue-alt: #3f71f4;            /* Variante liens */
  --blue-accent-light: #4F8CFF;   /* Accent tracking */

  --accent-green-dark: #5FD97E;
  --accent-orange-dark: #FF9A2E;
  --accent-cyan-dark: #4BC0E8;



     
  /* ════════════════════════════════════════
     OMBRES (SHADOWS
     ════════════════════════════════════════ */

  --blue-overlay: rgba(71, 105, 255, 0.34);  
  
  /* BLANCS TRANSPARENTS */
  --white-04: rgba(255, 255, 255, 0.04); /* Usage: Backgrounds ultra-légers pour CTA ghost, dashboard frames, timeline labels, message lists */
  --white-10: rgba(255, 255, 255, 0.10); /* Usage: Backgrounds légers + borders pour chips, steps, messages sections, tracking notifs */
  --white-22: rgba(255, 255, 255, 0.22); /* Usage: Borders accentuées sur hover states et chips */
  --white-60: rgba(255, 255, 255, 0.60); /* Usage: Borders glassmorphism pour strategy hub items  */
  --white-70: rgba(255, 255, 255, 0.70); /* Usage: Backgrounds & borders glassmorphism strategy hub + color texte muted tracking notifs  */
  --white-95: rgba(255, 255, 255, 0.95); /* Usage: Background quasi-opaque pour chip hover */

  /* BLEUS TRANSPARENTS */
  --blue-10: rgba(71, 106, 255, 0.10);  /* Usage: Box-shadow légère au survol des cartes promesse */
  --blue-25: rgba(71, 106, 255, 0.25); /* Usage: Box-shadows standards pour hover states, élévation de composants (chips, CTA, cards, borders)*/

  /* Noir */
  --black-05: rgba(0, 0, 0, 0.05);    /* Usage: Ultra light shadows sur cards */
  --black-20: rgba(0, 0, 0, 0.20);    /* Usage: Box shadows standards pour depth/élévation */





  /* ════════════════════════════════════════
     GRADIENTS PRÉDÉFINIS
     Variables de commodité pour dégradés
     ════════════════════════════════════════ */

  --gradient-primary: linear-gradient(135deg, #476AFF 0%, #3657e0 100%); /* GRADIENT PRINCIPAL bleu SA Corp Usage: CTA buttons, hero, primary actions*/

   --gradient-bluepurple: linear-gradient(135deg, #476AFF 0%, #A07CFF 100%); /* GRADIENT PRINCIPAL bleu SA Corp Usage: CTA buttons, hero, primary actions*/
 
  --gradient-green: linear-gradient(135deg, #7CFF9B 0%, #5FD97E 100%); /* Gradient vert données Usage: Data Management buttons*/

  --gradient-blue-alt: linear-gradient(135deg, #4F8CFF 0%, #3B6FDB 100%); /* Alternative blue gradient Usage: Alternative actions */

  --gradient-orange: linear-gradient(135deg, #FFB347 0%, #FF9A2E 100%); /* Warm orange gradient, Usage: Warm accents*/

  --gradient-cyan: linear-gradient(135deg, #63D6FF 0%, #4BC0E8 100%); /* Cool cyan gradient, Usage: Cool accents */

  --gradient-subtle: linear-gradient(135deg, #fafafc 0%, #f3f8ff 100%); /* Light gradient blanc vers bleu, Usage: Subtle section backgrounds, Fichiers: expertise.css */

  --gradient-white: linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%); /* Subtle blanc gradient, Usage: Card backgrounds */

  --gradient-strategy: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(71, 106, 255, 0.10)); /* Strategy marketing gradient, Usage: Section backgrounds, Fichiers: expertise.css, strategie-marketing.css */
}