@layer theme, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);

@source "../**/*.{svelte,js}";

@theme {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;

  --color-background: var(--bg);
  --color-foreground: var(--text);
  --color-muted: var(--muted);
  --color-dim: var(--dim);
  --color-border: var(--border);
  --color-ring: var(--admin-ring);
  --color-accent: var(--accent);
  --color-destructive: var(--danger);
  --color-admin-bg: var(--admin-bg);
  --color-admin-surface: var(--admin-surface);
  --color-admin-surface-2: var(--admin-surface-2);
  --color-admin-elev: var(--admin-elev);
  --color-admin-border: var(--admin-border);
  --color-admin-text: var(--admin-text);
  --color-admin-muted: var(--admin-muted);
  --color-admin-dim: var(--admin-dim);

  --radius-card: 12px;
  --radius-control: var(--radius);
}