/* =================================================================================================
   SCOUTDECISION BRAND TOKENS (brand book)
   The ONLY place where the brand colours and font are defined. The project CSS (style.css, theme_base.css,
   style_after_bs5.css) uses these variables in its own rules, so changing a brand colour is a one-line change
   here. Dark mode only swaps the values below.
   Linked from layouts/includes/theme_styling.html after Bootstrap and theme_base.css, and BEFORE the
   organization theme colours, so an organization with its own theme keeps overriding the brand defaults.
   Brand palette: navy #29364D, green #50D878, white #FFFFFF, light gray #E8ECF1. Font: Inter (loaded with a
   <link> in layouts/includes/scripts_header.html, so the browser fetches it from the <head> without waiting for this file).
   ================================================================================================= */

/* ---------- Light mode (default) ---------- */
:root,
[data-bs-theme="light"] {
  /* Brand */
  --sd-navy: #29364D;               /* primary background, headers, key elements */
  --sd-navy-dark: #1F2A3D;
  --sd-navy-active: #1A2536;        /* active item on navy backgrounds */
  --sd-green: #50D878;              /* accent, highlights, interactive elements */
  --sd-green-hover: #3FC967;
  --sd-green-active: #34B85A;
  --sd-on-green: #1F2A3D;           /* text on the brand green (white on #50D878 is not readable) */
  --sd-green-ink: #157A43;          /* green for text/icons/borders on light surfaces (WCAG AA) */
  --sd-green-soft: #E3F8EA;         /* light green fill (hover, selected) */
  --sd-primary-ink: #29364D;        /* outlined "primary" buttons */
  --sd-link: #157A43;               /* text links */
  --sd-primary-soft: rgba(41, 54, 77, 0.10);
  /* Neutrals */
  --sd-app-bg: #F2F4F7;
  --sd-surface-hover: #F5F7FA;      /* hovered rows and list items */
  --sd-surface-header: #EEF1F5;     /* table header strips */
  --sd-border: #E8ECF1;
  --sd-text: #1B2333;
  --sd-text-2: #435066;
  --sd-text-3: #5F6A7D;
  --sd-focus-ring: rgba(80, 216, 120, 0.35);
  /* Rating chips (0-100 scores): background / text per band */
  --sd-score-low-bg: #FDE2E1;
  --sd-score-low: #B42318;
  --sd-score-mid-bg: #FEF0C7;
  --sd-score-mid: #93370D;
  --sd-score-good-bg: var(--sd-green-soft);
  --sd-score-good: var(--sd-green-ink);
  --sd-score-top-bg: #157A43;
  --sd-score-top: #FFFFFF;

  /* Bootstrap 5 variables */
  --bs-body-font-family: "Inter", Arial, sans-serif;
  --bs-body-color: var(--sd-text);
  --bs-border-color: var(--sd-border);
  --bs-light-bg-subtle: var(--sd-app-bg);
  --bs-link-color-rgb: 21, 122, 67;
  --bs-link-hover-color-rgb: 27, 35, 51;
  --bs-focus-ring-color: var(--sd-focus-ring);
}

/* ---------- Dark mode ---------- */
[data-bs-theme="dark"] {
  --sd-navy-dark: #172131;
  --sd-navy-active: #111926;
  --sd-green-ink: #50D878;
  --sd-green-soft: #173A27;
  --sd-primary-ink: #C9D2E0;
  --sd-link: #50D878;
  --sd-primary-soft: rgba(201, 210, 224, 0.12);
  --sd-app-bg: #0E1420;
  --sd-surface-hover: #1D2738;
  --sd-surface-header: #1B2536;
  --sd-border: #243045;
  --sd-text: #E8ECF1;
  --sd-text-2: #B8C2D3;
  --sd-text-3: #94A0B5;
  --sd-score-low-bg: #4A1D1D;
  --sd-score-low: #FDA29B;
  --sd-score-mid-bg: #4A3112;
  --sd-score-mid: #FEC84B;
  --sd-score-top-bg: #50D878;
  --sd-score-top: #1F2A3D;

  --bs-body-bg: #161E2C;
  --bs-body-bg-rgb: 22, 30, 44;
  --bs-secondary-bg: #1B2536;
  --bs-tertiary-bg: #19222F;
  --bs-body-color: var(--sd-text);
  --bs-border-color: var(--sd-border);
  --bs-light-bg-subtle: var(--sd-app-bg);
  --bs-link-color-rgb: 80, 216, 120;
  --bs-link-hover-color-rgb: 232, 236, 241;
}

/* ---------- Bootstrap 5 components, customized through their own variables ---------- */
.btn-primary {
  --bs-btn-bg: var(--sd-navy);
  --bs-btn-border-color: var(--sd-navy);
  --bs-btn-hover-bg: var(--sd-navy-dark);
  --bs-btn-hover-border-color: var(--sd-navy-dark);
  --bs-btn-active-bg: var(--sd-navy-active);
  --bs-btn-active-border-color: var(--sd-navy-active);
  --bs-btn-disabled-bg: var(--sd-navy);
  --bs-btn-disabled-border-color: var(--sd-navy);
  --bs-btn-focus-shadow-rgb: 80, 216, 120;
}
.btn-outline-primary {
  --bs-btn-color: var(--sd-primary-ink);
  --bs-btn-border-color: var(--sd-primary-ink);
  --bs-btn-hover-bg: var(--sd-navy);
  --bs-btn-hover-border-color: var(--sd-navy);
  --bs-btn-active-bg: var(--sd-navy-dark);
  --bs-btn-active-border-color: var(--sd-navy-dark);
  --bs-btn-focus-shadow-rgb: 80, 216, 120;
}
.pagination {
  --bs-pagination-color: var(--sd-text-2);
  --bs-pagination-hover-color: var(--sd-text);
  --bs-pagination-active-bg: var(--sd-navy);
  --bs-pagination-active-border-color: var(--sd-navy);
  --bs-pagination-focus-box-shadow: 0 0 0 0.2rem var(--sd-focus-ring);
}
.nav-tabs {
  --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--sd-green);
}
.table {
  --bs-table-border-color: var(--sd-border);
}
.accordion {
  --bs-accordion-active-bg: var(--sd-green-soft);
  --bs-accordion-active-color: var(--sd-text);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem var(--sd-focus-ring);
  --bs-accordion-border-color: var(--sd-border);
  --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
}