:root,
:host {
  --bg: #f8f4f7;
  --surface: #ffffff;
  --text: #241420;
  --text2: #6a5866;
  --line: #e8dee5;
  --brand: #45163f;
  --brandInk: #ffffff;
  --below: #0e7044;
  --belowT: #e2f4ea;
  --fair: #5e4f5c;
  --fairT: #f1ebf0;
  --unsure: #6a5866;
  --unsureT: #f4e6f0;
  --above: #8c2455;
  --aboveT: #f7e4ed;
  --sky: #8fd0ff;
  --leaf: #7fbf6a;
}

:host([data-theme="dark"]),
:root[data-theme="dark"] {
  --bg: #170f16;
  --surface: #22171f;
  --text: #f6eef3;
  --text2: #b7a7b3;
  --line: #3a2a35;
  --brand: #e7a6d8;
  --brandInk: #22171f;
  --below: #67d69b;
  --belowT: rgba(103, 214, 155, 0.15);
  --fair: #cdbfc9;
  --fairT: rgba(205, 191, 201, 0.12);
  --unsure: #b7a7b3;
  --unsureT: rgba(231, 166, 216, 0.12);
  --above: #f29ac0;
  --aboveT: rgba(242, 154, 192, 0.15);
  --sky: #8fd0ff;
  --leaf: #7fbf6a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #170f16;
    --surface: #22171f;
    --text: #f6eef3;
    --text2: #b7a7b3;
    --line: #3a2a35;
    --brand: #e7a6d8;
    --brandInk: #22171f;
    --below: #67d69b;
    --belowT: rgba(103, 214, 155, 0.15);
    --fair: #cdbfc9;
    --fairT: rgba(205, 191, 201, 0.12);
    --unsure: #b7a7b3;
    --unsureT: rgba(231, 166, 216, 0.12);
    --above: #f29ac0;
    --aboveT: rgba(242, 154, 192, 0.15);
    --sky: #8fd0ff;
    --leaf: #7fbf6a;
  }
}