/* Juniper palette: foliage green (brand/primary), juniper-berry blue
   (accent/interactive), immature-berry purple (secondary highlights).
   Layout (grid/cards/tables/badges) comes from Bootstrap, vendored in
   public/vendor/bootstrap/ — this file retheme's it to the juniper
   palette via Bootstrap's own CSS custom properties, plus a handful of
   one-off components (chips, vote pills) Bootstrap doesn't provide.
   Non-color spacing/shadow/radius tokens come from Open Props, vendored
   in public/vendor/open-props/. */

:root {
  color-scheme: light;

  /* Brand — juniper foliage green */
  --brand-100: #dfe9d6;
  --brand-300: #a9c496;
  --brand-500: #5c7f49;
  --brand-600: #4a6a3a;
  --brand-700: #3a542d;
  --brand-900: #22331a;

  /* Accent — juniper berry blue (the powdery bloom on a ripe berry) */
  --accent-100: #e2ebf1;
  --accent-300: #a9c4d8;
  --accent-500: #5c86a3;
  --accent-600: #476c87;
  --accent-700: #375467;

  /* Secondary — immature (unripe) berry purple */
  --secondary-100: #ece1ea;
  --secondary-300: #c9a3c1;
  --secondary-500: #8f5c85;
  --secondary-600: #74476b;

  /* Semantic tokens */
  --bg: #f6f7f2;
  --card: #ffffff;
  --ink: #202a1d;
  --muted: #6b7566;
  --line: #dde3d3;
  --link: var(--accent-600);
  --link-hover: var(--accent-700);
  --focus-ring: var(--accent-500);

  /* Retheme Bootstrap to match */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--ink);
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--muted);
  --bs-border-color: var(--line);
  --bs-border-color-translucent: var(--line);
  --bs-heading-color: var(--brand-700);
  --bs-font-sans-serif: "Inter", system-ui, sans-serif;
  --bs-link-color: var(--link);
  --bs-link-color-rgb: 71, 108, 135;
  --bs-link-hover-color: var(--link-hover);
  --bs-link-hover-color-rgb: 55, 84, 103;
  --bs-primary: var(--brand-600);
  --bs-primary-rgb: 74, 106, 58;
  --bs-secondary: var(--muted);
  --bs-success: var(--brand-600);
  --bs-success-rgb: 74, 106, 58;
  --bs-danger: var(--secondary-600);
  --bs-danger-rgb: 116, 71, 107;
  --bs-card-bg: var(--card);
  --bs-card-border-color: var(--line);
  --bs-card-box-shadow: var(--shadow-2);
  --bs-table-bg: var(--card);
  --bs-table-hover-bg: var(--accent-100);
  --bs-table-hover-color: var(--ink);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #141a11;
    --card: #1c2418;
    --ink: #e9efe3;
    --muted: #9aa593;
    --line: #2c3626;
    --brand-100: #2a3722;
    --brand-300: #4a6a3a;
    --brand-500: #8fb277;
    --brand-600: #a9c496;
    --brand-700: #c3d9b3;
    --accent-100: #24313b;
    --accent-300: #476c87;
    --accent-500: #8fb4cc;
    --accent-600: #a9c4d8;
    --accent-700: #c6dae7;
    --secondary-100: #332a31;
    --secondary-300: #74476b;
    --secondary-500: #c793bd;
    --link: var(--accent-600);
    --link-hover: var(--accent-700);

    --bs-link-color-rgb: 169, 196, 216;
    --bs-link-hover-color-rgb: 198, 218, 231;
    --bs-primary-rgb: 169, 196, 150;
    --bs-success-rgb: 169, 196, 150;
    --bs-danger-rgb: 199, 147, 189;
  }
}

* { box-sizing: border-box; }

body {
  background:
    radial-gradient(ellipse 900px 400px at 50% -10%, var(--brand-100), transparent),
    var(--bg);
  font-family: "Inter", system-ui, sans-serif;
  line-height: 1.55;
}

/* Bootstrap's own components (.btn, .card, etc.) hardcode their colors as
   compiled hex values or redeclare their scoped --bs-* variables locally
   (e.g. .card sets its own --bs-card-box-shadow), so retheming them means
   overriding the component rules directly rather than just the root
   --bs-primary/--bs-card-* tokens, which several components don't actually
   read from. Font-family is the same story: .btn's own --bs-btn-font-family
   is empty by default, and native form controls (button/input/select) don't
   reliably inherit body's font either, so state it directly everywhere
   rather than trusting inheritance or Bootstrap's variable indirection. */

body, .btn, .form-control, .form-select, .card, .badge, .table,
input, button, select, textarea {
  font-family: "Inter", system-ui, sans-serif;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-600);
  --bs-btn-border-color: var(--brand-600);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-700);
  --bs-btn-hover-border-color: var(--brand-700);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-700);
  --bs-btn-active-border-color: var(--brand-700);
  --bs-btn-disabled-bg: var(--brand-600);
  --bs-btn-disabled-border-color: var(--brand-600);
  --bs-btn-focus-shadow-rgb: 74, 106, 58;
}

.card {
  box-shadow: var(--shadow-1);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in oklab, var(--card) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--font-size-1);
}

.site-nav a:hover {
  color: var(--link);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: "Fraunces", serif;
  font-weight: 700;
  font-size: var(--font-size-3);
  color: var(--brand-700);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.hero {
  text-align: center;
  padding: var(--size-6) 0 var(--size-8);
}

.hero-compact {
  padding: var(--size-2) 0 var(--size-6);
}

h1, h2, h3 {
  font-family: "Fraunces", serif;
  letter-spacing: -0.01em;
}

.hero h1 {
  font-size: var(--font-size-7);
  margin-bottom: var(--size-2);
}

.lede {
  color: var(--muted);
  margin: 0 0 var(--size-5);
}

.search-bar {
  max-width: 560px;
  margin: 0 auto;
  box-shadow: var(--shadow-3);
  border-radius: var(--radius-3);
}

/* Matching border-radius on the input/button themselves (rather than
   clipping square corners with overflow:hidden on the wrapper) so the
   focus ring drawn on the input isn't cut off where it meets the wrapper's
   rounded corner. */
.search-bar .form-control,
.search-bar .btn {
  border-radius: var(--radius-3);
}

.search-bar .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.search-bar .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.search-bar .form-control:focus {
  box-shadow: 0 0 0 3px var(--accent-100);
  border-color: var(--accent-300);
  z-index: 3;
}

/* Fun-fact stat cards (user/stats pages) */

.stat-row {
  margin: var(--size-4) 0 var(--size-6);
}

.stat-card .card-body {
  padding: var(--size-4);
}

.stat-value {
  font-family: "Fraunces", serif;
  font-size: var(--font-size-6);
  font-weight: 700;
  color: var(--brand-600);
  line-height: 1.1;
}

.stat-label {
  margin-top: var(--size-1);
  font-size: var(--font-size-0);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stats-group-title {
  margin: var(--size-11) 0 var(--size-3);
  padding-bottom: var(--size-2);
  border-bottom: 2px solid var(--brand-300);
  font-size: var(--font-size-4);
}

.stats-group-title:first-of-type {
  margin-top: var(--size-6);
}

.chart-section {
  margin: var(--size-8) 0;
}

.chart-section h3 {
  margin-bottom: var(--size-1);
}

.chart-section .lede {
  margin-bottom: var(--size-4);
}

.chart-wrap .card-body {
  height: 320px;
}

/* Repeat songs (stats page) */

.repeat-songs-table .repeat-song-title {
  font-weight: 600;
  white-space: nowrap;
}

.repeat-occurrence {
  text-decoration: none;
}

/* League cards */

.league-card {
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.league-card:hover {
  box-shadow: var(--shadow-3) !important;
  transform: translateY(-1px);
}

.league-card .card-title {
  color: var(--brand-700);
}

.league-card-title-link {
  color: inherit;
  text-decoration: none;
}

.league-card-title-link:hover {
  color: var(--link);
  text-decoration: underline;
}

/* A lone card left over in the last row (odd league count) spans the full
   row instead of sitting half-width next to empty space. Bootstrap's
   row-cols-md-2 sizes each .col to 50% via flexbox, so this just widens
   that one flex item to 100% — flexbox percentage sizing is far more
   consistent across browsers than the CSS Grid auto-fit approach this
   replaced (which Firefox and Chromium disagreed on). */
@media (min-width: 768px) {
  .league-col:last-child:nth-child(odd) {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-2);
}

.chip {
  display: inline-block;
  padding: 0.3em 0.75em;
  border-radius: var(--radius-round);
  background: var(--secondary-100);
  color: var(--secondary-600);
  font-size: var(--font-size-0);
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.chip:hover {
  background: var(--secondary-300);
  color: #fff;
}

/* Submissions table */

.submissions a {
  color: var(--link);
  text-decoration: none;
  font-weight: 500;
}

.submissions a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

.submissions th {
  font-size: var(--font-size-0);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-700);
  border-bottom-width: 1px;
}

.vote-total {
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size-0);
}

.vote-details summary {
  cursor: pointer;
  list-style: none;
  display: inline-block;
}

.vote-details summary::-webkit-details-marker {
  display: none;
}

.vote-details summary .vote-total {
  box-shadow: 0 0 0 1px transparent;
  transition: box-shadow 0.15s ease;
}

.vote-details summary:hover .vote-total,
.vote-details[open] summary .vote-total {
  box-shadow: 0 0 0 1px currentColor;
}

.vote-panel {
  margin-top: var(--size-2);
  padding: var(--size-3);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  min-width: 14rem;
  max-width: 22rem;
}

.submitter-note {
  margin: 0 0 var(--size-2);
  padding-bottom: var(--size-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--font-size-0);
}

.vote-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--size-1);
  font-size: var(--font-size-0);
}

.vote-list li {
  line-height: 1.4;
}

.vote-points {
  font-weight: 600;
  color: var(--brand-600);
  font-variant-numeric: tabular-nums;
}

.vote-comment {
  color: var(--muted);
  font-style: italic;
}

.muted {
  color: var(--muted);
}

.empty {
  color: var(--muted);
  font-style: italic;
}

.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
  font-size: var(--font-size-0);
}

.breadcrumb a:hover {
  color: var(--link);
  text-decoration: underline;
}

.site-footer {
  color: var(--muted);
  font-size: var(--font-size-0);
}