/*
 * vocaid-theme.css — Vocaid brand override for Dribdat, loaded via the
 * upstream DRIBDAT_STYLE hook (dribdat/settings.py:
 * `DRIBDAT_STYLE = os_env.get("DRIBDAT_STYLE", "")`).
 *
 * dribdat/templates/layout.html renders this as the LAST stylesheet <link>
 * in <head> — after the Bootswatch theme link (DRIBDAT_THEME, "brite" by
 * default), flipdown/font-awesome/simplelightbox, and Dribdat's own
 * "css_all" asset bundle — so plain selectors at matching specificity are
 * enough to win on source order. Verified directly against the pinned
 * `dribdat/dribdat:v0.9.4` image this integration builds on (see
 * Dockerfile.dribdat): settings.py confirms `DRIBDAT_THEME` defaults to
 * "brite" and Bootstrap is 5.1 (layout.html's prod CDN script tag pins
 * `bootstrap@5.1`). Bootstrap 5.1 does not wire component colors (buttons,
 * nav) through CSS custom properties, so this file overrides literal
 * properties on real selectors rather than redefining Bootstrap variables.
 * Utility classes (.text-primary/.bg-primary/.border-primary) DO compile
 * with `!important` in Bootstrap 5's utilities API, so those three need
 * `!important` here too or the override is silently dropped.
 *
 * Color values mirror design-system/tokens/design-tokens.json — the same
 * literal hex values already mirrored (as --vocaid-primary /
 * --vocaid-primary-dark) in Janeway's sibling override at
 * themes/vocaid/assets/css/vocaid.css, integrated the same way.
 * Hover/focus/active states use primary-dark rather than primary-hover
 * (#8b5cf6), matching that file's documented reasoning: white button text on
 * primary-hover falls below WCAG AA contrast.
 *
 * Scope: primary/accent color, link color, primary button background, and
 * the page background (surface-raised, so the framed event page reads as
 * part of the app shell — the Vocaid client's AppShell paints
 * bg-surface-raised around this frame) — not a redesign. No typography,
 * layout, or other color changes.
 */

:root {
  --vocaid-primary: #7c3aed; /* color.brand.primary (design-tokens.json) */
  --vocaid-primary-dark: #6d28d9; /* color.brand.primary-dark (design-tokens.json) */
  /* color.surface.* (design-tokens.json) — the AppShell canvas is
     bg-surface-raised; the frame must blend with it, not flash white. */
  --vocaid-surface: #ffffff;
  --vocaid-surface-raised: #fafafa;
  --vocaid-surface-sunken: #f5f5f5;
}

/* Page background — AppShell parity. Bootstrap 5.1's body rule sets
   background-color on `body`; same selector + later source order wins. */
body {
  background-color: var(--vocaid-surface-raised);
}

/* Links */
a {
  color: var(--vocaid-primary);
}

a:hover,
a:focus {
  color: var(--vocaid-primary-dark);
}

/* Primary buttons — confirmed live in dribdat/templates/macros/_form.html
   and dribdat/templates/public/login.html (.btn.btn-primary submit/sign-in
   buttons) in the pinned v0.9.4 image. */
.btn-primary {
  background-color: var(--vocaid-primary);
  border-color: var(--vocaid-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--vocaid-primary-dark);
  border-color: var(--vocaid-primary-dark);
}

/* Outline variant ("and similar", per task brief) — same buttons family. */
.btn-outline-primary {
  color: var(--vocaid-primary);
  border-color: var(--vocaid-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  color: #fff;
  background-color: var(--vocaid-primary);
  border-color: var(--vocaid-primary);
}

/* Bootstrap 5 color utilities — compiled with !important by default. */
.text-primary {
  color: var(--vocaid-primary) !important;
}

.bg-primary {
  background-color: var(--vocaid-primary) !important;
}

.border-primary {
  border-color: var(--vocaid-primary) !important;
}

/* Nav accent — dribdat/templates/includes/nav.html's .navbar is
   .navbar-light, so .nav-link's resting color already comes from Bootswatch;
   only the interactive/active states get the brand color. Bootstrap's own
   .nav-link rule is more specific than a bare `a`, so this needs its own
   selector rather than relying on the `a` rule above. */
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
  color: var(--vocaid-primary);
}