:root {
    /* ---------- Base layout / surfaces ---------- */

    /* Page background and main surface */
    --body-bg:               var(--color-01-83);  /* light bluish background */
    --panel-bg:              var(--color-01-89);  /* “white” on the blue scale */
    --panel-default-bg:      var(--color-01-89);
    --table-bg:              var(--color-01-89);
    --table-bg-accent:       var(--color-01-87);  /* slightly tinted row background */
    --code-bg:               var(--color-01-87);
    --well-bg:               var(--color-01-89);

    /* Former “white” variants now on the 01 scale */
    --white-color:           var(--color-01-89);
    --white-color-3:         var(--color-01-86);
    --white-color-5:         var(--color-01-83);

    /* Main gray scale now on primary 01 */
    --main-gray:             var(--color-01-85);
    --main-gray-5:           var(--color-01-80);
    --main-gray-7:           var(--color-01-79);
    --main-gray-10:          var(--color-01-78);
    --main-gray-12:          var(--color-01-77);
    --main-gray-17:          var(--color-01-70);
    --main-gray-25:          var(--color-01-62);
    --main-gray-40:          var(--color-01-49);

    /* ---------- Text ---------- */

    --text-color:            var(--color-01-20);  /* main text (dark) */
    --text-white-color:      var(--color-01-89);
    --text-muted-color:      var(--color-01-60);  /* secondary / muted */
    --text-gray-color:       var(--color-01-45);

    --code-border-color:         var(--color-01-85);
    --blockquote-border-color:   var(--color-01-80);

    /* ---------- Links ---------- */

    /* Link blue = core brand color (01) */
    --link-color:            var(--color-01-60);  /* primary link blue */
    --link-hover-color:      var(--color-01-45);  /* darker on hover */

    /* ---------- Navbar / header ---------- */

    --navbar-bg:                 var(--color-01-83);
    --navbar-link-color:         var(--color-01-60);
    --navbar-link-icon-color:    var(--color-01-45);
    --navbar-link-hover-color:   var(--color-01-40);
    --navbar-link-hover-bg:      var(--color-01-83);
    --navbar-link-active-bg:     var(--color-01-88);

    --navbar-inverse-color:              var(--color-01-60);
    --navbar-inverse-bg:                 var(--color-01-83);
    --navbar-inverse-link-color:         var(--color-01-20);
    --navbar-inverse-link-active-bg:     var(--color-01-87);
    --navbar-inverse-border:             var(--color-01-85);
    --navbar-inverse-toggle-hover-bg:    var(--color-01-86);
    --navbar-inverse-bg-7:               var(--color-01-86);
    --navbar-inverse-link-hover-color:   var(--color-01-20);
    --navbar-inverse-link-hover-bg:      var(--color-01-84);
    --navbar-inverse-link-disabled-color:var(--color-01-28);
    --navbar-inverse-link-disabled-bg:   transparent;
    --navbar-inverse-link-icon-color:    var(--color-01-39);
    --navbar-inverse-link-icon-hover-color: var(--color-01-39);

    /* ---------- Footer ---------- */

    --site-footer-bg:           transparent;
    --site-footer-color:        var(--color-01-40);

    /* ---------- Inputs / form elements ---------- */

    --input-color:              var(--color-01-40);
    --input-bg:                 var(--color-01-89);
    --input-border:             var(--color-01-82);
    --input-border-focus:       var(--color-01-60);  /* blue focus ring */
    --input-box-shadow:         inset 0 var(--1px) var(--1px)
                                rgba(var(--color-rgb-01-00), 0.04);
    --input-bg-disabled:        var(--color-01-80);
    --input-color-disabled:     var(--color-01-60);
    --input-border-width:       var(--1px);

    /* ---------- Tooltips ---------- */

    --tooltip-bg:    var(--color-01-05);  /* almost black on 01 scale */
    --tooltip-color: var(--color-01-89);

    /* ---------- Neutral button (non-primary) ---------- */

    --btn-default-bg:           var(--color-01-88);
    --btn-default-border:       var(--color-01-82);
    --btn-default-color:        var(--color-01-40);
    --btn-default-hover-bg:     var(--color-01-85);
    --btn-default-hover-border: var(--color-01-80);
    --btn-default-active-bg:    var(--color-01-82);
    --btn-default-active-border:var(--color-01-78);

    /* Primary button = same scale as links */
    --btn-primary-bg:           var(--color-01-60);
    --btn-primary-border:       var(--color-01-60);
    --btn-primary-color:        var(--color-01-89);
    --btn-primary-hover-bg:     var(--color-01-45);
    --btn-primary-hover-border: var(--color-01-45);
    --btn-primary-active-bg:    var(--color-01-40);
    --btn-primary-active-border:var(--color-01-38);

    /* Keep success / danger / warning as they are for now */
    /* (you said: do not re-declare them here) */

    --btn-text-color:           var(--color-01-39);
    --btn-active-box-shadow:    inset 0 3px 5px
                                rgba(var(--color-rgb-01-00), 0.125);

    /* ---------- Dropdown / popover / modal ---------- */

    --dropdown-bg:              var(--color-01-89);
    --dropdown-link-color:      var(--color-01-20);
    --dropdown-link-hover-color:var(--color-01-12);
    --dropdown-link-hover-bg:   var(--color-01-85);
    --dropdown-border:          var(--color-01-85);
    --dropdown-divider-bg:      var(--color-01-87);
    --dropdown-box-shadow:      0 4px 6px
                                rgba(var(--color-rgb-01-00), 0.11);

    --popover-bg:               var(--color-01-89);

    --modal-backdrop-bg:        rgba(var(--color-rgb-01-85), 0.5);
    --modal-backdrop-filter:    blur(1px);
    --modal-header-bg:          var(--color-01-83);
    --modal-footer-bg:          var(--color-01-83);
    --modal-content-bg:         var(--color-01-83);
    --modal-box-shadow:         0 5px 15px
                                rgba(var(--color-rgb-01-00), 0.5);
    --modal-border-color:       var(--color-01-87);
    --modal-border-width:       0;

    /* ---------- Scrollbars ---------- */

    --scroll-bg:            var(--color-01-80);
    --scroll-thumb-bg:      var(--color-01-75);
    --scroll-width:         11px;
    --scroll-border-width:  0;

    /* ---------- Misc ---------- */

    --default-heading-bg-color: var(--color-01-83);
    --default-border-color:     var(--color-01-85);
    --label-color:              var(--color-01-89);
    --label-default-bg:         var(--color-01-60);

    --default-box-shadow:       1px 2px 2px
                                rgba(var(--color-rgb-01-00), 0.05);
    --top-bar-box-shadow:       2px 2px 2px
                                rgba(var(--color-rgb-01-00), 0.09);
}
