/* A quiet canvas and clear surfaces, with indigo reserved for selection and action. */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --bg-0: #f6f7fb;
  --bg-1: #ffffff;
  --bg-2: #f7f8fa;
  --bg-3: #eef0f4;
  --sidebar-bg: #f0f2f8;
  --border: #e1e5ef;
  --border-strong: #d7dce5;
  --text-0: #202439;
  --text-1: #373e53;
  --text-2: #535d70;
  --text-3: #657085;
  --text-4: #71798a;
  --brand: #5951cf;
  --brand-hover: #4941b8;
  --on-brand: #ffffff;
  --brand-bg: #eeecfb;
  --brand-border: #d9d4f4;
  --green: #21784b;
  --green-bg: #edf8f1;
  --green-border: #c5e6d1;
  --amber: #996618;
  --amber-bg: #fff7e8;
  --amber-border: #f2dfb7;
  --red: #bd3d48;
  --red-bg: #fff0f1;
  --red-border: #f4cdd2;
  --overlay: rgba(26, 32, 44, 0.28);
  --shadow: 0 12px 40px rgba(25, 32, 48, 0.10), 0 2px 8px rgba(25, 32, 48, 0.04);
  --focus-ring: 0 0 0 3px rgba(99, 88, 204, 0.16);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-0: #161921;
  --bg-1: #1e222e;
  --bg-2: #25262e;
  --bg-3: #2f313c;
  --sidebar-bg: #191d27;
  --border: #30323d;
  --border-strong: #444754;
  --text-0: #f3f4f8;
  --text-1: #dedfe8;
  --text-2: #c0c3d0;
  --text-3: #a7adbf;
  --text-4: #999fb2;
  --brand: #a298f0;
  --brand-hover: #b3aaf7;
  --on-brand: #211b3c;
  --brand-bg: #302b48;
  --brand-border: #4a4267;
  --green: #81cf9f;
  --green-bg: #20362a;
  --green-border: #335540;
  --amber: #e7be79;
  --amber-bg: #3b3020;
  --amber-border: #59472c;
  --red: #ed9aa4;
  --red-bg: #3e282e;
  --red-border: #64353e;
  --overlay: rgba(0, 0, 0, 0.5);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.32);
  --focus-ring: 0 0 0 3px rgba(162, 152, 240, 0.24);
}