/* Willow Spin website palette. This is the one place to change the site's colours.
   Documented in docs/PALETTE.md. test/theme-contrast.test.mjs checks the WCAG AA pairs. */
:root {
  color-scheme: light;

  /* Page and text */
  --bg: #FFFBF4;            /* Soft cream page background */
  --text: #2A2340;          /* Main text: a slightly softer version of the character outline */
  --text-soft: #574F6E;     /* Secondary text and form field borders */
  --outline: #1D1630;       /* Character outline: button borders and illustrations */
  --line: #BE9FEF;          /* Decorative borders and dividers */

  /* Main brand: Willow's lilac (leotard and bobbles) */
  --brand: #BE9FEF;         /* Header and buttons, always with --on-brand text */
  --on-brand: #2A2340;
  --link: #7533DD;          /* Darker shade of lilac for links, which lilac is too light for */
  --brand-tint: #F1E7F3;

  /* Accent: Willow's happy pink (tutu) */
  --accent: #F2318F;        /* Non-text highlights only, as it's too light for AA text */
  --accent-strong: #B90C60; /* Darker shade of the pink for badges and hover backgrounds */
  --on-accent-strong: #FFFFFF;
  --link-hover: #B90C60;
  --focus: #B90C60;
  --accent-tint: #FCCFDE;

  /* Supporting colours, used sparingly */
  --teal: #1FA6A6;          /* Juno's dungarees */
  --teal-strong: #146969;
  --teal-tint: #CEE8E3;
  --yellow: #FFF450;        /* Willow's nervous tutu */
  --yellow-tint: #FFF9D0;
  --orange: #F58A2C;        /* Grandma Pom's cardigan */
  --orange-strong: #964A07;
  --orange-tint: #FDE2C8;

  /* Messages */
  --error: #B90C60;
  --success: #146969;
}