:root {
  /* Brand */
  --brand-primary:       #FB762C;
  --brand-primary-hover: #E86520;
  --brand-primary-light: #FEF0E6;
  --brand-primary-muted: #FDCFAE;
  --brand-dark:          #1E0A02;
  --brand-dark-hover:    #2E1408;
  --brand-brown:         #452103;
  --brand-cream:         #FDF0D5;

  /* Grays (légèrement chauds) */
  --gray-50:  #FAFAF8;
  --gray-100: #F3F2EF;
  --gray-200: #E8E6E1;
  --gray-300: #D2D0C9;
  --gray-400: #9E9B94;
  --gray-500: #6E6C68;
  --gray-600: #4A4845;
  --gray-700: #2F2D2A;
  --gray-900: #1A1916;

  /* Sémantique */
  --success:      #16A34A;
  --success-bg:   #DCFCE7;
  --success-text: #14532D;
  --warning:      #B45309;
  --warning-bg:   #FEF3C7;
  --warning-text: #78350F;
  --danger:       #DC2626;
  --danger-bg:    #FEE2E2;
  --danger-text:  #7F1D1D;
  --info:         #2563EB;
  --info-bg:      #DBEAFE;
  --info-text:    #1E3A8A;
  --purple:       #7C3AED;
  --purple-bg:    #EDE9FE;
  --purple-text:  #4C1D95;

  /* Layout */
  --sidebar-width:     220px;
  --bottom-nav-height: 64px;

  /* Border radius */
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(30,10,2,.04), 0 1px 6px rgba(30,10,2,.04);
  --shadow-md: 0 2px 8px rgba(30,10,2,.06), 0 1px 3px rgba(30,10,2,.05);

  /* Transitions */
  --transition: 160ms ease;

  /* Typography */
  --font: 'Plus Jakarta Sans', sans-serif;

  /* Breakpoints (usage : @media (max-width: var(--bp-md)) — non supporté nativement)
    Utiliser directement les valeurs dans les media queries */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;

}