:root {
    --body-bg: #f0f4f5;
  
    --font-family-sans-serif: 'Nunito', sans-serif;
    --font-size-base: 0.9rem;
    --line-height-base: 1.6;
  
    --primary: #002661;
    --secondary: #044d8f;
    --accent: #5c84c6;
    --light-blue-highlight: #f0f3f6;
    --accent-light: #edf3fa;
    --error: #C50000;
    --success: #ff5a29;
    --lightgrey: #f0f3f6;
    --lightblue-background: #f0f4f5;
  
    --active: #006200;
    --expired: #851796;
    --trial: #DAECDA;
  
    --save: #3C6F25;
    --info: #044D8F;
    --warning: #FFC107;
    --white: #ffffff;
    --grey-border: #edf3fa;
  
    --default-language: #456CA5;
  }
  
  
  /* =========================================
   User Guide inline button base
   ========================================= */

   [class^="userguide-btn-"] {
    position: relative;
    display: inline-block;

    padding: 0 10px;

    border-radius: 3px;
    font-weight: 700;
    text-transform: uppercase;

    line-height: 1.8;
    white-space: nowrap;

    font-size: 0.8rem;
}

/* Solid buttons */

.userguide-btn-red {
    color: #fff;
    background-color: #e53935;
}

.userguide-btn-primary-text {
    color:  var(--primary);
    background-color: unset;
}

.userguide-btn-success-text {
    color:  var(--success);
    background-color: unset;
}

.userguide-btn-primary {
    color: #fff;
    background-color: var(--primary);
}

.userguide-btn-success {
    color: #fff;
    background-color: var(--success);
}

.userguide-btn-accent {
    color: #fff;
    background-color: #9c27b0;
}

/* Border buttons */

.userguide-btn-primary-outlined {
    background: white;
    color: var(--primary);
    border: 1px solid var(--primary);
}

.userguide-btn-success-outlined {
    background: white;
    color: var(--success);
    border: 1px solid var(--success);
}

/* =========================================
   Gutenberg editor: preserve inline backgrounds
   while editing RichText
   ========================================= */

/* Ensure inline buttons keep their background
   inside editable paragraph */
   .editor-styles-wrapper
   .block-editor-rich-text__editable
   [class^="userguide-btn-"] {
       background-clip: padding-box;
   }
   
   /* Re-assert variant colors inside editor */
   .editor-styles-wrapper
   .block-editor-rich-text__editable
   .userguide-btn-red {
       background-color: #e53935;
       color: #fff;
   }
   
   .editor-styles-wrapper
   .block-editor-rich-text__editable
   .userguide-btn-grey {
       background-color: #e0e0e0;
       color: var(--primary);
   }
   
   .editor-styles-wrapper
   .block-editor-rich-text__editable
   .userguide-btn-primary {
       background-color: var(--primary);
       color: #fff;
   }
   
   .editor-styles-wrapper
   .block-editor-rich-text__editable
   .userguide-btn-success {
       background-color: var(--success);
       color: #fff;
   }
   
   .editor-styles-wrapper
   .block-editor-rich-text__editable
   .userguide-btn-accent {
       background-color: #9c27b0;
       color: #fff;
   }
   
   .editor-styles-wrapper
   .block-editor-rich-text__editable
   .userguide-btn-primary-outlined {
       background: white;
       color: var(--primary);
       border: 1px solid var(--primary);
   }
   
   .editor-styles-wrapper
   .block-editor-rich-text__editable
   .userguide-btn-success-outlined {
       background: white;
       color: var(--success);
       border: 1px solid var(--success);
   }