/* ============================================
   tokens.css — Design Tokens CMSR Compassion
   ============================================ */

:root {

  /* --- COULEURS PRIMAIRES (Bleu médical) --- */
  --color-primary-900: #0D2B4E;
  --color-primary-800: #113A6A;
  --color-primary-700: #154D8C;
  --color-primary-600: #1A5FA8;
  --color-primary-500: #2275C8;
  --color-primary-400: #5298D8;
  --color-primary-300: #8FBDE9;
  --color-primary-200: #C2DAF4;
  --color-primary-100: #E8F2FC;
  --color-primary-50:  #F4F9FE;

  /* --- COULEURS SECONDAIRES (Mauve doux) --- */
  --color-secondary-900: #3B1A5C;
  --color-secondary-700: #6B3A9A;
  --color-secondary-500: #9B6CC8;
  --color-secondary-300: #C9A8E8;
  --color-secondary-100: #F0E9FA;
  --color-secondary-50:  #FAF6FE;

  /* --- ACCENT (Vert sauge) --- */
  --color-accent-700: #2D6A4F;
  --color-accent-500: #3D8B6A;
  --color-accent-300: #8FD0B0;
  --color-accent-100: #E0F5EC;

  /* --- NEUTRES --- */
  --color-neutral-950: #0A0C0F;
  --color-neutral-900: #111318;
  --color-neutral-800: #1E2230;
  --color-neutral-700: #2E3448;
  --color-neutral-600: #4A5168;
  --color-neutral-500: #6B7280;
  --color-neutral-400: #9CA3AF;
  --color-neutral-300: #D1D5DB;
  --color-neutral-200: #E5E7EB;
  --color-neutral-100: #F3F4F6;
  --color-neutral-50:  #FAFAFA;
  --color-white:       #FFFFFF;

  /* --- SÉMANTIQUE --- */
  --color-success: #3D8B6A;
  --color-error:   #DC2626;
  --color-warning: #D97706;

  /* --- TEXTE --- */
  --text-primary:   var(--color-neutral-800);
  --text-secondary: var(--color-neutral-600);
  --text-muted:     var(--color-neutral-500);
  --text-inverse:   var(--color-white);
  --text-brand:     var(--color-primary-600);

  /* --- FONDS --- */
  --bg-page:            var(--color-white);
  --bg-subtle:          var(--color-neutral-50);
  --bg-muted:           var(--color-neutral-100);
  --bg-brand-light:     var(--color-primary-50);
  --bg-brand-soft:      var(--color-primary-100);
  --bg-secondary-light: var(--color-secondary-50);

  /* --- BORDURES --- */
  --border-color:       var(--color-neutral-200);
  --border-color-brand: var(--color-primary-300);
  --border-radius-sm:   6px;
  --border-radius-md:   12px;
  --border-radius-lg:   20px;
  --border-radius-xl:   32px;
  --border-radius-full: 9999px;

  /* --- OMBRES --- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(13, 43, 78, 0.08);
  --shadow-md: 0 4px 20px rgba(13, 43, 78, 0.12);
  --shadow-lg: 0 8px 40px rgba(13, 43, 78, 0.16);
  --shadow-xl: 0 16px 60px rgba(13, 43, 78, 0.20);

  /* --- TRANSITIONS --- */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- ESPACEMENT (base 4px) --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- CONTAINERS --- */
  --container-sm:      640px;
  --container-md:      768px;
  --container-lg:      1024px;
  --container-xl:      1280px;
  --container-2xl:     1440px;
  --container-padding: var(--space-6);

  /* --- SECTIONS --- */
  --section-padding-y:        var(--space-20);
  --section-padding-y-mobile: var(--space-12);
}