/* Tenant colour theme and fonts (BRD-02). js/brand.js sets the --bk-* variables and the bk-themed class on <html>, with
   bk-guest on guest pages (web shop, booking, QR menu, kiosk, payment, quotes) and bk-staff on staff screens, which
   take the fonts and the primary colour only so the till keeps its familiar layout. */
html.bk-themed {
  --bs-body-font-family: var(--bk-font-body);
  --bs-border-radius: calc(var(--bk-radius) * .5); --bs-border-radius-sm: calc(var(--bk-radius) * .35); --bs-border-radius-lg: calc(var(--bk-radius) * .75);
  --bs-link-color: var(--bk-primary); --bs-link-hover-color: color-mix(in srgb, var(--bk-primary) 80%, #000);
  --bs-link-color-rgb: var(--bk-primary-rgb); --bs-link-hover-color-rgb: var(--bk-primary-rgb); --bs-primary-rgb: var(--bk-primary-rgb);
  font-size: calc(100% * var(--bk-scale));
}
html.bk-themed body { font-family: var(--bk-font-body); }
html.bk-themed :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-1, .display-2, .display-3, .display-4, .display-5, .bk-heading) { font-family: var(--bk-font-heading); }
html.bk-themed .btn-primary {
  --bs-btn-bg: var(--bk-primary); --bs-btn-border-color: var(--bk-primary); --bs-btn-color: var(--bk-on-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bk-primary) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--bk-primary) 85%, #000); --bs-btn-hover-color: var(--bk-on-primary);
  --bs-btn-active-bg: color-mix(in srgb, var(--bk-primary) 75%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--bk-primary) 75%, #000); --bs-btn-active-color: var(--bk-on-primary);
  --bs-btn-disabled-bg: var(--bk-primary); --bs-btn-disabled-border-color: var(--bk-primary); --bs-btn-disabled-color: var(--bk-on-primary);
}
html.bk-themed .btn-outline-primary {
  --bs-btn-color: var(--bk-primary); --bs-btn-border-color: var(--bk-primary); --bs-btn-hover-bg: var(--bk-primary); --bs-btn-hover-border-color: var(--bk-primary);
  --bs-btn-hover-color: var(--bk-on-primary); --bs-btn-active-bg: var(--bk-primary); --bs-btn-active-color: var(--bk-on-primary);
}
html.bk-themed .form-control:focus, html.bk-themed .form-select:focus { border-color: var(--bk-primary); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--bk-primary) 25%, transparent); }
html.bk-themed .form-check-input:checked { background-color: var(--bk-primary); border-color: var(--bk-primary); }

/* Guest pages: the whole palette, light or dark. */
html.bk-guest {
  --g-accent: var(--bk-primary); --k-accent: var(--bk-primary); --k-dark: var(--bk-secondary); --cd-accent: var(--bk-primary);
  --bs-body-bg: var(--bk-bg); --bs-body-color: var(--bk-text); --bs-secondary-color: var(--bk-muted); --bs-emphasis-color: var(--bk-text);
  --bs-tertiary-bg: var(--bk-surface); --bs-secondary-bg: var(--bk-surface); --bs-border-color: color-mix(in srgb, var(--bk-text) 15%, transparent);
}
html.bk-guest body { background: var(--bk-bg); color: var(--bk-text); }
html.bk-guest :is(.card, .modal-content, .dropdown-menu, .list-group-item, .offcanvas) { --bs-card-bg: var(--bk-surface); --bs-modal-bg: var(--bk-surface); --bs-list-group-bg: var(--bk-surface); background-color: var(--bk-surface); color: var(--bk-text); }
html.bk-guest :is(.bg-white, .bg-light, .bg-body) { background-color: var(--bk-surface) !important; }
html.bk-guest :is(.text-muted, .text-secondary, .text-body-secondary) { color: var(--bk-muted) !important; }
html.bk-guest .form-control, html.bk-guest .form-select { background-color: var(--bk-surface); color: var(--bk-text); border-color: color-mix(in srgb, var(--bk-text) 20%, transparent); }
html.bk-guest .btn-light { --bs-btn-bg: var(--bk-surface); --bs-btn-color: var(--bk-text); --bs-btn-border-color: var(--bk-surface); }
html.bk-guest .btn-outline-secondary { --bs-btn-color: var(--bk-text); --bs-btn-border-color: color-mix(in srgb, var(--bk-text) 35%, transparent); --bs-btn-hover-bg: var(--bk-text); --bs-btn-hover-color: var(--bk-bg); }
html.bk-guest .btn-dark { --bs-btn-bg: var(--bk-text); --bs-btn-color: var(--bk-bg); --bs-btn-border-color: var(--bk-text); --bs-btn-hover-bg: var(--bk-text); --bs-btn-hover-color: var(--bk-bg); --bs-btn-active-bg: var(--bk-text); --bs-btn-active-color: var(--bk-bg); }
html.bk-guest .btn-outline-dark { --bs-btn-color: var(--bk-text); --bs-btn-border-color: color-mix(in srgb, var(--bk-text) 35%, transparent); --bs-btn-hover-bg: var(--bk-text); --bs-btn-hover-color: var(--bk-bg); --bs-btn-hover-border-color: var(--bk-text); }
/* Light outline buttons sit on the primary-coloured header: they take the header's text colour. */
html.bk-guest .btn-outline-light { --bs-btn-color: var(--bk-on-primary); --bs-btn-border-color: color-mix(in srgb, var(--bk-on-primary) 55%, transparent); --bs-btn-hover-bg: var(--bk-on-primary); --bs-btn-hover-color: var(--bk-primary); --bs-btn-hover-border-color: var(--bk-on-primary); --bs-btn-active-bg: var(--bk-on-primary); --bs-btn-active-color: var(--bk-primary); }

/* Staff screens: brand fonts and colour on the header and the main buttons. */
html.bk-staff { --pos-accent: var(--bk-primary); --bk-blue: var(--bk-primary); }