:root,
html[data-theme="light"] {
  color-scheme: light;
  --ekeko-bg: #f7f7fb;
  --ekeko-surface: #ffffff;
  --ekeko-surface-secondary: #f2f2f6;
  --ekeko-text: #191923;
  --ekeko-text-muted: #85838e;
  --ekeko-border: #e3e1e8;
  --ekeko-primary: #7548ed;
  --ekeko-primary-hover: #6939e4;
  --ekeko-danger: #dc3545;
  --ekeko-success: #198754;
  --ekeko-radius-sm: 12px;
  --ekeko-radius-md: 18px;
  --ekeko-shadow-sm: 0 6px 20px rgba(20, 20, 30, .06);
  --ekeko-background: var(--ekeko-bg);
  --ekeko-muted: var(--ekeko-text-muted);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ekeko-bg: #0b0b0d;
  --ekeko-surface: #202326;
  --ekeko-surface-secondary: #292c2f;
  --ekeko-text: #f6f6f8;
  --ekeko-text-muted: #9c9ca3;
  --ekeko-border: #34363a;
  --ekeko-primary: #7548ed;
  --ekeko-primary-hover: #865df2;
  --ekeko-danger: #dc3545;
  --ekeko-success: #198754;
  --ekeko-shadow-sm: 0 6px 20px rgba(0, 0, 0, .25);
}

html,
body {
  background-color: var(--ekeko-bg);
}

body {
  color: var(--ekeko-text);
}