/* installation design: contrast */
html:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #ffffff;
  --inset: #f7f7f7;
  --line: #8a8f98;
  --line-2: #797e86;
  --text: #000000;
  --text-2: #404040;
  --text-3: #525252;
  --brand: #0b3ea8;
  --brand-fill: #0b3ea8;
  --brand-fill-hover: #093286;
  --on-brand: #ffffff;
  --brand-ink: #0b3ea8;
  --brand-wash: #dde4f3;
  --brand-edge: #797e86;
  --accent: #6a1b9a;
  --accent-ink: #6a1b9a;
  --accent-wash: #eadff1;
  --accent-edge: #797e86;
  --nav-bg: #f0f0f0;
  --nav-text: #3c3c3c;
  --nav-text-muted: #4d4d4d;
  --nav-hover: #fcfcfc;
  --nav-active-bg: #dbcee2;
  --nav-active-text: #6a1b9a;
}
html[data-theme="dark"] {
  --bg: #000000;
  --surface: #080808;
  --surface-2: #040404;
  --surface-3: #141414;
  --inset: #000000;
  --line: #7a808a;
  --line-2: #828891;
  --text: #ffffff;
  --text-2: #bfbfbf;
  --text-3: #9e9e9e;
  --brand: #1462f4;
  --brand-fill: #1462f4;
  --brand-fill-hover: #104ec3;
  --on-brand: #ffffff;
  --brand-ink: #3b7cf6;
  --brand-wash: #0a1529;
  --brand-edge: #828891;
  --accent: #9f3bda;
  --accent-ink: #af5ce0;
  --accent-wash: #1d0f25;
  --accent-edge: #828891;
  --nav-bg: #0a0a0a;
  --nav-text: #c2c2c2;
  --nav-text-muted: #a2a2a2;
  --nav-hover: #1b1b1b;
  --nav-active-bg: #341844;
  --nav-active-text: #b66ae3;
}