/* =============================================================================
 * theme.css — the club's colours, filled in by build.js from club-configs/<club>.json (the template of it is
 * master-template/css/theme.css: edit that, never a built copy in dist/).
 * =============================================================================
 * Only primary_color and secondary_color come from the config; build.js works out the rest from them, so every
 * club's site is readable whatever its colours:
 *   --brand         the primary colour (a shade darker only when neither white nor ink would read on it)
 *   --brand-dark    the primary colour, darker (hover)
 *   --on-brand      white or ink, whichever reads better on the primary colour
 *   --brand-ink     the primary colour as text on the page: darkened until it has 4.5:1 contrast (WCAG AA)
 *   --brand-soft    a pale tint of the primary colour (chips, highlights)
 *   --on-brand-2    white or ink, whichever reads better on the secondary colour
 *   --brand-2       the stripe above the header: the secondary colour, or the primary when the secondary is too light
 *                   to show on the page (a white one)
 * Loaded after styles.css; <html data-theme="club"> (data/content.js › site.theme) is what uses it.
 * ========================================================================== */
:root[data-theme="club"] {
  --brand: #9f1931;
  --brand-dark: #7c1426;
  --on-brand: #ffffff;
  --brand-ink: #9f1931;
  --brand-soft: #f2dfe2;
  --brand-2: #9f1931;
  --on-brand-2: #141413;
}