/* ==========================================================================
   BMA Design Tokens
   Single source of truth for colour, type and radius.
   Nothing else in the codebase may hardcode a hex value.
   ========================================================================== */

:root {
  /* --- Brand core ------------------------------------------------------ */
  --bma-navy:        #1B2A4A;
  --bma-navy-deep:   #16324F;   /* darker navy, used by Sleep Republic ES */

  --bma-gold:        #B8860B;   /* primary  — buttons, links, accents */
  --bma-gold-mid:    #D4A24E;   /* hover / mid tone */
  --bma-gold-light:  #E8C078;   /* on dark backgrounds */

  --bma-cream:       #F5F0E8;   /* page background */
  --bma-cream-light: #FFFDF7;   /* card / raised surface */
  --bma-white:       #FFFFFF;

  --bma-border:      #E5DDD0;

  --bma-text:        #1A1A1A;   /* body copy */
  --bma-text-muted:  #444444;   /* secondary copy */

  /* --- Semantic (pros/cons, states) ------------------------------------ */
  --bma-pro:         #1E7A44;
  --bma-con:         #A3271F;

  /* --- Typography ------------------------------------------------------ */
  --bma-font-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --bma-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Weights actually loaded by functions.php — do not use others, the
     browser will fake-bold them and headings will look subtly wrong. */
  --bma-w-head-semi: 600;
  --bma-w-head-bold: 700;
  --bma-w-head-black: 800;
  --bma-w-body: 400;
  --bma-w-body-med: 500;
  --bma-w-body-semi: 600;
  --bma-w-body-bold: 700;

  /* --- Radius ---------------------------------------------------------- */
  --bma-r-card:   14px;   /* spec: 12-16px */
  --bma-r-hero:   22px;
  --bma-r-btn:    10px;
  --bma-r-pill:   999px;

  /* --- Spacing rhythm --------------------------------------------------- */
  --bma-gap:      24px;
  --bma-section:  64px;

  /* --- Layout ----------------------------------------------------------- */
  --bma-maxw:     1200px;
  --bma-col-min:  200px;   /* minmax() floor for auto-fit grids */
}

/* ==========================================================================
   Brand accent colours
   Each review page sets its own brand colour by adding a data attribute to
   the page root, e.g. <div class="bma" data-brand="yinahla">.
   Components then read var(--bma-brand) — they never hardcode a brand hex.
   ========================================================================== */

/* Fallbacks first, so the more specific [data-brand] rules below win. */
.bma {
  --bma-brand: var(--bma-navy);
  --bma-brand-on: var(--bma-text);
}

/* Matched on [data-brand] rather than .bma[data-brand] so brand colour is
   available to anything that carries the attribute — the quiz result card sets
   it on its own wrapper, which is not inside a .bma page shell. */
[data-brand="yinahla"]          { --bma-brand: #8E1838; }
[data-brand="sleepfirm"]        { --bma-brand: #0A0A0A; }
[data-brand="sleeprepublic"]    { --bma-brand: #1A7A7A; }
[data-brand="sleeprepublic-es"] { --bma-brand: #16324F; }
[data-brand="luxara"]           { --bma-brand: #8B6914; }
[data-brand="ergoflex"]         { --bma-brand: #4A2C6A; }
[data-brand="koala"]            { --bma-brand: #5B6E4E; }
[data-brand="ecosa"]            { --bma-brand: #1A4A7A; }
[data-brand="emma"]             { --bma-brand: #8B1A1A; }
[data-brand="origin"]           { --bma-brand: #E8720C; }
[data-brand="onebed"]           { --bma-brand: #2D6A4F; }
[data-brand="sleepingduck"]     { --bma-brand: #2A6B5E; }

/* Brands whose colour is dark enough that text on top must go white.
   Components use this instead of guessing per-brand. */
.bma[data-brand="sleepfirm"],
.bma[data-brand="ergoflex"],
.bma[data-brand="koala"],
.bma[data-brand="sleepingduck"],
.bma[data-brand="sleeprepublic-es"],
.bma[data-brand="yinahla"] { --bma-brand-on: #FFFFFF; }