/* installation design: graphite */
html:root {
  --bg: #eceef1;
  --surface: #f8f9fa;
  --surface-2: #f2f4f6;
  --surface-3: #ffffff;
  --inset: #e5e7ea;
  --line: #dcdfe4;
  --line-2: #c4c7cc;
  --text: #16181c;
  --text-2: #4c4e51;
  --text-3: #5a5c60;
  --brand: #4f46e5;
  --brand-fill: #4f46e5;
  --brand-fill-hover: #3f38b7;
  --on-brand: #ffffff;
  --brand-ink: #4f46e5;
  --brand-wash: #e0e0f7;
  --brand-edge: #8b88d8;
  --accent: #0f766e;
  --accent-ink: #0e6c65;
  --accent-wash: #d7e7e6;
  --accent-edge: #5f9a97;
  --nav-bg: #e3e6ea;
  --nav-text: #494c50;
  --nav-text-muted: #585a5e;
  --nav-hover: #f9fafb;
  --nav-active-bg: #c1d4d6;
  --nav-active-text: #0d635d;
}
html[data-theme="dark"] {
  --bg: #0e1013;
  --surface: #15181d;
  --surface-2: #121418;
  --surface-3: #212428;
  --inset: #0b0c0e;
  --line: #252a32;
  --line-2: #31363e;
  --text: #eceff3;
  --text-2: #b5b7bb;
  --text-3: #989a9e;
  --brand: #6b66ec;
  --brand-fill: #6964e7;
  --brand-fill-hover: #5450b9;
  --on-brand: #ffffff;
  --brand-ink: #8480ef;
  --brand-wash: #21233a;
  --brand-edge: #5b59bb;
  --accent: #12857a;
  --accent-ink: #3a9990;
  --accent-wash: #15272a;
  --accent-edge: #1a706a;
  --nav-bg: #111317;
  --nav-text: #b5b8bc;
  --nav-text-muted: #999b9f;
  --nav-hover: #222427;
  --nav-active-bg: #113333;
  --nav-active-text: #5baaa3;
}