/* Visual themes ("skins"), chosen from the Theme list in the menu bar.
 *
 * The shared base for every skin but "classic" (which is the look in mapleradio.css
 * and loads nothing from here). Each skin has its own file, css/skin-<name>.css,
 * which supplies a block of design tokens (--sk-*), once for light and once for
 * dark, and then whatever layout it wants. This file turns those tokens into
 * Bootstrap's own variables and the few component rules that need more than a
 * variable, so a skin gets a coherent baseline without copying any of it.
 *
 * What a skin deliberately does NOT touch: the success / warning / danger colours
 * that mean something (a wrong answer, a failed grade, the red-yellow-green
 * scale). Its accent recolours buttons, links, the logo plate and focus rings,
 * not those. See libs/skins.py for how a skin is registered.
 *
 * Token reference (colour tokens marked "rgb" hold "r, g, b" so alpha can be
 * added where needed):
 *   --sk-bg, --sk-surface, --sk-surface-2, --sk-text   rgb   page, cards, wells, text
 *   --sk-border                                        colour
 *   --sk-accent / --sk-accent-hover / --sk-on-accent   colour  button fill, hover, label
 *   --sk-accent-rgb                                    rgb
 *   --sk-accent-text / --sk-accent-text-rgb            colour / rgb  links, outline buttons
 *   --sk-radius / --sk-radius-btn / --sk-radius-input  length
 *   --sk-shadow                                        box-shadow for cards
 *   --sk-edge / --sk-leaf                              logo outline and leaf colour
 *   --sk-backdrop                                      glow painted behind the page
 */

/* ------------------------------------------------------------------ shared */

html[data-skin]:not([data-skin="classic"]) {
  --bs-body-bg: rgb(var(--sk-bg));
  --bs-body-bg-rgb: var(--sk-bg);
  --bs-body-color: rgb(var(--sk-text));
  --bs-body-color-rgb: var(--sk-text);
  --bs-emphasis-color: rgb(var(--sk-text));
  --bs-secondary-color: rgba(var(--sk-text), 0.66);
  --bs-secondary-bg: rgb(var(--sk-surface-2));
  --bs-tertiary-bg: rgb(var(--sk-surface-2));
  --bs-border-color: var(--sk-border);
  --bs-link-color: var(--sk-accent-text);
  --bs-link-color-rgb: var(--sk-accent-text-rgb);
  --bs-link-hover-color: var(--sk-accent-hover);
  --bs-primary: var(--sk-accent);
  --bs-primary-rgb: var(--sk-accent-rgb);
  --mr-red-edge: var(--sk-edge);
}

html[data-skin]:not([data-skin="classic"]) body {
  background-image: var(--sk-backdrop, none);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Bars and cards sit on the surface colour, a step off the page. */
html[data-skin]:not([data-skin="classic"]) .navbar.bg-body {
  background-color: rgb(var(--sk-surface)) !important;
  border-color: var(--sk-border) !important;
}

html[data-skin]:not([data-skin="classic"]) .navbar .nav-link {
  color: var(--bs-body-color);
}

html[data-skin]:not([data-skin="classic"]) .navbar .nav-link:hover,
html[data-skin]:not([data-skin="classic"]) .navbar .nav-link:focus-visible {
  color: var(--sk-accent-text);
}

html[data-skin]:not([data-skin="classic"]) .card {
  --bs-card-bg: rgb(var(--sk-surface));
  --bs-card-border-color: var(--sk-border);
  --bs-card-border-radius: var(--sk-radius);
  --bs-card-inner-border-radius: calc(var(--sk-radius) - 1px);
  --bs-card-cap-bg: rgb(var(--sk-surface-2));
  box-shadow: var(--sk-shadow);
}

html[data-skin]:not([data-skin="classic"]) .modal,
html[data-skin]:not([data-skin="classic"]) .dropdown-menu,
html[data-skin]:not([data-skin="classic"]) .list-group {
  --bs-modal-bg: rgb(var(--sk-surface));
  --bs-modal-border-color: var(--sk-border);
  --bs-modal-border-radius: var(--sk-radius);
  --bs-dropdown-bg: rgb(var(--sk-surface));
  --bs-dropdown-border-color: var(--sk-border);
  --bs-dropdown-border-radius: var(--sk-radius-input);
  --bs-dropdown-link-color: rgb(var(--sk-text));
  --bs-dropdown-link-hover-bg: rgb(var(--sk-surface-2));
  --bs-dropdown-link-active-bg: var(--sk-accent);
  --bs-dropdown-link-active-color: var(--sk-on-accent);
  --bs-list-group-bg: rgb(var(--sk-surface));
  --bs-list-group-border-color: var(--sk-border);
  --bs-list-group-border-radius: var(--sk-radius-input);
}

/* A table inside a card must not repaint the page colour over the card. Cells
   flagged by --bs-table-bg (.mr-cell-*) still set their own. */
html[data-skin]:not([data-skin="classic"]) .table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--sk-border);
}

/* Buttons: the accent replaces the brand red on the two "danger" styles the app
   uses as its primary buttons, and the radius is the skin's. */
html[data-skin]:not([data-skin="classic"]) .btn,
html[data-skin]:not([data-skin="classic"]) .btn-sm,
html[data-skin]:not([data-skin="classic"]) .btn-lg {
  --bs-btn-border-radius: var(--sk-radius-btn);
}

html[data-skin]:not([data-skin="classic"]) .btn-danger {
  --bs-btn-color: var(--sk-on-accent);
  --bs-btn-bg: var(--sk-accent);
  --bs-btn-border-color: var(--sk-accent);
  --bs-btn-hover-color: var(--sk-on-accent);
  --bs-btn-hover-bg: var(--sk-accent-hover);
  --bs-btn-hover-border-color: var(--sk-accent-hover);
  --bs-btn-focus-shadow-rgb: var(--sk-accent-rgb);
  --bs-btn-active-color: var(--sk-on-accent);
  --bs-btn-active-bg: var(--sk-accent-hover);
  --bs-btn-active-border-color: var(--sk-accent-hover);
  --bs-btn-disabled-color: var(--sk-on-accent);
  --bs-btn-disabled-bg: var(--sk-accent);
  --bs-btn-disabled-border-color: var(--sk-accent);
}

html[data-skin]:not([data-skin="classic"]) .btn-outline-danger {
  --bs-btn-color: var(--sk-accent-text);
  --bs-btn-border-color: var(--sk-accent);
  --bs-btn-hover-color: var(--sk-on-accent);
  --bs-btn-hover-bg: var(--sk-accent);
  --bs-btn-hover-border-color: var(--sk-accent);
  --bs-btn-focus-shadow-rgb: var(--sk-accent-rgb);
  --bs-btn-active-color: var(--sk-on-accent);
  --bs-btn-active-bg: var(--sk-accent);
  --bs-btn-active-border-color: var(--sk-accent);
  --bs-btn-disabled-color: var(--sk-accent-text);
  --bs-btn-disabled-border-color: var(--sk-accent);
}

html[data-skin]:not([data-skin="classic"]) .btn-outline-secondary {
  --bs-btn-color: rgb(var(--sk-text));
  --bs-btn-border-color: var(--sk-border);
  --bs-btn-hover-color: rgb(var(--sk-text));
  --bs-btn-hover-bg: rgb(var(--sk-surface-2));
  --bs-btn-hover-border-color: var(--sk-border);
  --bs-btn-active-color: rgb(var(--sk-text));
  --bs-btn-active-bg: rgb(var(--sk-surface-2));
  --bs-btn-active-border-color: var(--sk-border);
}

/* Fields. Bootstrap hard-codes a blue focus ring, so it is set here. */
html[data-skin]:not([data-skin="classic"]) .form-control,
html[data-skin]:not([data-skin="classic"]) .form-select {
  background-color: rgb(var(--sk-surface));
  border-color: var(--sk-border);
  border-radius: var(--sk-radius-input);
  color: rgb(var(--sk-text));
}

html[data-skin]:not([data-skin="classic"]) .form-control:focus,
html[data-skin]:not([data-skin="classic"]) .form-select:focus {
  border-color: var(--sk-accent);
  box-shadow: 0 0 0 0.2rem rgba(var(--sk-accent-rgb), 0.28);
}

html[data-skin]:not([data-skin="classic"]) .form-check-input:checked {
  background-color: var(--sk-accent);
  border-color: var(--sk-accent);
}

/* An unchecked radio on the softer skin borders would all but vanish. */
html[data-skin]:not([data-skin="classic"]) .form-check-input:not(:checked) {
  border-color: rgba(var(--sk-text), 0.38);
}

html[data-skin]:not([data-skin="classic"]) .form-check-input:focus {
  border-color: var(--sk-accent);
  box-shadow: 0 0 0 0.2rem rgba(var(--sk-accent-rgb), 0.28);
}

html[data-skin]:not([data-skin="classic"]) .progress {
  --bs-progress-bg: rgb(var(--sk-surface-2));
  --bs-progress-border-radius: 999px;
}

/* Quiz answers: a hover tint, in the accent, on rows that can still be chosen. */
html[data-skin]:not([data-skin="classic"])
  #q-options .list-group-item:not(.list-group-item-success):not(.list-group-item-danger):not(:has(input:disabled)):hover {
  background-color: rgba(var(--sk-accent-rgb), 0.09);
}

/* The quiz's progress bar is the app's primary indicator, so it follows the accent
   (Bootstrap's bg-danger is !important, hence the same here). */
html[data-skin]:not([data-skin="classic"]) #q-progress {
  background-color: var(--sk-accent) !important;
}

/* The logo: the plate takes the accent, the leaf its own colour. */
html[data-skin]:not([data-skin="classic"]) .mr-logo-plate {
  background-color: var(--sk-accent);
  border-radius: var(--sk-plate-radius, var(--sk-radius-input));
}

html[data-skin]:not([data-skin="classic"]) .mr-logo {
  background-color: var(--sk-leaf);
}

html[data-skin]:not([data-skin="classic"]) .modal-content {
  border-radius: var(--sk-radius);
}

html[data-skin]:not([data-skin="classic"]) .alert,
html[data-skin]:not([data-skin="classic"]) .badge,
html[data-skin]:not([data-skin="classic"]) .mr-question-tooltip {
  border-radius: var(--sk-radius-input);
}