/* ==============================================================
   BOL Growth Engine — Design Tokens
   Palette calibrée sur le logo officiel Best Online Learning :
   bleu marine profond, menthe/teal pour l'icône, crème pour le
   texte — une identité élégante et "beauty of learning", pas une
   identité SaaS générique.
   ============================================================== */

:root {
  /* --- Couleurs de marque (calibrées sur le logo) --- */
  --color-ink:        #16283F;   /* bleu marine le plus profond */
  --color-ink-soft:   #3A5470;
  --color-primary:    #2E4C70;   /* bleu marine du logo — actions principales */
  --color-primary-dk: #16283F;
  --color-primary-lt: #EAF2F0;   /* teinte menthe très pâle (fonds, focus) */

  /* --- Accent "growth" (chaleur du lead) --- */
  --color-cold:   #6FAFA0;   /* menthe/teal — repris de l'icône du logo */
  --color-warm:   #D9A85C;   /* or chaud — élégance, "beauty of learning" */
  --color-hot:    #C1573C;   /* terracotta profond */

  /* --- Neutres (blanc cassé, pas de blanc pur — cohérent avec le crème du logo) --- */
  --color-bg:          #F7F6F2;
  --color-surface:     #FFFFFF;
  --color-border:      #E3E1D8;
  --color-border-soft: #EDEBE3;
  --color-text:        #1F2A3A;
  --color-text-muted:  #5C6B7A;
  --color-text-faint:  #94A0AC;

  /* --- États --- */
  --color-success: #4C8C74;
  --color-danger:  #B7472A;
  --color-danger-bg: #FBEDE8;
  --color-success-bg: #EBF4EF;

  /* --- Typographie ---
     Display : Playfair Display — le même esprit serif élégant que
     le wordmark du logo. Utilisé avec retenue (titres, wordmark).
     Body : Inter — lisible, neutre, pour le contenu du CRM.
     Mono : IBM Plex Mono — données, scores, identifiants. */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* --- Échelle typographique --- */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;

  /* --- Espacements --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* --- Rayons & ombres --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(22, 40, 63, 0.06);
  --shadow-md: 0 4px 16px rgba(22, 40, 63, 0.08);
  --shadow-lg: 0 12px 32px rgba(22, 40, 63, 0.16);

  /* --- Transitions --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 160ms;
}