:root {
    --font-family:                          'DM Sans', sans-serif;
    --font-family-rtl:                      'DM Sans', sans-serif;
    --font-family-global:                   'DM Sans', sans-serif;
    --font-family-heading:                  'Fraunces', serif;
    /* AfriVision palette, named as in the Figma materials frame (9231:2846) */
    --espresso:                              #241712;
    --ivory:                                 #F6EFE2;
    --gold:                                  #C39A3F;
    --terracotta:                            #B4502E;
    --terracotta-dark:                       #A34221;
    --sand:                                  #E3D4BC;
    --umber:                                 #7A4A2F;
    /* Legacy color-named slots: shared platform CSS reads them directly
       (--indigo as the main text color, --cyan/--blue in grid, select2 and plan modals),
       so they point at the AfriVision colors that fill that role. */
    --blue:                                  var(--terracotta-dark);
    --blue-hover:                            var(--terracotta-dark);
    --indigo:                                var(--espresso);
    --purple:                                var(--umber);
    --pink:                                  #eef5f9;
    --red:                                   #F23526;
    --red-hover:                             #f16e6f;
    --orange:                                #ff9000;
    --yellow:                                #F9CC46;
    --yellow-hover:                          #E9B92C;
    --green:                                 #6ED26C;
    --teal:                                  #20c997;
    --cyan:                                  var(--terracotta);
    --white:                                 #ffffff;
    --black:                                 #000000;
    --light:                                 #F7F7F7;
    --light-hover:                           #E5E5E5;
    --gray-100:                              #ECECF5;
    --gray-200:                              #e5e8ef;
    --gray-300:                              #d2d6de;
    --gray-400:                              #aeb5c1;
    --gray-500:                              #878f9f;
    --gray-600:                              #646c7b;
    --gray-700:                              #4e5460;
    --gray-800:                              #2a2d32;
    --gray-900:                              #1b1c20;
    --black-navy-txt:                        var(--espresso);
    --gray:                                  var(--gray-600);
    --gray-dark:                             var(--gray-800);
    --primary:                               var(--terracotta);
    --primary-hover:                         var(--terracotta-dark);
    --secondary:                             var(--espresso);
    --tertiary:                              var(--white);
    --success:                               var(--green);
    --info:                                  var(--terracotta);
    --warning:                               var(--orange);
    --danger:                                var(--red);
    --dark:                                  var(--espresso);
    --dark-hover:                            #000000;
    --breakpoint-xs:                         0;
    --breakpoint-sm:                         576px;
    --breakpoint-md:                         768px;
    --breakpoint-lg:                         992px;
    --breakpoint-xl:                         1200px;
    --font-family-sans-serif:                var(--font-family);
    --font-family-monospace:                 SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --body-background:                       var(--ivory);
    --background-by-default:                 var(--ivory);
    --scrollbar-background-color:            var(--white);
    --scrollbar-color:                       var(--gray-600);
    --text-by-default:                       var(--espresso);
    --leftbar-backgroud:                     var(--espresso);
    --leftbar-backgroud-hover:               rgba(246, 239, 226, 0.2);
    --leftbar-text-color:                    var(--ivory);
    --leftbar-text-color-hover:              var(--ivory);
    --header-background:                     var(--white);
    --header-logo-background:                var(--white);
    --header-background-hover:               var(--gray-200);
    --header-text-color:                     var(--gray-600);
    --header-text-color-hover:               var(--white);
    --header-dropdown-menu-background:       var(--white);
    --header-dropdown-menu-background-hover: var(--gray-100);
    --header-dropdown-menu-text-color:       var(--gray-600);
    --header-dropdown-menu-text-color-hover: var(--primary);
    --btn-primary-background:                var(--primary);
    --btn-primary-background-hover:          var(--primary-hover);
    --header-grid-background:                var(--espresso);
    --header-grid-text-color:                var(--ivory);
    --grid-border-color:                     var(--gray-100);
    --grid-background-color:                 var(--white);
    --tooltip-arrow-bg:                      var(--white);
    --tooltip-bg:                            var(--white);
    --grid-background-color-hover:           var(--ivory);
    --btn-paypal:                            #009cde;
    --btn-paynl:                             #cc0066;
    --btn-bancontact:                        var(--white);
    --navigation-text-color:                 var(--gray-600);
    --btn-facebook-bg:                       #3b5998;
    --btn-google-border:                     #4285f4;
    --btn-linkedin-bg:                       #0e76a8;
    --invited:                               #009cde;
    --lifetime-color:                        var(--terracotta);
    --gofi-color:                            #47B5FF;
    --url-color:                             var(--espresso);
    --url-color-hover:                       var(--terracotta);
    --beta-badge-color:                      var(--primary);
    --error-text-color:                      var(--danger);
    --leftbar-active-item-left-border:       transparent;
}