/* ================================================================
   WKO LLANELLI KICKBOXING ACADEMY — BRAND
   ================================================================
   The club's entire visual identity. Loaded straight after the shared
   assets/css/style.css, which it overrides; everything else — layout,
   components, both themes — comes from that shared file and is not
   copied or edited per client.

   This is also the file that goes to AMM, so the dynamic pages and
   this index page are guaranteed to be the same brand.

   WHERE THESE VALUES CAME FROM
   ------------------------------------------------------------------
   Sampled off the flat WKO roundel (LOGOS/WKO_Welsh_Logo.png). It is
   red and white only — no black anywhere — and the red quantises
   overwhelmingly to a single value, #E81820.

   --brand is HALF A STEP DARKER than that, at #d81420, and the reason
   is --on-brand. White on the artwork's own #e81820 measures 4.58:1,
   which passes AA for normal text with almost nothing in hand; the
   button labels in this template are 13-14px uppercase, so that is
   exactly the case it has to clear. #d81420 takes it to 5.20:1 and is
   still unmistakably the roundel's red. Do not push it back up.

       ratio(#ffffff, #d81420)   = 5.20   text on the fill        AA
       ratio(#ff4d55, #0a0a0a)   = 6.08   accent text, dark bands AAA
       ratio(#ff4d55, #141414)   = 5.65   same, on the ink-2 band AA
       ratio(#a80c14, #f1efea)   = 6.70   accent text, light mode AAA
       ratio(#a80c14, #ffffff)   = 7.70   accent text, white band AAA
       ratio(#ffffff, #4a0a0e)   = 15.66  nav dropdown ground     AAA

   The page defaults to LIGHT (Luke, 2026-10-12), so --brand-on-light
   is the one doing most of the work. --brand-on-dark still matters:
   the hero, the CTA band and the nav dropdown are dark in both
   themes.

   Do not add --brand-bright: it is derived in style.css from
   --brand-on-dark and --brand-on-light, and setting it here would
   break the light theme.
   ================================================================ */

:root{
  --brand:          #d81420;     /* the fill: buttons, ticker, badges, calendar days */
  --brand-deep:     #4a0a0e;     /* shadow / gradient partner, and the nav dropdown ground */
  --brand-rgb:      216,20,32;   /* --brand as r,g,b — every low-alpha brand tint tracks this */
  --on-brand:       #ffffff;     /* text ON a --brand fill — 5.20:1 */
  --brand-on-dark:  #ff4d55;     /* accent text on the always-dark hero / CTA / dropdown */
  --brand-on-light: #a80c14;     /* accent text on light mode and the white affiliate band */
}