:root {
    --font-family:                          'DM Sans', sans-serif;
    --font-family-rtl:                      'DM Sans', sans-serif;
    --font-family-global:                   'DM Sans', sans-serif;
    --font-family-heading:                  'Space Grotesk', sans-serif;
    /* Urban eSIM palette, named as in the Figma materials frame (9361:4944) */
    --asphalt:                               #161A23;
    --route:                                 #0E6E66;
    --route-dark:                            #0B5D56;
    --soft-route:                            #DCEFEC;
    --signal:                                #C6F23A;
    --paper:                                 #F5F4EF;
    --line:                                  #DDDAD1;
    --text-gray:                             #565B68;
    --error:                                 #B3261E;
    /* 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 Urban eSIM colors that fill that role. */
    --blue:                                  var(--route-dark);
    --blue-hover:                            var(--route-dark);
    --indigo:                                var(--asphalt);
    --purple:                                var(--text-gray);
    --pink:                                  #eef5f9;
    --red:                                   var(--error);
    --red-hover:                             #f16e6f;
    --orange:                                #ff9000;
    --yellow:                                #f9f286;
    --yellow-hover:                          #f8bd0b;
    --green:                                 #6ED26C;
    --teal:                                  #20c997;
    --cyan:                                  var(--route);
    --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(--asphalt);
    --gray:                                  var(--gray-600);
    --gray-dark:                             var(--gray-800);
    --primary:                               var(--route);
    --primary-hover:                         var(--route-dark);
    --secondary:                             var(--asphalt);
    --tertiary:                              var(--white);
    --success:                               var(--route);
    --info:                                  var(--route);
    --warning:                               var(--orange);
    --danger:                                var(--error);
    --dark:                                  var(--asphalt);
    --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(--paper);
    --background-by-default:                 var(--paper);
    --scrollbar-background-color:            var(--white);
    --scrollbar-color:                       var(--gray-600);
    --text-by-default:                       var(--asphalt);
    --leftbar-backgroud:                     var(--asphalt);
    --leftbar-backgroud-hover:               rgba(255, 255, 255, 0.2);
    --leftbar-text-color:                    var(--white);
    --leftbar-text-color-hover:              var(--white);
    --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(--asphalt);
    --header-grid-text-color:                var(--white);
    --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(--paper);
    --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(--route);
    --gofi-color:                            #47B5FF;
    --url-color:                             var(--asphalt);
    --url-color-hover:                       var(--route);
    --beta-badge-color:                      var(--primary);
    --error-text-color:                      var(--danger);
    --leftbar-active-item-left-border:       transparent;
}