/* Shared visual tokens. Module styles must use these variables instead of introducing palette values. */
:root {
  --bg: #20283a;
  --surface: #071422;
  --surface-2: #0d1d30;
  --surface-3: #12283f;
  --panel: #f7fbff;
  --panel-2: #ffffff;
  --ink: #edf6ff;
  --ink-dark: #101828;
  --muted: #8da2b9;
  --muted-dark: #64748b;
  --line: rgba(148, 163, 184, 0.24);
  --line-light: #d8e4f0;
  --purple: #7c5cff;
  --cyan: #22c7f2;
  --green: #2dd4a3;
  --warning: #f59e0b;
  --danger: #ef4444;
  --radius: 8px;
  color-scheme: dark;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"] {
  --bg: #dbe7ef;
  --surface: #ffffff;
  --surface-2: #edf5f9;
  --surface-3: #d9eaf3;
  --panel: #f7fbff;
  --panel-2: #ffffff;
  --ink: #102a43;
  --ink-dark: #102a43;
  --muted: #48677c;
  --muted-dark: #48677c;
  --line: rgba(11, 73, 110, 0.28);
  --line-light: #b8cfde;
  --purple: #0877aa;
  --cyan: #007da8;
  --green: #14866d;
  --warning: #b86900;
  --danger: #c73545;
  color-scheme: light;
}