:root {

    /* Brand blue */
    --ngx-brand-50:  #eef5ff;
    --ngx-brand-100: #dbe9ff;
    --ngx-brand-200: #b8d3ff;
    --ngx-brand-300: #8ab5ff;
    --ngx-brand-500: #2864fb;
    --ngx-brand-600: #0b63f6;
    --ngx-brand-700: #0d47c9;
    --ngx-brand-800: #123a9c;
    --ngx-brand-900: #14337c;
    --ngx-brand-950: #0c1d4a;

    /* Ink (neutrals) */
    --ngx-ink-50:  #f6f8fb;
    --ngx-ink-100: #eaeef4;
    --ngx-ink-200: #d3dbe6;
    --ngx-ink-400: #8592a6;
    --ngx-ink-600: #4a5568;
    --ngx-ink-700: #303a4c;
    --ngx-ink-800: #1c2333;
    --ngx-ink-900: #0f1420;

    /* Semantic aliases */
    --ngx-primary:            var(--ngx-brand-600);
    --ngx-primary-hover:      var(--ngx-brand-700);
    --ngx-primary-active:     var(--ngx-brand-800);
    --ngx-focus-ring:         var(--ngx-brand-600);

    --ngx-bg-page:            #ffffff;
    --ngx-bg-section:         var(--ngx-ink-50);
    --ngx-bg-dark:            var(--ngx-ink-900);

    --ngx-text-heading:       var(--ngx-ink-900);
    --ngx-text-body:          var(--ngx-ink-800);
    --ngx-text-muted:         var(--ngx-ink-600);
    --ngx-text-placeholder:   var(--ngx-ink-400);
    --ngx-text-on-dark:       #ffffff;

    --ngx-border-default:     var(--ngx-ink-100);
    --ngx-border-strong:      var(--ngx-ink-200);
    --ngx-border-hover:       var(--ngx-brand-200);

    --ngx-btn-primary-bg:       var(--ngx-brand-600);
    --ngx-btn-primary-bg-hover: var(--ngx-brand-700);
    --ngx-btn-primary-text:     #ffffff;

    --ngx-btn-secondary-bg:         #ffffff;
    --ngx-btn-secondary-border:     var(--ngx-ink-200);
    --ngx-btn-secondary-text:       var(--ngx-ink-800);
    --ngx-btn-secondary-border-hover: var(--ngx-brand-300);
    --ngx-btn-secondary-text-hover:   var(--ngx-brand-700);

    --ngx-header-bg:          rgba(255, 255, 255, .8);
    --ngx-header-text:        var(--ngx-ink-700);

    --ngx-footer-bg:          var(--ngx-ink-900);
    --ngx-footer-text:        var(--ngx-ink-100);
    --ngx-footer-text-muted:  var(--ngx-ink-400);

    --ngx-gradient-hero: linear-gradient(135deg, var(--ngx-brand-600), var(--ngx-brand-700), var(--ngx-ink-900));

}

/* Primary buttons (Save, Add X, primary-action) — brand blue */
.btn-primary,
.btn.btn-primary,
.primary-action,
.btn-primary.btn-sm {
    background-color: var(--ngx-primary) !important;
    border-color: var(--ngx-primary) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn.btn-primary:hover,
.primary-action:hover {
    background-color: var(--ngx-primary-hover) !important;
    border-color: var(--ngx-primary-hover) !important;
    color: #fff !important;
}
.btn-primary:focus,
.btn-primary:active,
.primary-action:active {
    background-color: var(--ngx-primary-active, var(--ngx-primary-hover)) !important;
    border-color: var(--ngx-primary-active, var(--ngx-primary-hover)) !important;
    box-shadow: 0 0 0 2px var(--ngx-brand-200) !important;
    color: #fff !important;
}