/*
  Sterlingrid palette variants for A/B testing.
  Each variant overrides tokens from tokens.css and swaps in recoloured logo and background files
  from assets/img/palettes/<variant>/ (done by assets/js/ab-palette.js and the rules below).
  Activate with <html data-palette="oxford|charcoal|racing">. Every text and button pairing passes WCAG AA.

  Brand book note: these variants recolour the logo's cell and, in "racing", set the logo on green.
  The current brand book does not allow either, so adopting a winner means updating the brand book.
*/

/* B. Oxford Blue and Racing Green: a deeper, more saturated blue (a different shade of the same idea) with British Racing Green as the accent. */
:root[data-palette="oxford"]{
  --navy:#002147;          /* Oxford blue. White text 16.1:1 */
  --navy-deep:#00152E;
  --navy-hover:#0A3466;
  --text:#0A1B33;          /* 17.3:1 on white */
  --green:#004225;         /* British Racing Green. 11.6:1 on white, 10.0:1 on its tint */
  --tint:#E5F0EA;
  --sage:#7CC4A0;          /* accent on Oxford blue 7.8:1; Oxford text on it 7.8:1 */
  --sage-hover:#95D1B2;
  --navy-tint:#E1E7F0;
  --wordmark-ink:#0B3260;
}
:root[data-palette="oxford"] .cta-band{background-image:url("../img/palettes/oxford/pattern-ledger-dark.svg")}
:root[data-palette="oxford"] .page-top::before{background-image:url("../img/palettes/oxford/pattern-ledger-light.svg")}

/* C. Charcoal and Racing Green: tailoring charcoal in place of navy, Portland stone surfaces, Racing Green accent. */
:root[data-palette="charcoal"]{
  --navy:#1F2328;          /* charcoal. White text 15.8:1 */
  --navy-deep:#16191D;
  --navy-hover:#33383F;
  --text:#1F2328;
  --green:#004225;         /* 11.6:1 on white, 10.3:1 on stone */
  --tint:#E6EFE9;
  --sage:#9CCBAE;          /* 8.7:1 on charcoal; charcoal text on it 8.7:1 */
  --sage-hover:#B2D8C0;
  --sterling:#B3B0A8;      /* warm grey, 7.3:1 on charcoal */
  --on-dark-text:#E4E2DC;  /* 12.2:1 */
  --mist:#F4F1EA;          /* Portland stone */
  --hairline:#E2DCD0;
  --surface-2:#EDE8DE;
  --track:#E4DED2;
  --navy-tint:#E8E4DB;
  --muted:#5C6066;         /* 5.6:1 on stone */
  --wordmark-ink:#2D3238;
}
:root[data-palette="charcoal"] .cta-band{background-image:url("../img/palettes/charcoal/pattern-ledger-dark.svg")}
:root[data-palette="charcoal"] .page-top::before{background-image:url("../img/palettes/charcoal/pattern-ledger-light.svg")}

/* D. Racing Green and Brass: British Racing Green as the dark surface, brass accents, cream-stone surfaces. */
:root[data-palette="racing"]{
  --navy:#004225;          /* British Racing Green. White text 11.6:1 */
  --navy-deep:#002E1A;
  --navy-hover:#0A5233;
  --text:#10261C;          /* 16.0:1 on white */
  --green:#1B6B47;         /* lighter green for data on light, 6.5:1 on white */
  --tint:#E8F1EB;
  --sage:#D6B46E;          /* brass. 5.9:1 on Racing Green; Racing Green text on it 5.9:1 */
  --sage-hover:#E2C589;
  --sterling:#B5C2B9;      /* 6.3:1 on Racing Green */
  --on-dark-text:#E2E8E3;  /* 9.4:1 */
  --mist:#F5F2EA;
  --hairline:#E3DED2;
  --surface-2:#EEEADF;
  --track:#E5E0D4;
  --navy-tint:#E6EBE5;
  --muted:#58635C;         /* 5.6:1 on cream-stone */
  --wordmark-ink:#0A5233;
}
:root[data-palette="racing"] .cta-band{background-image:url("../img/palettes/racing/pattern-ledger-dark.svg")}
:root[data-palette="racing"] .page-top::before{background-image:url("../img/palettes/racing/pattern-ledger-light.svg")}