/*
 * Tabletop built-in theme (#713).
 *
 * This is the one place the built-in light ("day") and dark ("slate") palettes
 * live. Both built-in themes load this file; the <html data-bs-theme> value
 * selects the palette. Uploaded Bootstrap themes replace this file entirely and
 * continue to work because style.css only reads Bootstrap variables and the
 * --tt-* tokens below, which fall back to Bootstrap variables when absent.
 *
 * To change the look of Tabletop, edit the token values in the two palette
 * blocks. Do not add module-specific colours here or in module stylesheets;
 * add a token instead. See docs/theming.md.
 *
 * Contrast (WCAG 2.1, normal text; all pass AA 4.5:1):
 *   light: body on page 15.0:1, muted on card 5.8:1, white on accent 7.9:1,
 *          link on card 7.9:1, header text on navy 14.5:1, stat colours >= 5.0:1
 *   dark:  body on page 15.9:1, muted on card 7.8:1, white on accent 5.2:1,
 *          link on card 8.5:1, stat colours >= 7.3:1
 */

/* Light: cohesive navy/blue accents on a cool, layered canvas. */
:root, [data-bs-theme="light"] {
    --bs-body-bg: #f4f6fb;
    --bs-body-bg-rgb: 244, 246, 251;
    --bs-body-color: #172033;
    --bs-body-color-rgb: 23, 32, 51;
    --bs-emphasis-color: #0b1220;
    --bs-secondary-color: #5b6678;
    --bs-secondary-bg: #eef2f8;
    --bs-tertiary-bg: #e3e9f2;
    --bs-border-color: #d8e0eb;
    --bs-border-color-translucent: rgba(20, 40, 75, 0.12);
    --bs-heading-color: #0f1a30;

    --bs-primary: #1d4f9e;
    --bs-primary-rgb: 29, 79, 158;
    --bs-primary-text-emphasis: #173f7e;
    --bs-primary-bg-subtle: #e6eefb;
    --bs-primary-border-subtle: #b9cdee;
    --bs-info: #0b7fab;
    --bs-info-rgb: 11, 127, 171;
    --bs-link-color: #1d4f9e;
    --bs-link-color-rgb: 29, 79, 158;
    --bs-link-hover-color: #12346b;
    --bs-link-hover-color-rgb: 18, 52, 107;
    --bs-focus-ring-color: rgba(29, 79, 158, 0.3);

    --tt-accent: #1d4f9e;
    --tt-accent-rgb: 29, 79, 158;
    --tt-accent-hover: #173f7e;
    --tt-accent-active: #12346b;
    --tt-on-accent: #ffffff;
    --tt-accent-subtle: #e6eefb;
    --tt-accent-text: #173f7e;

    --tt-canvas: radial-gradient(1100px 380px at 10% -120px, rgba(29, 79, 158, 0.10), transparent 70%),
                 linear-gradient(180deg, #edf2fa 0, #f4f6fb 420px);
    --tt-surface: #ffffff;
    --tt-surface-raised: #ffffff;
    --tt-surface-muted: #f6f8fc;
    --tt-input-bg: #ffffff;
    --tt-border-subtle: rgba(15, 30, 60, 0.08);

    --tt-header-bg: linear-gradient(100deg, #0f2246 0%, #17366f 100%);
    --tt-header-color: #f3f6fc;
    --tt-header-muted: rgba(243, 246, 252, 0.4);
    --tt-header-accent: transparent;

    --tt-stat-1: #1d4f9e;
    --tt-stat-2: #5b47d6;
    --tt-stat-3: #b45309;
    --tt-stat-4: #15803d;

    --tt-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 2px 8px rgba(16, 24, 40, 0.05);
    --tt-shadow: 0 10px 30px rgba(16, 24, 40, 0.14);
    --tt-shadow-hover: 0 4px 10px rgba(16, 24, 40, 0.07), 0 14px 28px rgba(16, 24, 40, 0.09);
    --tt-focus-color: #1d4f9e;
}

/* Dark: vivid blue accents on deep ink surfaces. */
[data-bs-theme="dark"] {
    --bs-body-bg: #0b1220;
    --bs-body-bg-rgb: 11, 18, 32;
    --bs-body-color: #e6edf7;
    --bs-body-color-rgb: 230, 237, 247;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: #9fb0c8;
    --bs-secondary-bg: #172238;
    --bs-tertiary-bg: #1e2a42;
    --bs-border-color: #26344e;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.1);
    --bs-heading-color: #f5f8fd;

    --bs-primary: #2563eb;
    --bs-primary-rgb: 37, 99, 235;
    --bs-primary-text-emphasis: #8ab8ff;
    --bs-primary-bg-subtle: #14264a;
    --bs-primary-border-subtle: #1f3d75;
    --bs-secondary: #64748b;
    --bs-secondary-rgb: 100, 116, 139;
    --bs-success: #22c55e;
    --bs-success-rgb: 34, 197, 94;
    --bs-info: #38bdf8;
    --bs-info-rgb: 56, 189, 248;
    --bs-warning: #f59e0b;
    --bs-warning-rgb: 245, 158, 11;
    --bs-danger: #ef4444;
    --bs-danger-rgb: 239, 68, 68;
    --bs-link-color: #8ab8ff;
    --bs-link-color-rgb: 138, 184, 255;
    --bs-link-hover-color: #b4d1ff;
    --bs-link-hover-color-rgb: 180, 209, 255;
    --bs-focus-ring-color: rgba(96, 165, 250, 0.4);

    --tt-accent: #2563eb;
    --tt-accent-rgb: 37, 99, 235;
    --tt-accent-hover: #1d4ed8;
    --tt-accent-active: #1e40af;
    --tt-on-accent: #ffffff;
    --tt-accent-subtle: #14264a;
    --tt-accent-text: #8ab8ff;

    --tt-canvas: radial-gradient(1000px 420px at 15% -140px, rgba(37, 99, 235, 0.22), transparent 70%),
                 radial-gradient(800px 360px at 100% -160px, rgba(91, 71, 214, 0.14), transparent 70%);
    --tt-surface: #111b2e;
    --tt-surface-raised: #152036;
    --tt-surface-muted: #0e1728;
    --tt-input-bg: #0c1424;
    --tt-border-subtle: rgba(255, 255, 255, 0.07);

    --tt-header-bg: linear-gradient(100deg, #0a1120 0%, #101a30 100%);
    --tt-header-color: #eef3fb;
    --tt-header-muted: rgba(238, 243, 251, 0.3);
    --tt-header-accent: rgba(255, 255, 255, 0.07);

    --tt-stat-1: #8ab8ff;
    --tt-stat-2: #a99cff;
    --tt-stat-3: #fbbf24;
    --tt-stat-4: #4ade80;

    --tt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --tt-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    --tt-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.45);
    --tt-focus-color: #60a5fa;
}

/*
 * Bootstrap components compile their accent colours as literals, so the
 * built-in theme maps them to the tokens once here. Uploaded themes ship their
 * own compiled component colours and never load this file.
 */
.btn-primary {
    --bs-btn-color: var(--tt-on-accent);
    --bs-btn-bg: var(--tt-accent);
    --bs-btn-border-color: var(--tt-accent);
    --bs-btn-hover-color: var(--tt-on-accent);
    --bs-btn-hover-bg: var(--tt-accent-hover);
    --bs-btn-hover-border-color: var(--tt-accent-hover);
    --bs-btn-focus-shadow-rgb: var(--tt-accent-rgb);
    --bs-btn-active-color: var(--tt-on-accent);
    --bs-btn-active-bg: var(--tt-accent-active);
    --bs-btn-active-border-color: var(--tt-accent-active);
    --bs-btn-disabled-color: var(--tt-on-accent);
    --bs-btn-disabled-bg: var(--tt-accent);
    --bs-btn-disabled-border-color: var(--tt-accent);
}
.btn-outline-primary {
    --bs-btn-color: var(--tt-accent-text);
    --bs-btn-border-color: var(--tt-accent);
    --bs-btn-hover-color: var(--tt-on-accent);
    --bs-btn-hover-bg: var(--tt-accent);
    --bs-btn-hover-border-color: var(--tt-accent);
    --bs-btn-focus-shadow-rgb: var(--tt-accent-rgb);
    --bs-btn-active-color: var(--tt-on-accent);
    --bs-btn-active-bg: var(--tt-accent-active);
    --bs-btn-active-border-color: var(--tt-accent-active);
    --bs-btn-disabled-color: var(--tt-accent-text);
    --bs-btn-disabled-border-color: var(--tt-accent);
}
.btn-link {
    --bs-btn-color: var(--bs-link-color);
    --bs-btn-hover-color: var(--bs-link-hover-color);
    --bs-btn-active-color: var(--bs-link-hover-color);
}
.form-check-input:checked {
    background-color: var(--tt-accent);
    border-color: var(--tt-accent);
}
.form-check-input:focus, .form-range:focus::-webkit-slider-thumb {
    border-color: var(--tt-accent);
    box-shadow: 0 0 0 0.25rem rgba(var(--tt-accent-rgb), 0.25);
}
.form-range::-webkit-slider-thumb { background-color: var(--tt-accent); }
.form-range::-moz-range-thumb { background-color: var(--tt-accent); }
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--tt-accent);
    --bs-nav-pills-link-active-color: var(--tt-on-accent);
}
.nav { --bs-nav-link-color: var(--bs-link-color); --bs-nav-link-hover-color: var(--bs-link-hover-color); }
.pagination {
    --bs-pagination-color: var(--bs-link-color);
    --bs-pagination-hover-color: var(--bs-link-hover-color);
    --bs-pagination-focus-color: var(--bs-link-hover-color);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--tt-accent-rgb), 0.25);
    --bs-pagination-active-color: var(--tt-on-accent);
    --bs-pagination-active-bg: var(--tt-accent);
    --bs-pagination-active-border-color: var(--tt-accent);
}
.dropdown-menu {
    --bs-dropdown-link-active-color: var(--tt-on-accent);
    --bs-dropdown-link-active-bg: var(--tt-accent);
}
.list-group {
    --bs-list-group-active-color: var(--tt-on-accent);
    --bs-list-group-active-bg: var(--tt-accent);
    --bs-list-group-active-border-color: var(--tt-accent);
}
.progress, .progress-stacked { --bs-progress-bar-bg: var(--tt-accent); --bs-progress-bar-color: var(--tt-on-accent); }
.accordion {
    --bs-accordion-active-color: var(--tt-accent-text);
    --bs-accordion-active-bg: var(--tt-accent-subtle);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--tt-accent-rgb), 0.25);
}
.text-bg-primary { color: var(--tt-on-accent) !important; background-color: var(--tt-accent) !important; }

/* The light theme's navy header needs Bootstrap's light-on-dark toggler icon. */
[data-bs-theme="light"] .site-header .navbar {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28241, 245, 251, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --bs-navbar-toggler-border-color: var(--tt-header-muted);
}

/* Bootstrap draws accordion chevrons as SVG data with literal colours. */
[data-bs-theme="dark"] .accordion .accordion-button::after {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239fb0c8' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238ab8ff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}
[data-bs-theme="light"] .accordion .accordion-button::after {
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23173f7e' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}