@import 'tailwindcss';

@theme {
  --color-brand: #e4e4e7;
  --color-brand-foreground: #09090b;
  --color-brand-hover: #d4d4d8;
  --color-brand-muted: rgba(228, 228, 231, 0.1);
  --color-brand-200: #f4f4f5;

  --color-bg: #0a0a0a;
  --color-bg-card: rgba(17, 17, 17, 0.95);
  --color-bg-elevated: #111111;
  --color-border: #262626;
  --color-text: #fafafa;
  --color-text-muted: #a3a3a3;
  --color-text-dim: #737373;
}

@theme inline {
  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);
}

html {
  scrollbar-gutter: stable;
  color-scheme: dark;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

::selection {
  background-color: rgba(228, 228, 231, 0.3);
  color: white;
}