/* Copyright 2026 Frae Futuretech Private Limited — All Rights Reserved (Proprietary)
 *
 * SITE-5 — the theme bridge: our six devotional token sets mapped onto
 * Bootstrap 5.3's CSS variables, so every Bootstrap component wears the
 * ACTIVE theme (brief §0). Bootstrap's dist ships compiled default colors
 * both at :root and inside each component's own variable block, so the
 * mapping happens at BOTH levels: the body-level tokens here, and the
 * component-level variables (buttons, navbar, dropdowns, cards, lists,
 * forms, breadcrumbs) below. Derived shades (hover/active) come from
 * color-mix() over the same tokens — no second palette exists.
 *
 * ⛔ NO raw hex in this file: site_themes.css is the only legal home for
 * hex, and tests/test_theme_contrast.py sweeps this file too. Logical
 * properties only (tests/test_rtl_and_languages.py sweeps this file).
 */

/* ── body-level: Bootstrap's global tokens read ours ────────────────── */
.vk-site {
    --bs-body-bg: var(--vk-bg);
    --bs-body-color: var(--vk-ink);
    --bs-emphasis-color: var(--vk-ink);
    --bs-secondary-color: var(--vk-muted);
    --bs-secondary-bg: var(--vk-surface);
    --bs-tertiary-bg: var(--vk-surface);
    --bs-tertiary-color: var(--vk-muted);
    --bs-heading-color: var(--vk-ink);
    --bs-border-color: var(--vk-border);
    --bs-link-color: var(--vk-link);
    --bs-link-hover-color: color-mix(in srgb, var(--vk-link) 78%, black);
    --bs-primary: var(--vk-accent);
    --bs-body-font-family: 'Vaikunth Sans', system-ui, sans-serif;
    --bs-body-line-height: 1.6;
}

/* Anchors: 5.3's `a` rule reads an rgb-triplet variable the hex tokens
 * cannot feed, so CONTENT links are asserted directly off the token —
 * scoped to the main column and excluding .btn, so component-owned
 * colors (buttons, nav-links, dropdown items, footer) keep their own
 * variables. */
.vk-main a:not(.btn) { color: var(--vk-link); }
.vk-main a:not(.btn):hover { color: color-mix(in srgb, var(--vk-link) 78%, black); }

/* Visible keyboard focus, theme-coloured, everywhere. */
.vk-site :focus-visible {
    outline: 2px solid var(--vk-link);
    outline-offset: 2px;
}

/* ── buttons ────────────────────────────────────────────────────────── */
.vk-site .btn-primary {
    --bs-btn-color: var(--vk-accent-ink);
    --bs-btn-bg: var(--vk-accent);
    --bs-btn-border-color: var(--vk-accent);
    --bs-btn-hover-color: var(--vk-accent-ink);
    --bs-btn-hover-bg: color-mix(in srgb, var(--vk-accent) 86%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--vk-accent) 82%, black);
    --bs-btn-active-color: var(--vk-accent-ink);
    --bs-btn-active-bg: color-mix(in srgb, var(--vk-accent) 78%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--vk-accent) 74%, black);
    --bs-btn-disabled-color: var(--vk-accent-ink);
    --bs-btn-disabled-bg: color-mix(in srgb, var(--vk-accent) 55%, var(--vk-bg));
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--vk-accent) 35%, transparent);
}

/* The accent ghost/outline button (gallery teaser, secondary CTAs). */
.vk-site .btn-outline-primary {
    --bs-btn-color: var(--vk-link);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: color-mix(in srgb, var(--vk-accent) 55%, var(--vk-border));
    --bs-btn-hover-color: var(--vk-accent-ink);
    --bs-btn-hover-bg: var(--vk-accent);
    --bs-btn-hover-border-color: var(--vk-accent);
    --bs-btn-active-color: var(--vk-accent-ink);
    --bs-btn-active-bg: color-mix(in srgb, var(--vk-accent) 86%, black);
    --bs-btn-active-border-color: var(--vk-accent);
    --bs-btn-disabled-color: var(--vk-muted);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--vk-border);
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--vk-accent) 30%, transparent);
}

/* The quiet outline (Staff login): border-token frame, ink text. */
.vk-site .btn-outline-secondary {
    --bs-btn-color: var(--vk-muted);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--vk-border);
    --bs-btn-hover-color: var(--vk-link);
    --bs-btn-hover-bg: color-mix(in srgb, var(--vk-surface) 65%, var(--vk-bg));
    --bs-btn-hover-border-color: var(--vk-border);
    --bs-btn-active-color: var(--vk-link);
    --bs-btn-active-bg: var(--vk-bg);
    --bs-btn-active-border-color: var(--vk-border);
    --bs-btn-disabled-color: var(--vk-muted);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--vk-border);
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--vk-muted) 25%, transparent);
}

/* ── navbar ─────────────────────────────────────────────────────────── */
.vk-site .navbar {
    --bs-navbar-color: var(--vk-ink);
    --bs-navbar-hover-color: var(--vk-link);
    --bs-navbar-active-color: var(--vk-link);
    --bs-navbar-disabled-color: var(--vk-muted);
    --bs-navbar-brand-color: var(--vk-ink);
    --bs-navbar-brand-hover-color: var(--vk-ink);
    --bs-navbar-toggler-border-color: var(--vk-border);
    --bs-navbar-toggler-focus-width: 0.2rem;
}

/* ── dropdowns ──────────────────────────────────────────────────────── */
.vk-site .dropdown-menu {
    --bs-dropdown-bg: var(--vk-surface);
    --bs-dropdown-color: var(--vk-ink);
    --bs-dropdown-border-color: var(--vk-border);
    --bs-dropdown-link-color: var(--vk-ink);
    --bs-dropdown-link-hover-color: var(--vk-link);
    --bs-dropdown-link-hover-bg: var(--vk-bg);
    --bs-dropdown-link-active-color: var(--vk-accent-ink);
    --bs-dropdown-link-active-bg: var(--vk-accent);
    --bs-dropdown-header-color: var(--vk-muted);
}

/* ── cards ──────────────────────────────────────────────────────────── */
.vk-site .card {
    --bs-card-bg: var(--vk-surface);
    --bs-card-color: var(--vk-ink);
    --bs-card-border-color: var(--vk-border);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-color: var(--vk-ink);
}

/* ── list groups (notices) ──────────────────────────────────────────── */
.vk-site .list-group {
    --bs-list-group-bg: var(--vk-surface);
    --bs-list-group-color: var(--vk-ink);
    --bs-list-group-border-color: var(--vk-border);
    --bs-list-group-action-color: var(--vk-ink);
    --bs-list-group-action-hover-color: var(--vk-link);
    --bs-list-group-action-hover-bg: var(--vk-bg);
    --bs-list-group-action-active-color: var(--vk-link);
    --bs-list-group-action-active-bg: var(--vk-bg);
}

/* ── tables ─────────────────────────────────────────────────────────── */
.vk-site .table {
    --bs-table-bg: var(--vk-surface);
    --bs-table-color: var(--vk-ink);
    --bs-table-border-color: var(--vk-border);
    --bs-table-striped-bg: color-mix(in srgb, var(--vk-surface) 55%, var(--vk-bg));
    --bs-table-striped-color: var(--vk-ink);
    --bs-table-hover-bg: color-mix(in srgb, var(--vk-surface) 45%, var(--vk-bg));
    --bs-table-hover-color: var(--vk-ink);
}

/* ── breadcrumbs ────────────────────────────────────────────────────── */
.vk-site .breadcrumb {
    --bs-breadcrumb-divider-color: var(--vk-muted);
    --bs-breadcrumb-item-active-color: var(--vk-muted);
}

/* ── forms (the contact form's floating labels) ─────────────────────── */
.vk-site .form-control,
.vk-site .form-select {
    background-color: var(--vk-surface);
    color: var(--vk-ink);
    border-color: var(--vk-border);
}
.vk-site .form-control:focus,
.vk-site .form-select:focus {
    background-color: var(--vk-surface);
    color: var(--vk-ink);
    border-color: color-mix(in srgb, var(--vk-accent) 55%, var(--vk-border));
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--vk-accent) 22%, transparent);
}
.vk-site .form-control::placeholder { color: var(--vk-muted); }
.vk-site .form-floating > label { color: var(--vk-muted); }
/* 5.3 paints the floated label's backdrop with a compiled default —
 * re-ground it on the surface token so it never flashes white-on-dark. */
.vk-site .form-floating > .form-control:focus ~ label::after,
.vk-site .form-floating > .form-control:not(:placeholder-shown) ~ label::after {
    background-color: var(--vk-surface);
}

/* ── alerts (form errors / success) ─────────────────────────────────── */
.vk-site .alert-warning {
    --bs-alert-bg: var(--vk-accent-soft);
    --bs-alert-color: var(--vk-ink);
    --bs-alert-border-color: color-mix(in srgb, var(--vk-accent) 40%, var(--vk-border));
}
.vk-site .alert-success {
    --bs-alert-bg: var(--vk-surface);
    --bs-alert-color: var(--vk-ink);
    --bs-alert-border-color: var(--vk-border);
}