:root {
  /* ---- Brand palette (base) ---- */
  --hfl-green: #C7D303;        /* primary accent — links, buttons */
  --hfl-green-logo: #C8D400;   /* logo mark green */
  --hfl-green-tint: #fafbe6;   /* very light green wash */

  --hfl-blue-deep: #195079;    /* logo blue / hover / headings */
  --hfl-blue: #8FC4DB;         /* header bar blue */
  --hfl-blue-500: #74abc2;     /* nav utility tile */
  --hfl-blue-600: #5e95ac;     /* nav utility tile (darker) */
  --hfl-blue-link: #0077b5;    /* doc-finder / info panels */

  --hfl-sky-100: #e5f7ff;      /* avatar / icon circle bg */
  --hfl-mint-100: #ddf0f3;     /* intro + footer surface */

  --hfl-ink: #2E3233;          /* darkest text */
  --hfl-body: #374049;         /* body text */
  --hfl-muted: #6b7378;        /* secondary text */
  --hfl-line: #e2e3df;         /* hairline borders */
  --hfl-line-soft: #f2f2f2;    /* zebra / list fill */

  --hfl-white: #ffffff;

  /* ---- Semantic aliases ---- */
  --color-accent: var(--hfl-green);
  --color-accent-ink: var(--hfl-blue-deep);

  --text-heading: var(--hfl-green);
  --text-title: var(--hfl-blue-deep);
  --text-body: var(--hfl-body);
  --text-strong: var(--hfl-ink);
  --text-muted: var(--hfl-muted);
  --text-on-accent: var(--hfl-white);

  --surface-page: var(--hfl-white);
  --surface-header: var(--hfl-blue);
  --surface-soft: var(--hfl-mint-100);
  --surface-card: var(--hfl-white);
  --surface-fill: var(--hfl-line-soft);
  --surface-avatar: var(--hfl-sky-100);

  --border-hairline: var(--hfl-line);
  --border-strong: var(--hfl-body);

  --link: var(--hfl-green);
  --link-hover: var(--hfl-blue-deep);
}