@import "tailwindcss";

@layer base {
  :root {
    /* Surfaces */
    --surface-page: #0a0a0a;
    --surface-card: rgb(23 23 23); /* neutral-900 */
    --surface-card-hover: rgb(38 38 38 / 0.5); /* neutral-800/50 */
    --surface-elevated: rgb(23 23 23); /* neutral-900 */
    --surface-input: rgb(10 10 10); /* neutral-950 */

    /* Text */
    --text-primary: rgb(245 245 245); /* neutral-100 */
    --text-secondary: rgb(163 163 163); /* neutral-400 */
    --text-muted: rgb(115 115 115); /* neutral-500 */

    /* Borders */
    --border-default: rgb(38 38 38); /* neutral-800 */
    --border-subtle: rgb(38 38 38 / 0.5); /* neutral-800/50 */
    --border-strong: rgb(64 64 64); /* neutral-700 */

    /* Accent (AgentLens emerald) */
    --accent: #10b981;
    --accent-hover: #34d399;
    --accent-muted: rgba(16, 185, 129, 0.15);
    --accent-foreground: #0a0a0a;

    /* Radius */
    --radius-card: 1rem;
    --radius-button: 0.5rem;
    --radius-icon: 0.75rem;
    --radius-badge: 9999px;

    /* Fonts */
    --font-sans: var(--font-inter), system-ui, sans-serif;
    --font-mono: var(--font-jetbrains), 'JetBrains Mono', 'Fira Code', monospace;
  }
}