/* Theme: brand tokens (light + dark) mapped onto Bootstrap 5.3's CSS variables.
   Load after bootstrap.min.css. */

:root {
  --bg: #fbf8f9;
  --surface: #ffffff;
  --band: #f4ecef;
  --ink: #2a1621;
  --muted: #6c5762;
  --line: #e6d8de;
  --accent: #B01E65;      /* Susan G. Komen dark pink (PMS 227) */
  --accent-soft: #FFC0CB; /* classic light pink */
  --accent-ink: #ffffff;
  --plum: #4a1f37;
  --chrome: #4a1f37;
  --chrome-ink: #fbf8f9;
  --ribbon: #F786AE;       /* Charity Pink, the header ribbon logo */
  --ad-accent: #F58695;    /* NBCF pink, on the plum ads */
  --ad-accent-ink: #2a1621;

  --f-display: "Gloock", "Georgia", "Times New Roman", serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Consolas", monospace;

  --s-1: .8125rem; --s0: 1rem; --s1: 1.125rem; --s2: 1.5rem; --s3: 2.125rem; --s4: clamp(2.5rem, 6vw, 4.25rem);
  --radius: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #170d13; --surface: #21141c; --band: #1d1118; --ink: #f6e9ef; --muted: #bba3af;
    --line: #3a2531; --accent: #F786AE; --accent-soft: #3d1a2a; --accent-ink: #1a0b12; --plum: #FFC0CB;
    --chrome: #2a1420; --chrome-ink: #f6e9ef;
    --ad-accent: #B01E65; --ad-accent-ink: #ffffff;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #170d13; --surface: #21141c; --band: #1d1118; --ink: #f6e9ef; --muted: #bba3af;
  --line: #3a2531; --accent: #F786AE; --accent-soft: #3d1a2a; --accent-ink: #1a0b12; --plum: #FFC0CB;
    --chrome: #2a1420; --chrome-ink: #f6e9ef;
    --ad-accent: #B01E65; --ad-accent-ink: #ffffff;
  color-scheme: dark;
}

/* Bootstrap globals */
:root {
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--ink);
  --bs-body-font-family: var(--f-body);
  --bs-body-line-height: 1.6;
  --bs-emphasis-color: var(--ink);
  --bs-heading-color: var(--ink);
  --bs-secondary-color: var(--muted);
  --bs-tertiary-bg: var(--band);
  --bs-border-color: var(--line);
  --bs-border-radius-lg: var(--radius);
}
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--plum); }

/* Bootstrap components */
.btn-primary {
  --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-color: var(--accent-ink);
  --bs-btn-hover-bg: var(--plum); --bs-btn-hover-border-color: var(--plum); --bs-btn-hover-color: var(--bg);
  --bs-btn-active-bg: var(--plum); --bs-btn-active-border-color: var(--plum); --bs-btn-active-color: var(--bg);
  --bs-btn-focus-shadow-rgb: 176, 30, 101;
}
.btn-outline-primary {
  --bs-btn-color: var(--accent); --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-soft); --bs-btn-hover-border-color: var(--accent); --bs-btn-hover-color: var(--accent);
  --bs-btn-active-bg: var(--accent-soft); --bs-btn-active-border-color: var(--accent); --bs-btn-active-color: var(--accent);
  --bs-btn-focus-shadow-rgb: 176, 30, 101;
}
/* Header and footer share the --chrome background */
.navbar {
  --bs-navbar-color: color-mix(in srgb, var(--chrome-ink) 78%, transparent); --bs-navbar-hover-color: var(--chrome-ink); --bs-navbar-active-color: var(--chrome-ink);
  --bs-navbar-brand-color: var(--chrome-ink); --bs-navbar-brand-hover-color: var(--chrome-ink);
  --bs-navbar-toggler-border-color: color-mix(in srgb, var(--chrome-ink) 35%, transparent);
}
.card { --bs-card-bg: var(--surface); --bs-card-border-color: var(--line); --bs-card-color: var(--ink); --bs-card-border-radius: var(--radius); }
.table { --bs-table-bg: var(--surface); --bs-table-color: var(--ink); --bs-table-border-color: var(--line); }
.list-group { --bs-list-group-bg: transparent; --bs-list-group-color: var(--ink); --bs-list-group-border-color: var(--line); }
.nav-pills {
  --bs-nav-link-color: var(--muted); --bs-nav-link-hover-color: var(--ink);
  --bs-nav-pills-link-active-bg: var(--accent); --bs-nav-pills-link-active-color: var(--accent-ink);
}
.alert-primary { --bs-alert-bg: var(--accent-soft); --bs-alert-color: var(--ink); --bs-alert-border-color: transparent; }
.form-control { background-color: var(--surface); color: var(--ink); border-color: var(--line); }
.form-control:focus { background-color: var(--surface); color: var(--ink); border-color: var(--accent); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--accent) 25%, transparent); }
.form-control::placeholder { color: var(--muted); }
.form-select { background-color: var(--surface); color: var(--ink); border-color: var(--line); }
.form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--accent) 25%, transparent); }
.form-check-input { background-color: var(--surface); border-color: var(--muted); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--accent) 25%, transparent); }
.modal { --bs-modal-bg: var(--surface); --bs-modal-color: var(--ink); --bs-modal-border-color: var(--line); --bs-modal-border-radius: var(--radius); }
.alert-danger { --bs-alert-bg: color-mix(in srgb, #dc3545 12%, var(--surface)); --bs-alert-color: var(--ink); --bs-alert-border-color: color-mix(in srgb, #dc3545 40%, var(--surface)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } }
:root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }