/*
 * avlo.css — single source of truth for Avlo brand tokens.
 *
 * This file exists to stop brand values (teal, gold, navy, card radius,
 * suitability colours, button recipes) being retyped independently on every
 * page, which is how they drift out of sync with each other over time.
 *
 * Scope is deliberately narrow: custom-property tokens and a small set of
 * shared utility classes (suitability pills, button base recipes). It does
 * NOT contain layout, page-specific, or component styles — those stay in
 * each page's own <style> block.
 *
 * Load order: this file is linked first in <head>, before Google Fonts
 * links and before any per-page <style> block, so a page's own rules
 * (equal specificity, later in source) always take precedence over these
 * defaults. A page is free to keep a local :root token that intentionally
 * deviates from the value here — see docs/css-migration-audit.md for the
 * full list of such deviations and why each one exists.
 *
 * Utility classes below (.btn-primary, .pill-hr, etc.) are added as
 * available infrastructure for future use. As of this file's creation no
 * existing page has been rewired to use them — see
 * docs/css-migration-audit.md for known class-name collisions with
 * existing per-page classes of the same name, and why they are safe.
 */

:root {
  --teal: #0d9488;
  --teal-hover: #0a7c72;
  --gold: #c9a96e;
  --navy: #1b2433;
  --navy-dark: #0f172a;
  /* The validated (interview) layer on the criterion-match radar, drawn over
     the teal screening layer. Amber rather than navy: it separates from teal
     far more strongly, and teal/amber stays distinguishable under red-green
     colour blindness in a way teal/violet does not. One definition, because the
     colour appears on the polygon, its markers and three legend swatches. */
  --validated: #b45309;
  --validated-fill: rgba(180, 83, 9, 0.12);
  --card-bg: #212d3f;
  --card-radius: 22px;
  --text-primary: #ffffff;
  --text-muted: #9e9a91;
  --text-light: #b5b1a8;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-heading: 'Barlow Semi Condensed', sans-serif;
  --green-rec: #84cc16;
}

/* Suitability pills */
.pill-hr  { background: var(--teal); color: #fff; }
.pill-rec { background: #84cc16; color: #1a1a1a; }
.pill-cla { background: #f59e0b; color: #1a1a1a; }
.pill-nr  { background: #ef4444; color: #fff; }
.pill-exc { background: #3b82f6; color: #fff; }

/* Button base classes */
.btn-primary {
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
}
.btn-primary:hover { background: var(--teal-hover); }

.btn-secondary {
  background: transparent;
  color: var(--teal);
  border: 1.5px solid var(--teal);
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
}

.btn-danger {
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
}

.btn-stop {
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
}
