.dark, .dark-theme {
  --brown-1: #12110f;
  --brown-2: #1c1816;
  --brown-3: #28211d;
  --brown-4: #322922;
  --brown-5: #3e3128;
  --brown-6: #4d3c2f;
  --brown-7: #614a39;
  --brown-8: #7c5f46;
  --brown-9: #ad7f58;
  --brown-10: #b88c67;
  --brown-11: #dbb594;
  --brown-12: #f2e1ca;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --brown-1: color(display-p3 0.071 0.067 0.059);
      --brown-2: color(display-p3 0.107 0.095 0.087);
      --brown-3: color(display-p3 0.151 0.13 0.115);
      --brown-4: color(display-p3 0.191 0.161 0.138);
      --brown-5: color(display-p3 0.235 0.194 0.162);
      --brown-6: color(display-p3 0.291 0.237 0.192);
      --brown-7: color(display-p3 0.365 0.295 0.232);
      --brown-8: color(display-p3 0.469 0.377 0.287);
      --brown-9: color(display-p3 0.651 0.505 0.368);
      --brown-10: color(display-p3 0.697 0.557 0.423);
      --brown-11: color(display-p3 0.835 0.715 0.597);
      --brown-12: color(display-p3 0.938 0.885 0.802);
    }
  }
}