:root {
  --color-bg: #f5f5f5;
  --color-bg-nav: #ffffffcc;
  --color-text: #111;
  --color-text-primary: #2b6cb0;
  --color-accent: #2b6cb0;
  --color-on-accent: #ffffff;
  --color-border: #ddd;
  --color-border-strong: #aaa;
  --color-text-muted: #999;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 0.9375rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
}

:root[data-theme="dark"] {
  --color-bg: #1a1a1a;
  --color-bg-nav: #222;
  --color-text: #f5f5f5;
  --color-accent: #63b3ed;
  --color-on-accent: #1a1a1a;
  --color-border: #333;
  --color-border-strong: #666;
  --color-text-muted: #777;
}

.text-primary {
  color: var(--color-text-primary);
}

* {
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Inter", system-ui, sans-serif;
}
