/* Hertility — Colour tokens
   Brand Guidelines v1.0 (Jan 2024) + current Canva decks.
   Text is ONLY ever black or white. Wheat & Cream are backgrounds only. */
:root {
  /* Base palette */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-cream: #F2EBE8;   /* main light background only */
  --color-espresso: #49363A; /* primary DECK dark background */
  --color-mocha: #6B4F54;    /* legacy brand tone / secondary dark */
  --color-wheat: #C4B0A3;    /* background only */
  --color-wheat-10: #F9F7F6; /* lightest tint background */
  --color-coral: #FA4445;    /* numbers only, sparingly */
  --color-neon: #DAFF7D;     /* CTA fills + dark-bg accent */

  /* Opacity tints — backgrounds & graphic elements only, never text */
  --tint-black-10: rgba(0,0,0,.10);
  --tint-black-20: rgba(0,0,0,.20);
  --tint-black-40: rgba(0,0,0,.40);
  --tint-mocha-20: rgba(107,79,84,.20);
  --tint-mocha-40: rgba(107,79,84,.40);
  --tint-wheat-20: rgba(196,176,163,.20);
  --tint-wheat-40: rgba(196,176,163,.40);
  --tint-white-60: rgba(255,255,255,.60); /* muted white footer text on dark */

  /* Semantic — backgrounds (dark→light ladder) */
  --bg-dark: var(--color-espresso);      /* primary dark slide */
  --bg-dark-alt: var(--color-mocha);     /* secondary dark slide */
  --bg-wheat: var(--color-wheat);        /* mid light */
  --bg-cream: var(--color-cream);        /* main light */
  --bg-tint: var(--color-wheat-10);      /* lightest */

  /* Semantic — text (black or white only) */
  --text-on-dark: var(--color-white);
  --text-on-light: var(--color-black);
  --text-muted-on-dark: var(--tint-white-60);

  /* Semantic — accents */
  --accent-number: var(--color-coral);   /* one hero figure, light bg, 24px+ */
  --accent-cta: var(--color-neon);       /* button fill, black text */
  --accent-cta-text: var(--color-black);
  --accent-on-dark: var(--color-neon);   /* kickers/numerals on dark slides */
  --rule: var(--color-coral);            /* thin coral rules / borders */
}