/* Light, the default */
:root{
  --primary: #134E4A;
  --primary-rgb: 19,78,74;
  --accent: #B4682E;
  --accent-rgb: 180,104,46;
  --bg: #FBF7F0;
  --text: #1F2A2A;
  --primary-soft: rgba(19,78,74,.12);
  --accent-soft: rgba(180,104,46,.14);
  --card: #ffffff;
  --line: #ece5d8;
  --muted: #6b7570;
  --radius:14px;
  --shadow: 0 8px 26px rgba(20,40,40,.06);
  --header-bg:#ffffff;
  --input-bg:#ffffff;
  /* the deep brand colour, used wherever white text sits on it, so it
     stays dark in both light and dark mode */
  --primary-solid: #134E4A;
  color-scheme: light;
}

/* Dark, when the member chooses it */
html[data-theme="dark"]{
  --primary: #6D918F;
  --primary-rgb: 109,145,143;
  --accent: #C28354;
  --accent-rgb: 194,131,84;
  --bg: #0F1C1B;
  --text: #E9EFEE;
  --primary-soft: rgba(109,145,143,.12);
  --accent-soft: rgba(194,131,84,.14);
  --card: #162624;
  --line: #25403D;
  --muted: #93A7A4;
  --radius:14px;
  --shadow: 0 8px 26px rgba(0,0,0,.38);
  --header-bg:#162624;
  --input-bg:#0F1C1B;
  --primary-solid:#123B38;
  color-scheme: dark;
}

/* Follow the device setting until the member picks one themselves */
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
  --primary: #6D918F;
  --primary-rgb: 109,145,143;
  --accent: #C28354;
  --accent-rgb: 194,131,84;
  --bg: #0F1C1B;
  --text: #E9EFEE;
  --primary-soft: rgba(109,145,143,.12);
  --accent-soft: rgba(194,131,84,.14);
  --card: #162624;
  --line: #25403D;
  --muted: #93A7A4;
  --radius:14px;
  --shadow: 0 8px 26px rgba(0,0,0,.38);
    --header-bg:#162624;
    --input-bg:#0F1C1B;
    --primary-solid:#123B38;
    color-scheme: dark;
  }
}