/* =============================================================
   SITE THEME — the single design system for every web surface
   -------------------------------------------------------------
   One file, consumed by every page (home, platform docs, catalogue
   explorer, engagement hubs, run scorecards). Change values here and
   the whole site re-skins. KPMG-inspired: confident blues with restrained
   violet, green and magenta accents for an internal consulting showcase.

   NOTE: the --brand-* names are kept as LEGACY ALIASES because the
   older surfaces reference them directly — they no longer carry
   Acme values. New pages should use the semantic tokens only.
   ============================================================= */
:root{
  /* ---- core palette ---- */
  --accent:#00338D;
  --accent-2:#005EB8;
  --accent-soft:#E7F0FF;
  --ink:#111827;
  --slate:#536276;
  --faint:#94A3B8;         /* tertiary text                      */
  --bg:#F4F7FB;
  --card:#FFFFFF;
  --line:#E2E8F0;
  --good:#009A44;
  --warn:#D97706;
  --bad:#DC2626;
  --chip:#EEF2FF;

  /* ---- legacy aliases (older pages reference these names) ---- */
  --brand-blue:#00338D;
  --brand-cobalt:#005EB8;
  --brand-navy:#001E62;
  --brand-sky:#00A3A1;
  --brand-violet:#483698;
  --brand-magenta:#C6007E;
  --brand-teal:#009A44;
  --brand-grey:#E2E8F0;
  --navy:#001E62;
  --navy2:#00338D;
  --sky:#00A3A1;

  /* ---- elevation & shape ---- */
  --radius:16px;
  --shadow:0 1px 2px rgba(15,23,42,.05),0 4px 12px -4px rgba(15,23,42,.08);
  --shadow-lg:0 1px 2px rgba(15,23,42,.05),0 8px 24px -12px rgba(15,23,42,.14);
  --grad-accent:linear-gradient(120deg,#001E62 0%,#00338D 58%,#005EB8 100%);

  /* ---- type ---- */
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Inter,Roboto,
         "Helvetica Neue",Arial,sans-serif;
  --display:var(--sans);
}

/* Headings use the display face */
header h1, h2, h3{font-family:var(--display);}

/* ---- header brand bar (logo + eyebrow) — used by older surfaces ---- */
header .brandbar{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
header .brandbar .logo{height:30px;width:auto;display:block;}
header .brandbar .eyebrow{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;opacity:.85;padding-left:14px;border-left:1px solid rgba(255,255,255,.35);
}