/*
 * bridge.css — themes stock Bootstrap 5.3 from the --owai-* token contract.
 *
 * Maps Bootstrap's own CSS custom properties (--bs-*) onto our design tokens, so
 * Bootstrap is re-skinned without forking or rebuilding it: body typography and
 * background, link colour, .btn-primary, form focus/checked states, dropdown
 * active state. Nothing here is brand-specific — change tokens.css and the whole
 * of Bootstrap follows.
 *
 * Note the `color-mix(in srgb, var(--owai-brand) N%, transparent)` idiom used
 * throughout: every tint and alpha in the system derives from the one brand hue,
 * so there are no hard-coded shades to keep in sync.
 *
 * Load order: must come AFTER bootstrap.min.css (it overrides same-specificity
 * element rules such as `a { color }`). Order relative to the token file does
 * not matter (custom properties resolve at computed-value time).
 */

/* ---- Global Bootstrap theme hooks ------------------------------------- */
:root {
    --bs-body-font-family: var(--owai-font-ui);
    --bs-body-bg: var(--owai-canvas);
    --bs-body-color: var(--owai-ink);
    --bs-heading-color: var(--owai-ink-strong);
    --bs-border-color: var(--owai-border);
    --bs-border-radius: var(--owai-radius-control);
    /* Non-rgb link vars feed .nav, .pagination, .btn-link component vars. */
    --bs-link-color: var(--owai-brand);
    --bs-link-hover-color: var(--owai-brand-deep);
}

/* Bootstrap 5.3 paints anchors via rgba(var(--bs-link-color-rgb), ...), which
   needs an R,G,B triplet the hex tokens cannot supply — override directly. */
a {
    color: var(--owai-brand);
}

a:hover {
    color: var(--owai-brand-deep);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--owai-font-display);
}

/* ---- Buttons ----------------------------------------------------------- */
.btn {
    --bs-btn-border-radius: var(--owai-radius-control);
}

.btn-primary {
    --bs-btn-bg: var(--owai-brand);
    --bs-btn-border-color: var(--owai-brand);
    --bs-btn-hover-bg: var(--owai-brand-deep);
    --bs-btn-hover-border-color: var(--owai-brand-deep);
    --bs-btn-active-bg: var(--owai-brand-deep);
    --bs-btn-active-border-color: var(--owai-brand-deep);
    --bs-btn-disabled-bg: var(--owai-brand);
    --bs-btn-disabled-border-color: var(--owai-brand);
}

/* --bs-btn-focus-shadow-rgb also needs a triplet; supply the ring directly. */
.btn-primary:focus-visible,
.btn-primary:active:focus-visible {
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--owai-brand) 32%, transparent);
}

/* ---- Text utility (uses --bs-primary-rgb triplet internally) ----------- */
.text-primary {
    color: var(--owai-brand) !important;
}

/* ---- Forms -------------------------------------------------------------- */
.form-control:focus,
.form-select:focus {
    border-color: var(--owai-brand);
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--owai-brand) 18%, transparent);
}

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

.form-check-input:focus {
    border-color: var(--owai-brand);
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--owai-brand) 18%, transparent);
}

/* ---- Dropdowns (header account menu) ------------------------------------ */
.dropdown-menu {
    --bs-dropdown-border-color: var(--owai-border);
    --bs-dropdown-border-radius: var(--owai-radius-control);
    --bs-dropdown-link-hover-bg: var(--owai-brand-tint);
    --bs-dropdown-link-active-color: var(--owai-ink-strong);
    --bs-dropdown-link-active-bg: var(--owai-brand-tint);
}

/* ---- Pagination (search/rankings result paging) -------------------------- */
.pagination {
    --bs-pagination-active-bg: var(--owai-brand);
    --bs-pagination-active-border-color: var(--owai-brand);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--owai-brand) 18%, transparent);
}