

html {
    font-size: 14px;
}

:root {
    --k-black: #0A0A0A;   
    --k-ink:   #18181B;   
    --k-mute:  #52525B;   
    --k-soft:  #A1A1AA;   
    --k-line:  #E4E4E7;   
    --k-line2: #D4D4D8;   
    --k-tint:  #FAFAFA;   
    --k-white: #ffffff;

    --primary: var(--k-black);
    --primary-lifted: #27272A;
    --primary-accented: #3F3F46;
    --secondary: var(--k-mute);
    --secondary-lifted: #3F3F46;
    --secondary-accented: var(--k-ink);
    --text: var(--k-ink);
    --text-muted: var(--k-soft);
    --text-lifted: var(--k-mute);
    --text-accented: var(--k-ink);
    --text-inverted: var(--k-white);
    --border-muted: var(--k-line);
    --border: var(--k-line);
    --border-lifted: var(--k-line2);
    --border-accented: var(--k-black);
    --bg: var(--k-white);
    --bg-muted: var(--k-tint);
    --bg-lifted: var(--k-tint);
    --bg-accented: var(--k-line);
    --bg-inverted: var(--k-black);
    --rounding-sm: 0.2rem;
    --rounding-md: 0.2rem;
    --rounding-lg: 0.2rem;
    --disabled-opacity: 25%;
}

body,
body.primary-bg-color { background: var(--k-white); color: var(--k-ink); }
#main-body { background: var(--k-white); }

.navbar-light,
.top-bar,
header .navbar { background: var(--k-white) !important; }
header, .header-lined { border-color: var(--k-line); }

nav.master-breadcrumb,
ol.breadcrumb { background: var(--k-tint) !important; border-bottom: 1px solid var(--k-line); }
nav.master-breadcrumb a,
ol.breadcrumb a { color: var(--k-mute); }
nav.master-breadcrumb .active,
ol.breadcrumb .active { color: var(--k-black); }

a { color: var(--k-ink); text-decoration-color: var(--k-line2); }
a:hover, a:focus { color: var(--k-black); text-decoration: underline; }

.btn-primary,
.btn-primary:not(:disabled):not(.disabled),
.btn-success,
.btn-checkout {
    background: var(--k-black) !important;
    border-color: var(--k-black) !important;
    color: var(--k-white) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-success:hover, .btn-success:focus,
.btn-checkout:hover, .btn-checkout:focus {
    background: #27272A !important;
    border-color: #27272A !important;
}
.btn-default, .btn-secondary {
    background: var(--k-white); border-color: var(--k-line2); color: var(--k-black);
}
.btn-default:hover, .btn-secondary:hover { border-color: var(--k-black); color: var(--k-black); }
.btn-link { color: var(--k-ink) !important; }

button.btn.btn-link.btn-xs:not(.btn-remove-from-cart) {
    background: var(--k-white) !important;
    border: 1px solid var(--k-line2) !important;
    color: var(--k-mute) !important;
}
button.btn.btn-link.btn-xs:not(.btn-remove-from-cart):hover {
    border-color: var(--k-black) !important; color: var(--k-black) !important;
}

div.view-cart-items-header {
    background: var(--k-black) !important;
    border-color: var(--k-black) !important;
}
div.order-summary {
    background: var(--k-black) !important;
    color: var(--k-white) !important;
}
div.summary-container {
    background: var(--k-tint) !important;
    border-color: var(--k-line) !important;
}
#order-standard_cart .tab-content,
#order-standard_cart a.nav-link.active { background: var(--k-tint) !important; }
#order-standard_cart .product,
#order-standard_cart .panel,
#order-standard_cart .card { border-color: var(--k-line); }
.view-cart-items { border-bottom-color: var(--k-black) !important; }

div.summary-container,
div.summary-container * { color: var(--k-ink) !important; }
div.summary-container .recurring-charges,
div.summary-container .recurring-charges * { color: var(--k-mute) !important; }
div.summary-container .btn,
div.summary-container .btn * { color: var(--k-white) !important; }
div.summary-container a:not(.btn),
div.summary-container a:not(.btn) * { color: var(--k-ink) !important; }
div.summary-container .total-due-today,
div.summary-container .cart-total { color: var(--k-black) !important; }

.table > thead > tr > th, .table thead th {
    background: var(--k-black); color: var(--k-white); border-color: var(--k-black);
}
.table td, .table th, .panel, .card, hr { border-color: var(--k-line); }
.modal-header { background: var(--k-tint); border-color: var(--k-line); }
.modal-header.bg-primary { background: var(--k-black) !important; }
.badge-info { background: var(--k-black) !important; }
a.item.active, .dropdown-menu .item.active {
    background: var(--k-tint) !important; color: var(--k-black) !important;
}

.form-control { border-color: var(--k-line2); color: var(--k-ink); }
.form-control:focus {
    border-color: var(--k-black);
    box-shadow: 0 0 0 .15rem rgba(10, 10, 10, .10);
}
label, .control-label { color: var(--k-black); }

.text-muted, small.text-muted, .help-block { color: var(--k-mute) !important; }

footer.footer { background: var(--k-black) !important; }
footer.footer a { color: var(--k-white); }
footer.footer a:hover { color: var(--k-white); text-decoration: underline; }

.btn, .form-control, .input-group > .form-control, .panel, .card, .alert,
.summary-container, .view-cart-items-header, .order-summary, .modal-content,
.nav-tabs .nav-link, .tab-content, .well, .list-group-item {
    border-radius: 3px !important;
}
.btn { font-weight: 600; letter-spacing: .01em; box-shadow: none !important; }
.panel, .card, .well, .summary-container, .tab-content { box-shadow: none !important; }
