/* Theme tokens shared by every Sarus UI surface. */
:root {
  color-scheme: light;
  --sarus-bg: #f5f7fb;
  --sarus-panel: #ffffff;
  --sarus-surface: #f8fafc;
  --sarus-border: #d8dee8;
  --sarus-border-soft: #e7ebf1;
  --sarus-text: #1f2937;
  --sarus-muted: #667085;
  --sarus-control-bg: #ffffff;
  --sarus-control-border: #cfd6e2;
  --sarus-hover: #f8fbff;
  --sarus-selected: #eef6ff;
  --sarus-primary: #066fd1;
  --sarus-primary-dark: #055fb3;
  --sarus-danger: #d63939;
  --sarus-success: #2fb344;
  --sarus-warning: #f59f00;
  --sarus-shadow: 0 8px 24px rgba(29, 39, 58, 0.08);
  --sarus-radius: 0;
}

/* Dark theme token overrides. */
body[data-theme="dark"] {
  color-scheme: dark;
  --sarus-bg: #0f172a;
  --sarus-panel: #182235;
  --sarus-surface: #111827;
  --sarus-border: #314057;
  --sarus-border-soft: #26354b;
  --sarus-text: #e5edf8;
  --sarus-muted: #9aa8bd;
  --sarus-control-bg: #111827;
  --sarus-control-border: #3b4b63;
  --sarus-hover: #1d2a3f;
  --sarus-selected: #17365d;
  --sarus-primary: #066fd1;
  --sarus-primary-dark: #055fb3;
  --sarus-danger: #d63939;
  --sarus-success: #2fb344;
  --sarus-warning: #f59f00;
  --sarus-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

/* Global sizing, typography, control inheritance, focus, and hidden state. */
*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--sarus-bg); color: var(--sarus-text); font: 14px/1.45 "Segoe UI", Tahoma, Arial, sans-serif; }
button, input, select, textarea { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--sarus-primary); outline-offset: 2px; }

/* Dark-theme scrollbar treatment. */
body[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; }
body[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--sarus-bg); }
body[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--sarus-border); }