/*
 * Mercy Court brand override.
 *
 * Sneat ships with #7367f0 as --bs-primary across light + dark themes.
 * Mercy Court's brand (mercycourt.org) declares its palette in Tailwind:
 *
 *   brand-red    #D95A2B   warm burnt-orange / vermillion
 *   brand-dark   #0A0A0A   near-black
 *   brand-footer #1A1A1A   very dark grey
 *
 * Source fonts: Anton (display) + Lato (body). Both loaded via Google
 * Fonts in views/base.html.
 *
 * This file is included AFTER Sneat's core.css + demo.css so its
 * variable overrides win the cascade.
 */

:root,
[data-bs-theme="light"] {
  /* Primary swatch — Sneat scales the related shades automatically off
     --bs-primary in their custom build, but for our override we set
     the canonical Bootstrap variables that downstream components read. */
  --bs-primary: #D95A2B;
  --bs-primary-rgb: 217, 90, 43;
  --bs-primary-text-emphasis: #8a3a1c;
  --bs-primary-bg-subtle: #fbe4d8;
  --bs-primary-border-subtle: #f3b598;

  --bs-link-color: #D95A2B;
  --bs-link-color-rgb: 217, 90, 43;
  --bs-link-hover-color: #b54620;
  --bs-link-hover-color-rgb: 181, 70, 32;

  /* Sneat's "label" badges + soft-accent backgrounds read this. */
  --bs-primary-rgb-subtle: 251, 228, 216;

  /* Custom var used by .birthday-tile + a couple of other spots. */
  --accent: #D95A2B;
}

[data-bs-theme="dark"] {
  --bs-primary: #E26B3A;          /* slightly brighter so it pops on dark */
  --bs-primary-rgb: 226, 107, 58;
  --bs-primary-text-emphasis: #f5b89c;
  --bs-primary-bg-subtle: #3a1d12;
  --bs-primary-border-subtle: #6b3a25;

  --bs-link-color: #E26B3A;
  --bs-link-color-rgb: 226, 107, 58;
  --bs-link-hover-color: #f08855;
  --bs-link-hover-color-rgb: 240, 136, 85;

  /* Match Mercy Court's deep near-black for the page + card chrome. */
  --bs-body-bg: #0A0A0A;
  --bs-body-bg-rgb: 10, 10, 10;
  --bs-tertiary-bg: #1A1A1A;
  --bs-tertiary-bg-rgb: 26, 26, 26;
  --bs-secondary-bg: #141414;
  --bs-secondary-bg-rgb: 20, 20, 20;

  /* Sneat's card-bg variable powers the chart spinner overlay's
     translucent backdrop and many panels. Pin it to brand-footer. */
  --bs-card-bg: #1A1A1A;

  /* ── Text + border contrast brightening ────────────────────────────
   * Sneat ships dark-mode text colours calibrated for their #2f3349
   * slate background. Against our much-darker #0A0A0A page bg they
   * read as washed-out — especially the chart axis labels, grid
   * lines, and muted helper text. Lift each one a few notches so
   * contrast against pure-black-ish surfaces stays WCAG-readable.
   *
   * Affects: body text, .text-muted, card headers, chart axis labels
   * + tick text + legend text (via Chart.defaults.color in the
   * dashboard JS), chart grid lines (Chart.defaults.borderColor),
   * table borders, form borders.
   */
  --bs-body-color: #e1e1e8;          /* was #acabc1 — much brighter */
  --bs-body-color-rgb: 225, 225, 232;
  --bs-heading-color: #f3f3f7;
  --bs-secondary-color: #a8a8b8;     /* was #76778e — muted but readable */
  --bs-secondary-color-rgb: 168, 168, 184;
  --bs-tertiary-color: rgba(225, 225, 232, 0.55);
  --bs-tertiary-color-rgb: 225, 225, 232;
  --bs-border-color: #3d3d45;        /* was #44485e — clearer chart grid */
  --bs-border-color-translucent: rgba(225, 225, 232, 0.15);
  --bs-emphasis-color: #ffffff;
  --bs-emphasis-color-rgb: 255, 255, 255;

  --accent: #E26B3A;
}

/* ── Components Sneat hard-codes in the demo build ─────────────────── */

/* Primary buttons — Sneat compiles a #7367f0 hex into .btn-primary; the
   var-driven Bootstrap selector below wins because it loads later. */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-link-hover-color);
  --bs-btn-hover-border-color: var(--bs-link-hover-color);
  --bs-btn-active-bg: var(--bs-link-hover-color);
  --bs-btn-active-border-color: var(--bs-link-hover-color);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
}

/* Soft-tint "label" badge variants Sneat ships as bg-label-primary. */
.bg-label-primary {
  background-color: var(--bs-primary-bg-subtle) !important;
  color: var(--bs-primary) !important;
}

/* Active sidebar menu item. */
.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}

/* Avatar tinted circles (sidebar identity, member detail). */
.avatar-initial.bg-label-primary {
  background-color: var(--bs-primary-bg-subtle) !important;
  color: var(--bs-primary) !important;
}

/* ── Theme transition — 200 ms ─────────────────────────────────────── */
/*
 * Without an explicit transition, toggling Light → Dark snaps abruptly.
 * Limit the transition to the colour properties that change (no
 * transitions on layout properties — those would slow scrolling).
 */
html,
body,
.card,
.menu,
.layout-navbar,
.navbar,
.dropdown-menu {
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    color 200ms ease;
}

/* ── Typography ────────────────────────────────────────────────────── */
/*
 * Lato is the body font on mercycourt.org. Inter (Sneat default) is a
 * close cousin — same friendly humanist sans — so users won't see a
 * jarring shift, but Lato matches the church's identity.
 *
 * Anton is the display font, used for headlines and the post-login
 * splash quote. We do NOT swap every <h1>/<h2> to Anton because Sneat's
 * card headers / page titles look better in the body font; Anton is
 * applied via a .brand-display utility class on the surfaces that want it.
 */
body {
  font-family: 'Lato', 'Inter', system-ui, -apple-system,
               'Segoe UI', Roboto, sans-serif;
}

.brand-display {
  font-family: 'Anton', 'Inter', sans-serif;
  letter-spacing: 0.02em;
}

/* ── Native form controls + scrollbar ──────────────────────────────── */
/*
 * Without this, native date pickers / select dropdowns / scrollbars
 * stay in light mode even when data-bs-theme="dark". The standard
 * color-scheme property tells the browser to honour the theme.
 */
:root            { color-scheme: light; }
[data-bs-theme="dark"] { color-scheme: dark; }

/* ── Theme-aware table headers ─────────────────────────────────────── */
/*
 * Bootstrap's .table-light forces a fixed light background that looks
 * out of place in dark mode. Our replacement, .table-themed, follows
 * the theme automatically via existing CSS variables. Applied to the
 * <thead> directly (like .table-light is) for a drop-in swap.
 */
.table-themed {
  background-color: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color) !important;
}