:root {
    /* brand colors — overridden per-installation (with !important) by
       resources/views/vendor/backpack/base/inc/styles.blade.php; identical in light/dark */
    --color-highlight: #0188B6;
    --color-highlight-invert: #fff;
    --color-highlight2: #ffb703;
    --color-topbar: #FAFAFA;
    --color-hover: #6ab9d5;
    --color-hover-invert: #000;

    --color-headers: #e3e2e1;
    --color-headers-invert: #FAFAFA;
    --color-borderdecent: rgba(0,40,100,.12);

    --color-textprimary: #444444;

    --color-font-nav: #353434;
    --color-font-button: #353434;
    --color-font-table: #353434;

    --color-input-alt: #f3f3f3;

    /* neutral surfaces */
    --color-page-bg: #ffffff;
    --color-white: #ffffff;
    --color-surface-light-1: #F5F4F4;
    --color-surface-light-2: #E2E2E2;
    --color-surface-light-3: #C4C4C4;
    --color-surface-light-4: #f4f4f4;

    /* borders */
    --color-border-light-1: #F2F2F2;
    --color-border-light-2: #d5d5d7;
    --color-border-light-3: #eee;
    --color-border-medium: #ccc;

    /* text */
    --color-text-strong: #353434;
    --color-text-muted: #787878;
    --color-text-faint-1: #888;
    --color-text-faint-2: #999;
    --color-text-faint-3: #bbb;
    --color-text-faint-4: #aaa;
    --color-black: #000;

    --color-surface-warm: #e6e3e3;
    --color-tag-bg: #ddd;

    /* misc */
    --color-plain-bg: #171717;
    --color-overlay: rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .1);
    --color-row-tint: rgba(0, 0, 0, .02);
}

:root[data-theme="dark"] {
    --color-topbar: #26292c;
    --color-headers: #35383c;
    --color-headers-invert: #1b1e21;
    --color-borderdecent: rgba(255, 255, 255, .14);

    --color-textprimary: #d5d8db;

    --color-font-nav: #d5d8db;
    --color-font-button: #d5d8db;
    --color-font-table: #d5d8db;

    --color-input-alt: #2f3236;

    --color-white: #2a2d30;
    --color-surface-light-1: #2f3236;
    --color-surface-light-2: #35383c;
    --color-surface-light-3: #3d4045;
    --color-surface-light-4: #2f3236;

    --color-border-light-1: #3a3d41;
    --color-border-light-2: #3a3d41;
    --color-border-light-3: #3a3d41;
    --color-border-medium: #4a4d52;

    --color-text-strong: #e4e6e8;
    --color-text-muted: #b0b4b8;
    --color-text-faint-1: #9aa0a6;
    --color-text-faint-2: #9aa0a6;
    --color-text-faint-3: #6d7278;
    --color-text-faint-4: #6d7278;
    --color-black: #e4e6e8;

    --color-surface-warm: #3d3a3a;
    --color-tag-bg: #4a4d52;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .4);
    --color-row-tint: rgba(255, 255, 255, .04);

    /* page background itself — see body{} rule in app.css */
    --color-page-bg: #1b1e21;
}