@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Surfaces */
    --background: 240 10% 4%;        /* OLED near-black #09090B */
    --foreground: 210 20% 98%;       /* near-white */
    --surface: 240 8% 7%;            /* #0F1115 */
    --surface-elevated: 240 7% 10%;  /* #15171C */
    --card: 240 7% 9%;
    --card-foreground: 210 20% 98%;

    /* Brand & state */
    --primary: 142 76% 47%;          /* #22C55E green accent */
    --primary-foreground: 240 10% 4%;
    --secondary: 240 5% 18%;
    --secondary-foreground: 210 20% 98%;
    --muted: 240 5% 14%;
    --muted-foreground: 220 9% 64%;
    --accent: 240 5% 14%;
    --accent-foreground: 210 20% 98%;
    --destructive: 0 84% 60%;        /* #EF4444 */
    --destructive-foreground: 0 0% 100%;
    --success: 142 76% 47%;
    --success-foreground: 240 10% 4%;
    --warning: 38 92% 56%;           /* #F59E0B */
    --warning-foreground: 240 10% 4%;
    --info: 217 91% 60%;             /* #3B82F6 */
    --info-foreground: 0 0% 100%;

    --border: 240 5% 14%;
    --input: 240 5% 14%;
    --ring: 142 76% 47%;
    --radius: 0.625rem;
  }

  * { border-color: hsl(var(--border)); }

  html {
    font-family: var(--font-sans), system-ui, sans-serif;
    color-scheme: dark;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: hsl(var(--background)); }
  ::-webkit-scrollbar-thumb {
    background: hsl(var(--border));
    border-radius: 6px;
    border: 2px solid hsl(var(--background));
  }
  ::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / 0.4); }

  ::selection {
    background: hsl(var(--primary) / 0.3);
    color: hsl(var(--foreground));
  }

  :focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
  }
}

@layer components {
  .surface {
    @apply bg-surface border border-border rounded-lg;
  }
  .surface-elevated {
    @apply bg-surface-elevated border border-border rounded-lg;
  }
  .text-balance { text-wrap: balance; }

  .grid-bg {
    background-image:
      linear-gradient(to right, hsl(var(--border) / 0.4) 1px, transparent 1px),
      linear-gradient(to bottom, hsl(var(--border) / 0.4) 1px, transparent 1px);
    background-size: 32px 32px;
  }
}

@layer utilities {
  .text-mono { font-family: var(--font-mono), ui-monospace, monospace; }

  /* Status dot */
  .dot { @apply inline-block w-1.5 h-1.5 rounded-full; }
  .dot-success { @apply bg-success; box-shadow: 0 0 8px hsl(var(--success) / 0.6); }
  .dot-warning { @apply bg-warning; box-shadow: 0 0 8px hsl(var(--warning) / 0.6); }
  .dot-danger { @apply bg-destructive; box-shadow: 0 0 8px hsl(var(--destructive) / 0.6); }
  .dot-info { @apply bg-info; box-shadow: 0 0 8px hsl(var(--info) / 0.6); }
  .dot-muted { @apply bg-muted-foreground/40; }
}