/* Shared BananaLearn palette. Colour only: no content, sizing or layout rules. */
:root {
  --bl-ink: #1A1A1A;
  --bl-diagram-ink: #243247;
  --bl-body: #555555;
  --bl-muted: #626262;
  --bl-cream: #FAF7F2;
  --bl-white: #FFFFFF;
  --bl-yellow: #F5C518;
  --bl-gold-text: #806000;
  --bl-teal: #116B66;
  --bl-blue: #315DA3;
  --bl-plum: #684879;
  --bl-deep-plum: #37324F;
  --bl-mint: #E4F2EE;
  --bl-sky: #E7EFFB;
  --bl-lavender: #EFE8F5;
  --bl-yellow-soft: #FFFAEB;
  --ink: var(--bl-ink);
  --body: var(--bl-body);
  --muted: var(--bl-muted);
  --cream: var(--bl-cream);
  --white: var(--bl-white);
  --yellow: var(--bl-yellow);
  --yellow-soft: var(--bl-yellow-soft);
  --green-primary: var(--bl-teal);
  --green-mid: var(--bl-teal);
  --color-primary: var(--bl-teal);
  --color-primary-dark: var(--bl-deep-plum);
  --color-primary-light: var(--bl-mint);
  --color-success: var(--bl-teal);
  --color-text-muted: var(--bl-muted);
}
/* Explicit UI roles, not global recolouring of SVGs or status indicators. */
:where(body:not(.page-home)) :is(.section-label, .section-eyebrow, .eyebrow) { color: var(--bl-plum); }
:where(body:not(.page-home)) :is(.feature-icon, .value-icon, .icon-wrap) { background-color: var(--bl-mint); color: var(--bl-teal); }
:where(body:not(.page-home)) :is(.info-hero, .page-hero) { background-color: var(--bl-mint); }
:where(body:not(.page-home)) :is(.cta-strip, .cta-section) { background-color: var(--bl-deep-plum); }
:where(body:not(.page-home)) :is(.cta-strip, .cta-section) :is(.eyebrow, .section-label) { color: var(--bl-yellow); }
body:not(.page-home) a:focus-visible { outline-color: var(--bl-blue); }
/* Legacy Tailwind CDN pages use these same named brand roles. */
body .text-green-primary, body .text-brand-teal { color: var(--bl-teal); }
body .bg-green-primary, body .bg-brand-teal { background-color: var(--bl-teal); }
body .border-green-primary { border-color: var(--bl-teal); }