/**
 * Design tokens (decision 0026): Vigapedia's brand mapped onto Bootstrap's own
 * CSS variables, plus --vgp-* for values Bootstrap has no variable for.
 * The site is dark first (data-bs-theme="dark" on <html>).
 *
 * Contrast (WCAG 2.2 AA): brand orange #E67B0C is 2.9:1 with white, so text on
 * orange is dark ink (--vgp-orange-ink, about 7:1), and orange text on the dark
 * background uses the lighter --bs-link-color (about 7:1).
 */

:root {
	--vgp-orange: #e67b0c;
	--vgp-orange-rgb: 230, 123, 12;
	--vgp-orange-hover: #ff9128;
	--vgp-orange-ink: #1a0e02;
	--vgp-font: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--vgp-radius: 0.625rem;
	--vgp-radius-lg: 0.875rem;
	--vgp-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.45);
	--vgp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--vgp-speed: 0.22s;
	--vgp-header-height: 4rem;

	--bs-font-sans-serif: var(--vgp-font);
	--bs-body-font-family: var(--vgp-font);
	--bs-border-radius: var(--vgp-radius);
	--bs-border-radius-lg: var(--vgp-radius-lg);
}

[data-bs-theme="dark"] {
	color-scheme: dark;

	--vgp-surface: #14171c;
	--vgp-surface-raised: #1a1e24;
	--vgp-surface-hover: #21262e;
	--vgp-hairline: rgba(255, 255, 255, 0.08);
	--vgp-scrim: rgba(9, 10, 12, 0.92);

	--bs-body-bg: #0c0e11;
	--bs-body-bg-rgb: 12, 14, 17;
	--bs-body-color: #e7e9ec;
	--bs-body-color-rgb: 231, 233, 236;
	--bs-emphasis-color: #ffffff;
	--bs-emphasis-color-rgb: 255, 255, 255;
	--bs-secondary-color: rgba(231, 233, 236, 0.7);
	--bs-secondary-color-rgb: 231, 233, 236;
	--bs-tertiary-color: rgba(231, 233, 236, 0.5);
	--bs-secondary-bg: #1a1e24;
	--bs-secondary-bg-rgb: 26, 30, 36;
	--bs-tertiary-bg: #14171c;
	--bs-tertiary-bg-rgb: 20, 23, 28;
	--bs-border-color: #2a2f37;
	--bs-border-color-translucent: rgba(255, 255, 255, 0.1);

	--bs-primary: var(--vgp-orange);
	--bs-primary-rgb: var(--vgp-orange-rgb);
	--bs-primary-text-emphasis: #ffb36b;
	--bs-primary-bg-subtle: rgba(230, 123, 12, 0.14);
	--bs-primary-border-subtle: rgba(230, 123, 12, 0.45);

	--bs-link-color: #f59a3d;
	--bs-link-color-rgb: 245, 154, 61;
	--bs-link-hover-color: #ffbd7a;
	--bs-link-hover-color-rgb: 255, 189, 122;
	--bs-focus-ring-color: rgba(230, 123, 12, 0.45);
}

/*
 * The brand colour on Bootstrap components, through their own component
 * variables (0026: customize with Bootstrap's mechanisms; no rules restyled).
 */
.btn-primary {
	--bs-btn-color: var(--vgp-orange-ink);
	--bs-btn-bg: var(--vgp-orange);
	--bs-btn-border-color: var(--vgp-orange);
	--bs-btn-hover-color: var(--vgp-orange-ink);
	--bs-btn-hover-bg: var(--vgp-orange-hover);
	--bs-btn-hover-border-color: var(--vgp-orange-hover);
	--bs-btn-active-color: var(--vgp-orange-ink);
	--bs-btn-active-bg: #cc6a05;
	--bs-btn-active-border-color: #cc6a05;
	--bs-btn-disabled-color: var(--vgp-orange-ink);
	--bs-btn-disabled-bg: var(--vgp-orange);
	--bs-btn-disabled-border-color: var(--vgp-orange);
	--bs-btn-focus-shadow-rgb: var(--vgp-orange-rgb);
	--bs-btn-font-weight: 600;
}

.btn-outline-primary {
	--bs-btn-color: #f59a3d;
	--bs-btn-border-color: var(--vgp-orange);
	--bs-btn-hover-color: var(--vgp-orange-ink);
	--bs-btn-hover-bg: var(--vgp-orange);
	--bs-btn-hover-border-color: var(--vgp-orange);
	--bs-btn-active-color: var(--vgp-orange-ink);
	--bs-btn-active-bg: #cc6a05;
	--bs-btn-active-border-color: #cc6a05;
	--bs-btn-focus-shadow-rgb: var(--vgp-orange-rgb);
	--bs-btn-font-weight: 600;
}

.table {
	--bs-table-bg: transparent;
	--bs-table-striped-bg: rgba(255, 255, 255, 0.025);
	--bs-table-hover-bg: rgba(255, 255, 255, 0.04);
}

.list-group {
	--bs-list-group-bg: var(--vgp-surface);
	--bs-list-group-action-hover-bg: var(--vgp-surface-hover);
	--bs-list-group-border-color: var(--vgp-hairline);
}

.card {
	--bs-card-bg: var(--vgp-surface);
	--bs-card-border-color: var(--vgp-hairline);
	--bs-card-cap-bg: transparent;
}

.modal {
	--bs-modal-bg: var(--vgp-surface);
	--bs-modal-border-color: var(--vgp-hairline);
}

.dropdown-menu {
	--bs-dropdown-bg: var(--vgp-surface-raised);
	--bs-dropdown-border-color: var(--vgp-hairline);
	--bs-dropdown-link-hover-bg: var(--vgp-surface-hover);
	--bs-dropdown-link-active-bg: var(--vgp-orange);
	--bs-dropdown-link-active-color: var(--vgp-orange-ink);
}

.breadcrumb {
	--bs-breadcrumb-divider-color: var(--bs-tertiary-color);
	--bs-breadcrumb-item-active-color: var(--bs-secondary-color);
}

.pagination {
	--bs-pagination-color: var(--bs-link-color);
	--bs-pagination-bg: var(--vgp-surface);
	--bs-pagination-border-color: var(--vgp-hairline);
	--bs-pagination-hover-color: var(--bs-link-hover-color);
	--bs-pagination-hover-bg: var(--vgp-surface-hover);
	--bs-pagination-hover-border-color: var(--vgp-hairline);
	--bs-pagination-focus-color: var(--bs-link-hover-color);
	--bs-pagination-focus-bg: var(--vgp-surface-hover);
	--bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
	--bs-pagination-active-color: var(--vgp-orange-ink);
	--bs-pagination-active-bg: var(--vgp-orange);
	--bs-pagination-active-border-color: var(--vgp-orange);
	--bs-pagination-disabled-color: var(--bs-tertiary-color);
	--bs-pagination-disabled-bg: var(--vgp-surface);
	--bs-pagination-disabled-border-color: var(--vgp-hairline);
}

.nav-pills {
	--bs-nav-pills-link-active-color: var(--vgp-orange-ink);
	--bs-nav-pills-link-active-bg: var(--vgp-orange);
}

.list-group {
	--bs-list-group-active-color: var(--vgp-orange-ink);
	--bs-list-group-active-bg: var(--vgp-orange);
	--bs-list-group-active-border-color: var(--vgp-orange);
}

.btn-close {
	--bs-btn-close-focus-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

/*
 * Focus and checked states that Bootstrap 5.3 compiles in as its default blue
 * (no component variable exists, and the theme has no Sass build): the same
 * declarations with the brand's focus ring. Only colours change.
 */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
	border-color: var(--vgp-orange);
	box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.nav-link:focus-visible {
	box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

/* Dark ink marks on orange (white is 2.9:1). */
.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
	background-color: var(--vgp-orange);
	border-color: var(--vgp-orange);
}

.form-check-input:checked[type="checkbox"] {
	--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231a0e02' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input:checked[type="radio"] {
	--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%231a0e02'/%3e%3c/svg%3e");
}