/* Design tokens shared by the app and the login page. */
:root {
  color-scheme: light;
  --bg: #f7f5fc;
  --sidebar: #fbfaff;
  --surface: #ffffff;
  --surface-2: #f4f1fb;
  --surface-3: #ebe6f7;
  --border: rgba(40, 20, 90, 0.08);
  --border-strong: rgba(40, 20, 90, 0.15);
  --text: #15121f;
  --text-2: #4b4560;
  --muted: #847d99;
  --grid: #ece8f5;
  --axis: #c9c2dc;
  --accent: #6a3fd0;
  --accent-strong: #5530b0;
  --accent-2: #9b59f0;
  --accent-soft: rgba(106, 63, 208, 0.1);
  --accent-track: #e9e1fb;
  --night: #0f0e1a;
  --lavender: #e6d5fb;
  --good: #0ca30c;
  --good-text: #006300;
  --good-soft: rgba(12, 163, 12, 0.1);
  --warning: #fab219;
  --warning-text: #8a5a00;
  --warning-soft: rgba(250, 178, 25, 0.16);
  --critical: #d03b3b;
  --critical-soft: rgba(208, 59, 59, 0.1);
  --s1: #6a3fd0;
  --s2: #eb6834;
  --s3: #1baf7a;
  --s4: #eda100;
  --s5: #d55181;
  --s6: #008300;
  --s7: #2a78d6;
  --sx: #b8b2c8;
  --shadow-sm: 0 1px 2px rgba(30, 15, 70, 0.05);
  --shadow: 0 1px 2px rgba(30, 15, 70, 0.04), 0 10px 28px -14px rgba(60, 30, 140, 0.18);
  --shadow-lg: 0 24px 64px -16px rgba(40, 20, 100, 0.3);
  --radius: 14px;
  --radius-sm: 10px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --bg: #0f0e1a;
    --sidebar: #13111f;
    --surface: #1a1726;
    --surface-2: #221e31;
    --surface-3: #2d283f;
    --border: rgba(230, 213, 251, 0.08);
    --border-strong: rgba(230, 213, 251, 0.15);
    --text: #f6f2ff;
    --text-2: #cbc2e2;
    --muted: #8f87a8;
    --grid: #262138;
    --axis: #3c3553;
    --accent: #9b6cf0;
    --accent-strong: #b892ff;
    --accent-2: #b38cff;
    --accent-soft: rgba(155, 108, 240, 0.16);
    --accent-track: #2b2347;
    --good-text: #3ccf3c;
    --good-soft: rgba(12, 163, 12, 0.16);
    --warning-text: #fab219;
    --warning-soft: rgba(250, 178, 25, 0.13);
    --critical-soft: rgba(208, 59, 59, 0.18);
    --s1: #9b6cf0;
    --s2: #d95926;
    --s3: #199e70;
    --s4: #c98500;
    --s5: #d55181;
    --s6: #008300;
    --s7: #3987e5;
    --sx: #5c5670;
    --shadow-sm: 0 0 #0000;
    --shadow: 0 0 #0000;
    --shadow-lg: 0 24px 64px -16px rgba(0, 0, 0, 0.7);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f0e1a;
  --sidebar: #13111f;
  --surface: #1a1726;
  --surface-2: #221e31;
  --surface-3: #2d283f;
  --border: rgba(230, 213, 251, 0.08);
  --border-strong: rgba(230, 213, 251, 0.15);
  --text: #f6f2ff;
  --text-2: #cbc2e2;
  --muted: #8f87a8;
  --grid: #262138;
  --axis: #3c3553;
  --accent: #9b6cf0;
  --accent-strong: #b892ff;
  --accent-2: #b38cff;
  --accent-soft: rgba(155, 108, 240, 0.16);
  --accent-track: #2b2347;
  --good-text: #3ccf3c;
  --good-soft: rgba(12, 163, 12, 0.16);
  --warning-text: #fab219;
  --warning-soft: rgba(250, 178, 25, 0.13);
  --critical-soft: rgba(208, 59, 59, 0.18);
  --s1: #9b6cf0;
  --s2: #d95926;
  --s3: #199e70;
  --s4: #c98500;
  --s5: #d55181;
  --s6: #008300;
  --s7: #3987e5;
  --sx: #5c5670;
  --shadow-sm: 0 0 #0000;
  --shadow: 0 0 #0000;
  --shadow-lg: 0 24px 64px -16px rgba(0, 0, 0, 0.7);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

.c1 { --c: var(--s1); }
.c2 { --c: var(--s2); }
.c3 { --c: var(--s3); }
.c4 { --c: var(--s4); }
.c5 { --c: var(--s5); }
.c6 { --c: var(--s6); }
.c7 { --c: var(--s7); }
.cx { --c: var(--sx); }

.icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: none;
  flex-shrink: 0;
}

.brand-mark svg {
  width: 18px;
  height: 18px;
}