/* Theme roles
   Palette: violet, royal, sky, teal.
   Use --role-* in page CSS. Bootstrap utilities and components read the --bs-* map. */

:root {
  --palette-violet: #845EC2;
  --palette-royal: #2C73D2;
  --palette-sky: #0081CF;
  --palette-teal: #0089BA;

  --palette-violet-rgb: 132, 94, 194;
  --palette-royal-rgb: 44, 115, 210;
  --palette-sky-rgb: 0, 129, 207;
  --palette-teal-rgb: 0, 137, 186;

  /* Roles */
  --role-primary: var(--palette-violet);
  --role-primary-rgb: var(--palette-violet-rgb);
  --role-primary-hover: #7352AD;
  --role-primary-active: #66489C;
  --role-on-primary: #ffffff;

  --role-secondary: var(--palette-royal);
  --role-secondary-rgb: var(--palette-royal-rgb);
  --role-secondary-hover: #2568BD;
  --role-secondary-active: #215FB0;
  --role-on-secondary: #ffffff;

  --role-surface: #EAF3FB;
  --role-surface-rgb: 234, 243, 251;
  --role-canvas: #ffffff;

  --role-accent: var(--palette-teal);
  --role-accent-rgb: var(--palette-teal-rgb);
  --role-accent-hover: #0079A3;
  --role-accent-active: #006E92;
  --role-on-accent: #ffffff;

  --role-highlight: var(--palette-sky);
  --role-highlight-rgb: var(--palette-sky-rgb);

  --role-ink: #14253D;
  --role-body: #2A4058;
  --role-muted: #5A7189;
  --role-line: #C8DAEB;

  --role-primary-subtle: #EDE6F7;
  --role-secondary-subtle: #E3EFFA;
  --role-accent-subtle: #D9EEF6;

  --hero-deep: #0B1F38;
  --hero-mid: #12325A;
  --hero-rich: #1A4A7A;
  --hero-glow: #1E5A94;

  /* Bootstrap map */
  --bs-primary: var(--role-primary);
  --bs-primary-rgb: var(--role-primary-rgb);
  --bs-primary-text-emphasis: #4A2E78;
  --bs-primary-bg-subtle: var(--role-primary-subtle);
  --bs-primary-border-subtle: #C9B8E8;

  --bs-secondary: var(--role-secondary);
  --bs-secondary-rgb: var(--role-secondary-rgb);
  --bs-secondary-text-emphasis: #163D73;
  --bs-secondary-bg-subtle: var(--role-secondary-subtle);
  --bs-secondary-border-subtle: #A8C8E8;

  --bs-success: var(--role-accent);
  --bs-success-rgb: var(--role-accent-rgb);
  --bs-success-text-emphasis: #005A78;
  --bs-success-bg-subtle: var(--role-accent-subtle);
  --bs-success-border-subtle: #7EC4DB;

  --bs-info: var(--role-highlight);
  --bs-info-rgb: var(--role-highlight-rgb);

  --bs-light: var(--role-surface);
  --bs-light-rgb: var(--role-surface-rgb);

  --bs-body-color: var(--role-body);
  --bs-body-color-rgb: 42, 64, 88;
  --bs-body-bg: var(--role-canvas);
  --bs-emphasis-color: var(--role-ink);
  --bs-secondary-color: var(--role-muted);
  --bs-tertiary-color: rgba(42, 64, 88, 0.5);
  --bs-heading-color: var(--role-ink);

  --bs-link-color: var(--role-secondary);
  --bs-link-color-rgb: var(--role-secondary-rgb);
  --bs-link-hover-color: var(--role-primary);
  --bs-link-hover-color-rgb: var(--role-primary-rgb);

  --bs-border-color: var(--role-line);
  --bs-focus-ring-color: rgba(var(--role-secondary-rgb), 0.28);

  --bs-nav-pills-link-active-bg: var(--role-primary);
  --bs-nav-pills-link-active-color: var(--role-on-primary);
  --bs-pagination-active-bg: var(--role-primary);
  --bs-pagination-active-border-color: var(--role-primary);
  --bs-pagination-color: var(--role-secondary);
  --bs-pagination-hover-color: var(--role-primary);
  --bs-pagination-focus-color: var(--role-primary);
  --bs-progress-bar-bg: var(--role-secondary);
  --bs-list-group-active-bg: var(--role-primary);
  --bs-list-group-active-border-color: var(--role-primary);
  --bs-dropdown-link-active-bg: var(--role-primary);
}

body {
  color: var(--role-body);
  background-color: var(--role-canvas);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--role-ink);
}

.btn-primary {
  --bs-btn-color: var(--role-on-primary);
  --bs-btn-bg: var(--role-primary);
  --bs-btn-border-color: var(--role-primary);
  --bs-btn-hover-color: var(--role-on-primary);
  --bs-btn-hover-bg: var(--role-primary-hover);
  --bs-btn-hover-border-color: var(--role-primary-hover);
  --bs-btn-focus-shadow-rgb: var(--role-primary-rgb);
  --bs-btn-active-color: var(--role-on-primary);
  --bs-btn-active-bg: var(--role-primary-active);
  --bs-btn-active-border-color: var(--role-primary-active);
  --bs-btn-disabled-color: var(--role-on-primary);
  --bs-btn-disabled-bg: var(--role-primary);
  --bs-btn-disabled-border-color: var(--role-primary);
}

.btn-secondary {
  --bs-btn-color: var(--role-on-secondary);
  --bs-btn-bg: var(--role-secondary);
  --bs-btn-border-color: var(--role-secondary);
  --bs-btn-hover-color: var(--role-on-secondary);
  --bs-btn-hover-bg: var(--role-secondary-hover);
  --bs-btn-hover-border-color: var(--role-secondary-hover);
  --bs-btn-focus-shadow-rgb: var(--role-secondary-rgb);
  --bs-btn-active-color: var(--role-on-secondary);
  --bs-btn-active-bg: var(--role-secondary-active);
  --bs-btn-active-border-color: var(--role-secondary-active);
  --bs-btn-disabled-color: var(--role-on-secondary);
  --bs-btn-disabled-bg: var(--role-secondary);
  --bs-btn-disabled-border-color: var(--role-secondary);
}

.btn-success,
.btn-accent {
  --bs-btn-color: var(--role-on-accent);
  --bs-btn-bg: var(--role-accent);
  --bs-btn-border-color: var(--role-accent);
  --bs-btn-hover-color: var(--role-on-accent);
  --bs-btn-hover-bg: var(--role-accent-hover);
  --bs-btn-hover-border-color: var(--role-accent-hover);
  --bs-btn-focus-shadow-rgb: var(--role-accent-rgb);
  --bs-btn-active-color: var(--role-on-accent);
  --bs-btn-active-bg: var(--role-accent-active);
  --bs-btn-active-border-color: var(--role-accent-active);
  --bs-btn-disabled-color: var(--role-on-accent);
  --bs-btn-disabled-bg: var(--role-accent);
  --bs-btn-disabled-border-color: var(--role-accent);
}

.btn-outline-primary {
  --bs-btn-color: var(--role-primary);
  --bs-btn-border-color: var(--role-primary);
  --bs-btn-hover-color: var(--role-on-primary);
  --bs-btn-hover-bg: var(--role-primary);
  --bs-btn-hover-border-color: var(--role-primary);
  --bs-btn-focus-shadow-rgb: var(--role-primary-rgb);
  --bs-btn-active-color: var(--role-on-primary);
  --bs-btn-active-bg: var(--role-primary-active);
  --bs-btn-active-border-color: var(--role-primary-active);
  --bs-btn-disabled-color: var(--role-primary);
  --bs-btn-disabled-border-color: var(--role-primary);
}

.btn-outline-accent {
  --bs-btn-color: #006E92;
  --bs-btn-border-color: var(--role-accent);
  --bs-btn-hover-color: var(--role-on-accent);
  --bs-btn-hover-bg: var(--role-accent);
  --bs-btn-hover-border-color: var(--role-accent);
  --bs-btn-focus-shadow-rgb: var(--role-accent-rgb);
  --bs-btn-active-color: var(--role-on-accent);
  --bs-btn-active-bg: var(--role-accent-active);
  --bs-btn-active-border-color: var(--role-accent-active);
  --bs-btn-disabled-color: #006E92;
  --bs-btn-disabled-border-color: var(--role-accent);
  --bs-btn-bg: transparent;
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}

.btn-outline-accent:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--role-secondary);
  box-shadow: 0 0 0 0.25rem rgba(var(--role-secondary-rgb), 0.22);
}

.form-check-input:checked {
  background-color: var(--role-secondary);
  border-color: var(--role-secondary);
}

.form-check-input:focus {
  border-color: var(--role-highlight);
  box-shadow: 0 0 0 0.25rem rgba(var(--role-highlight-rgb), 0.22);
}

.text-accent { color: var(--role-accent) !important; }
.text-highlight { color: var(--role-highlight) !important; }
.bg-accent { background-color: var(--role-accent) !important; }
.bg-surface { background-color: var(--role-surface) !important; }
.text-ink { color: var(--role-ink) !important; }
.border-accent { border-color: var(--role-accent) !important; }