@import "tailwindcss";

@theme {
  --color-bg: #0f172a;
  --color-fg: #e2e8f0;
  --color-accent: #38bdf8;
  --color-surface: rgba(255, 255, 255, 0.04);
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-subtle: rgba(255, 255, 255, 0.06);
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 2.5rem;
  --radius-default: 0.75rem;
  --font-family-base: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
}

:root {
  --bg: #0f172a;
  --fg: #e2e8f0;
  --accent: #38bdf8;
  --surface: rgba(255, 255, 255, 0.04);
  --border: rgba(255, 255, 255, 0.08);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 2.5rem;
  --radius: 0.75rem;
  --border-width: 1px;
  --width-card: 17.5rem;
  --font-base: 1rem;
  --font-sm: 0.875rem;
  --font-lg: 1.25rem;
  --font-xl: 2.5rem;
  --opacity-dim: 0.5;
  --opacity-medium: 0.7;
  --opacity-high: 0.8;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  line-height: 1.5;
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
}

#root {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}