/* ========================================
   COLOUR TOKENS — every colour the site's own CSS uses lives here, and so do
   the Bootstrap colours the site relies on (see the bottom half).
   Loaded right after bootstrap.min.css and before main.css.

   Palette: official ConnectClub brand (Haniel, 2026-09-30).
     Brand teal  #0E595F  headings, links, buttons
     Deep teal   #083F44  header, footer, dark bands; the text colour on gold
     Mid teal    #107379  subtitles, secondary text on light
     Divider     #A2D0D0  decorative rules only (1.7:1, never an input border)
     Teal tint   #E0F5EE  icon chips, soft panels
     Gold        #F2B543  FILL ONLY: buttons, pills, highlights. Never text on
                          light. Text on gold = deep teal (6.4:1). Gold text is
                          fine on deep teal (6.4:1); on brand teal only for
                          large type (4.4:1).
     Gold tint   #FFF2CF  icon chips
     Mint        #F1FCF8  page background
     Body grey   #5F6D6D  body text on white/mint

   Colours that are also used as tints (rgba with an alpha) are defined once
   as an "r, g, b" channel triplet (--x-rgb) and the solid colour is derived
   from it, so the solid colour and its tints can never drift apart. Hover
   shades are precomputed mixes of two brand colours (noted next to each), not
   color-mix(), which older iOS Safari drops.

   Known exceptions (CSS variables cannot reach inside url()):
   - the navbar hamburger icon in components/header.css keeps a literal white;
   - the accordion chevrons below carry the teal as an escaped hex.
   ======================================== */
:root {
  /* Channels (r, g, b) — use as rgba(var(--x-rgb), <alpha>) */
  --white-rgb:      255, 255, 255;
  --black-rgb:      0, 0, 0;
  --teal-rgb:       14, 89, 95;
  --teal-deep-rgb:  8, 63, 68;
  --teal-mid-rgb:   16, 115, 121;
  --gold-rgb:       242, 181, 67;
  --mint-rgb:       241, 252, 248;
  --teal-tint-rgb:  224, 245, 238;

  /* Brand palette */
  --teal:        rgb(var(--teal-rgb));       /* #0E595F */
  --teal-deep:   rgb(var(--teal-deep-rgb));  /* #083F44 */
  --teal-mid:    rgb(var(--teal-mid-rgb));   /* #107379 */
  --teal-line:   #A2D0D0;
  --teal-tint:   rgb(var(--teal-tint-rgb));  /* #E0F5EE */
  --gold:        rgb(var(--gold-rgb));       /* #F2B543 */
  --gold-hover:  #D6A743;  /* 88% gold + 12% deep teal; deep teal on it 5.2:1 */
  --gold-tint:   #FFF2CF;
  --mint:        rgb(var(--mint-rgb));      /* #F1FCF8 */
  --grey:        #5F6D6D;
  --white:       #ffffff;
  --teal-hover:  #0C5157;  /* 70% teal + 30% deep teal; white on it 9:1 */

  /* Scales the site's CSS is written against, mapped onto the brand */
  --primary-800: var(--teal-deep);
  --primary-700: var(--teal-deep);
  --primary-600: var(--teal);
  --primary-500: var(--teal-mid);
  --primary-400: var(--teal-mid);
  --primary-100: var(--teal-tint);

  --accent-500: var(--gold);
  --accent-600: var(--gold-hover);
  --accent-100: var(--gold-tint);

  --success-500: var(--teal-mid);

  --text-900: var(--teal-deep);   /* headings, text on gold */
  --text-700: var(--grey);        /* body */
  --text-500: var(--grey);        /* muted */

  --surface-50:    var(--mint);
  --surface-100:   var(--teal-tint);
  --surface-200:   var(--teal-tint);
  --surface-light: var(--mint);
  --line-soft:     var(--teal-tint);
  --icon-muted:    var(--teal-line);

  /* Legacy names still used by header/hero/footer CSS */
  --brand-navy-rgb:  var(--teal-deep-rgb);
  --brand-gold-rgb:  var(--gold-rgb);
  --brand-navy:      var(--teal-deep);
  --brand-blue:      var(--teal);
  --brand-gold:      var(--gold);
  --brand-gold-hover: var(--gold-hover);
  --brand-gold-tint: var(--gold-tint);
  --brand-white:     var(--white);

  /* Backward-compatible aliases */
  --primary-blue: var(--primary-600);
  --secondary-blue: var(--primary-400);
  --accent-yellow: var(--accent-500);
  --success-green: var(--success-500);
  --text-dark: var(--text-900);
  --text-light: var(--text-500);
  --light-gray: var(--surface-50);

  /* ---------- Bootstrap: theme colours, links, body text, focus ring ---------- */
  --bs-primary: var(--teal);
  --bs-primary-rgb: var(--teal-rgb);
  --bs-primary-text-emphasis: var(--teal-deep);
  --bs-primary-bg-subtle: var(--teal-tint);
  --bs-primary-border-subtle: var(--teal-line);
  --bs-secondary: var(--teal-mid);
  --bs-success: var(--teal);
  --bs-success-rgb: var(--teal-rgb);
  --bs-success-text-emphasis: var(--teal-deep);
  --bs-success-bg-subtle: var(--teal-tint);
  --bs-success-border-subtle: var(--teal-line);
  --bs-warning: var(--gold);
  --bs-warning-rgb: var(--gold-rgb);
  /* .bg-light bands and panels: teal tint, so they still show on the mint page */
  --bs-light: var(--teal-tint);
  --bs-light-rgb: var(--teal-tint-rgb);
  --bs-body-color: var(--grey);
  --bs-secondary-color: var(--grey);  /* .text-muted */
  --bs-emphasis-color: var(--teal-deep);
  --bs-link-color: var(--teal);
  --bs-link-color-rgb: var(--teal-rgb);
  --bs-link-hover-color: var(--teal-deep);
  --bs-link-hover-color-rgb: var(--teal-deep-rgb);
  --bs-focus-ring-color: rgba(var(--teal-rgb), 0.25);
}

/* ---------- Bootstrap: buttons (each variant sets its own --bs-btn-*) ---------- */
.btn-primary {
  --bs-btn-color: var(--white);
  --bs-btn-bg: var(--teal);
  --bs-btn-border-color: var(--teal);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--teal-hover);
  --bs-btn-hover-border-color: var(--teal-hover);
  --bs-btn-focus-shadow-rgb: var(--teal-rgb);
  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--teal-deep);
  --bs-btn-active-border-color: var(--teal-deep);
  --bs-btn-disabled-color: var(--white);
  --bs-btn-disabled-bg: var(--teal);
  --bs-btn-disabled-border-color: var(--teal);
}

.btn-outline-primary,
.btn-outline-success {
  --bs-btn-color: var(--teal);
  --bs-btn-border-color: var(--teal);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--teal);
  --bs-btn-hover-border-color: var(--teal);
  --bs-btn-focus-shadow-rgb: var(--teal-rgb);
  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--teal-deep);
  --bs-btn-active-border-color: var(--teal-deep);
  --bs-btn-disabled-color: var(--teal);
  --bs-btn-disabled-border-color: var(--teal);
}

/* Gold is a fill: its text is always deep teal */
.btn-warning {
  --bs-btn-color: var(--teal-deep);
  --bs-btn-bg: var(--gold);
  --bs-btn-border-color: var(--gold);
  --bs-btn-hover-color: var(--teal-deep);
  --bs-btn-hover-bg: var(--gold-hover);
  --bs-btn-hover-border-color: var(--gold-hover);
  --bs-btn-focus-shadow-rgb: var(--gold-rgb);
  --bs-btn-active-color: var(--teal-deep);
  --bs-btn-active-bg: var(--gold-hover);
  --bs-btn-active-border-color: var(--gold-hover);
  --bs-btn-disabled-color: var(--teal-deep);
  --bs-btn-disabled-bg: var(--gold);
  --bs-btn-disabled-border-color: var(--gold);
}

/* ---------- Bootstrap: cards, muted white text on the teal bands ---------- */
.card {
  --bs-card-title-color: var(--teal);
}

/* 50% white on teal is ~3.4:1; 80% keeps AA (~5.8:1) */
.text-white-50 {
  color: rgba(var(--white-rgb), 0.8) !important;
}

/* ---------- Bootstrap: form states (literal blue in bootstrap.min.css) ---------- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--teal-mid);
  box-shadow: 0 0 0 0.25rem rgba(var(--teal-rgb), 0.25);
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--teal);
  border-color: var(--teal);
}

.nav-link:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(var(--teal-rgb), 0.25);
}

/* ---------- Bootstrap: accordion (FAQ) ---------- */
.accordion {
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--teal-rgb), 0.25);
  --bs-accordion-active-color: var(--teal-deep);
  --bs-accordion-active-bg: var(--teal-tint);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230E595F' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23083F44' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}