:root {
  --brand-prim: hsl(182 100% 9%);
  --brand-sec:  hsl(356 44% 32%);
  --ok:        hsl(147 19% 36%);
  --warn:      hsl(52 23% 34%);
  --err:       hsl(9 21% 41%);
  --info:      hsl(217 22% 41%);
}

:root {
  --bg-dark: hsl(0 0% 85%);
--bg: hsl(300 0% 90%);
--bg-light: hsl(300 50% 95%);
--bg-between: hsl(0, 0%, 94%);
--bg-lighter: hsl(300 50% 100%);
--spoiler: #909199;
--spoiler-hover: #70717a;


--text: hsl(300 0% 4%);
--text-muted: hsl(0 0% 28%);
--highlight: hsl(300 50% 100%);
--border: hsl(NaN 0% 50%);

--dividers: #404040;

  --primary:   var(--brand-prim);
  --secondary: var(--brand-sec);
  --success:   var(--ok);
  --warning:   var(--warn);
  --danger:    var(--err);
  --info:      var(--info);
}

:root[data-theme="dark"]{
  --bg-dark:  #121214;
  --bg:       #1a1a1e;
  --bg-light: #222327;
  --bg-lighter:#212728;
  --bg-between: #16161a;
  --spoiler: #666771;
  --spoiler-hover: #85868e;

  --text:        hsl(0 0% 98%);
  --text-muted:  hsl(210 5% 70%);
  --border:      hsl(210 10% 70% / 0.22);
  --highlight:   hsl(210 10% 18%);
  --dividers: #949494;
}