/* ==========================================================================
   brdweb — theme.css (base)
   Purpose:
   - Core tokens, base typography, neutral components
   - Nav hover/active/underline lives in overrides.css
   - Button system driven by CSS custom properties (easy theming)
   ========================================================================== */

/* 1) Core tokens / variables ---------------------------------------------- */
:root,
[data-bs-theme="default-theme"] {
  /* Brand palette (single-accent) */
  --brand-blue: #233164;             /* BRD Blue */
  --brand-blue-600: #1f2a55;         /* darker tone for focus/active */
  --brand-blue-700: #1a2448;         /* optional darker tone */

  /* Bootstrap semantics */
  --bs-primary: var(--brand-blue);
  --bs-secondary: #edf1f7;           /* gentle neutral */
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;

  /* Body + page (note: site-level override of body bg is in overrides.css) */
  --bs-body-bg: #ffffff;
  --bs-body-color: #111827;
  --theme-page-main-bg: var(--bs-body-bg);

  /* Links / accents */
  --theme-link-color: var(--brand-blue);
  --active-accent: var(--brand-blue);

  /* Radii & shadows */
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1rem;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --shadow-md: 0 2px 4px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);

  /* Footer (overridable in overrides.css) */
  --theme-footer-bg: var(--bs-primary);
  --theme-footer-fg: #ffffff;

  /* ---------------- Button System (globals) ---------------- */
  --btn-radius: .5rem;
  --btn-font-weight: 600;
  --btn-py: .55rem;        /* vertical padding */
  --btn-px: 1rem;          /* horizontal padding */
  --btn-shadow-focus: 0 0 0 .2rem color-mix(in srgb, var(--bs-primary) 25%, transparent);
  --btn-transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;

  /* Primary palette (filled + outline) */
  --btn-primary-bg: var(--bs-primary);
  --btn-primary-border: var(--bs-primary);
  --btn-primary-fg: #fff;
  --btn-primary-bg-hover: color-mix(in srgb, var(--bs-primary) 92%, #ffffff 8%);
  --btn-primary-border-hover: var(--bs-primary);

  --btn-outline-primary-fg: var(--bs-primary);
  --btn-outline-primary-border: var(--bs-primary);
  --btn-outline-primary-bg-hover: var(--bs-primary);
  --btn-outline-primary-fg-hover: #fff;

  /* Secondary (neutral) */
  --btn-secondary-fg: #111827;
  --btn-secondary-bg: #E7EAEE;      /* soft neutral block button */
  --btn-secondary-border: #D3D7DE;
  --btn-secondary-bg-hover: #DEE2E8;
  --btn-secondary-border-hover: #C9CED7;
}

/* 2) Base / typography ----------------------------------------------------- */
html { scroll-behavior: smooth; }
body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 3) Links ----------------------------------------------------------------- */
a { color: var(--theme-link-color); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

/* 4) Buttons (custom-properties driven) ----------------------------------- */
.btn {
  --_bg: #f8f9fa;
  --_fg: #111827;
  --_bd: transparent;
  display: inline-block;
  font-weight: var(--btn-font-weight);
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--btn-radius);
  border: 1px solid var(--_bd);
  color: var(--_fg);
  background-color: var(--_bg);
  transition: var(--btn-transition);
  line-height: 1.25;
  text-align: center;
  vertical-align: middle;
}
.btn:focus-visible { outline: 0; box-shadow: var(--btn-shadow-focus); }

.btn-primary {
  --_bg: var(--btn-primary-bg);
  --_bd: var(--btn-primary-border);
  --_fg: var(--btn-primary-fg);
}
.btn-primary:hover, .btn-primary:focus {
  --_bg: var(--btn-primary-bg-hover);
  --_bd: var(--btn-primary-border-hover);
}

.btn-outline-primary {
  --_bg: transparent;
  --_bd: var(--btn-outline-primary-border);
  --_fg: var(--btn-outline-primary-fg);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  --_bg: var(--btn-outline-primary-bg-hover);
  --_fg: var(--btn-outline-primary-fg-hover);
}

.btn-secondary {
  --_bg: var(--btn-secondary-bg);
  --_bd: var(--btn-secondary-border);
  --_fg: var(--btn-secondary-fg);
}
.btn-secondary:hover, .btn-secondary:focus {
  --_bg: var(--btn-secondary-bg-hover);
  --_bd: var(--btn-secondary-border-hover);
}

/* Utility: pill buttons if needed */
.btn-pill { border-radius: 999px; }

/* 5) Navbar (neutral; behaviors in overrides.css) ------------------------- */
.navbar { box-shadow: var(--shadow-md); }
.navbar .navbar-brand,
.navbar .navbar-brand:focus,
.navbar .navbar-brand:hover {
  color: var(--bs-primary);
  text-decoration: none;
}
.navbar .nav-link {
  color: #1f2937;
  padding: .5rem .75rem; /* underline/active handled in overrides.css */
  border-radius: var(--radius-sm);
}

/* 6) Dropdowns ------------------------------------------------------------- */
.dropdown-menu {
  background-color: #fff;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: var(--radius-sm);
  padding: .5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.dropdown-item {
  color: #111827;
  border-radius: var(--radius-sm);
  padding: .5rem .75rem;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
  color: var(--bs-primary);
}
.dropdown-item.active, .dropdown-item[aria-current="page"] {
  background: color-mix(in srgb, var(--bs-primary) 18%, transparent);
  color: var(--bs-primary);
  font-weight: 700;
}

/* 7) Cards ----------------------------------------------------------------- */
.card {
  border: 1px solid rgba(17,24,39,.08);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* 8) Utility chips --------------------------------------------------------- */
.brd-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bs-primary) 10%, transparent);
  color: #1f2937;
}
.brd-pill.is-active {
  background: color-mix(in srgb, var(--bs-primary) 18%, transparent);
  color: var(--bs-primary);
  font-weight: 700;
}

/* 9) Focus visibility ------------------------------------------------------ */
:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--bs-primary) 55%, transparent);
  outline-offset: 2px;
}

/* 10) Footer (base; site-specific in overrides.css) ------------------------ */
.site-footer {
  background: var(--theme-footer-bg);
  color: var(--theme-footer-fg);
  padding: 2rem 0;
}
.site-footer a { color: #e5e7eb; }
.site-footer a:hover { color: #fff; }

/* 11) DDRMenu parity (if used) -------------------------------------------- */
.DDRMenu ul { list-style: none; margin: 0; padding: 0; }
.DDRMenu > ul { display: flex; gap: .25rem; align-items: center; }
.DDRMenu > ul > li > a {
  display: block;
  padding: .5rem .75rem;
  border-radius: var(--radius-sm);
  color: #1f2937;
}
.DDRMenu > ul > li > a:hover,
.DDRMenu > ul > li > a:focus {
  background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
  color: var(--bs-primary);
}
.DDRMenu > ul > li.selected > a {
  background: color-mix(in srgb, var(--bs-primary) 18%, transparent);
  color: var(--bs-primary);
  font-weight: 700;
}

/* 12) Page regions --------------------------------------------------------- */
#theme-page-main { background: var(--theme-page-main-bg); }

/* 13) Motion preferences --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}