@import "tailwindcss";

:root {
  --background: #09090b;
  --foreground: #fafafa;
  --border: #27272a;
  --primary: #06b6d4;
  --primary-foreground: #0c0c0e;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --warning: #d97706;
  --muted: #27272a;
  --muted-foreground: #a1a1aa;
  --surface-subtle: color-mix(in srgb, var(--background) 70%, transparent);
  --surface-elevated: color-mix(in srgb, var(--background) 95%, transparent);
  --muted-card: color-mix(in srgb, var(--muted) 60%, var(--background));
  --destructive-border: color-mix(
    in srgb,
    var(--destructive) 30%,
    var(--border)
  );
  --destructive-subtle: color-mix(
    in srgb,
    var(--destructive) 5%,
    var(--background)
  );
  --warning-border: color-mix(in srgb, var(--warning) 40%, var(--border));
  --warning-subtle: color-mix(in srgb, var(--warning) 10%, var(--background));
  --primary-subtle: color-mix(in srgb, var(--primary) 15%, var(--background));
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-border: var(--border);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-warning: var(--warning);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-surface-subtle: var(--surface-subtle);
  --color-surface-elevated: var(--surface-elevated);
  --color-muted-card: var(--muted-card);
  --color-destructive-border: var(--destructive-border);
  --color-destructive-subtle: var(--destructive-subtle);
  --color-warning-border: var(--warning-border);
  --color-warning-subtle: var(--warning-subtle);
  --color-primary-subtle: var(--primary-subtle);
  --text-body-sm: 11px;
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

html,
body {
  height: 100%;
}
