:root {
  --bg-base: #f4f4f5;
  --bg-card: #ffffff;
  --bg-input: #f4f4f5;
  --bg-hover: #e4e4e7;
  --border: #e4e4e7;
  --border-hover: #d4d4d8;
  --text-primary: #09090b;
  --text-secondary: #52525b;
  --text-muted: #a1a1aa;
  --active-bg: rgba(16, 185, 129, 0.12);
  --active-text: #34d399;

  /* z-index scale */
  --z-sidebar: 100;
  --z-topbar: 110;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
}

[data-theme="dark"] {
  --bg-base: #09090b;
  --bg-card: #18181b;
  --bg-input: #09090b;
  --bg-hover: #27272a;
  --border: #27272a;
  --border-hover: #3f3f46;
  --text-primary: #fafafa;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --active-bg: rgba(16, 185, 129, 0.12);
  --active-text: #34d399;
}