client/src/index.css

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

:root {
  --background: hsl(220, 13%, 9%);
  --foreground: hsl(220, 14%, 96%);
  --card: hsl(220, 13%, 11%);
  --card-foreground: hsl(220, 14%, 96%);
  --popover: hsl(220, 13%, 11%);
  --popover-foreground: hsl(220, 14%, 96%);
  --primary: hsl(210, 98%, 51%);
  --primary-foreground: hsl(220, 14%, 96%);
  --secondary: hsl(220, 13%, 15%);
  --secondary-foreground: hsl(220, 14%, 96%);
  --muted: hsl(220, 13%, 15%);
  --muted-foreground: hsl(220, 9%, 65%);
  --accent: hsl(210, 98%, 51%);
  --accent-foreground: hsl(220, 14%, 96%);
  --destructive: hsl(0, 84%, 60%);
  --destructive-foreground: hsl(220, 14%, 96%);
  --border: hsl(220, 13%, 18%);
  --input: hsl(220, 13%, 18%);
  --ring: hsl(210, 98%, 51%);
  --chart-1: hsl(210, 98%, 51%);
  --chart-2: hsl(159, 100%, 36%);
  --chart-3: hsl(42, 93%, 56%);
  --chart-4: hsl(147, 79%, 42%);
  --chart-5: hsl(341, 75%, 51%);
  --sidebar: hsl(220, 13%, 11%);
  --sidebar-foreground: hsl(220, 14%, 96%);
  --sidebar-primary: hsl(210, 98%, 51%);
  --sidebar-primary-foreground: hsl(220, 14%, 96%);
  --sidebar-accent: hsl(220, 13%, 15%);
  --sidebar-accent-foreground: hsl(210, 98%, 51%);
  --sidebar-border: hsl(220, 13%, 18%);
  --sidebar-ring: hsl(210, 98%, 51%);
  --font-sans: "Inter", "system-ui", "sans-serif";
  --font-serif: "Georgia", "serif";
  --font-mono: "JetBrains Mono", "Consolas", "monospace";
  --radius: 8px;
}

.dark {
  --background: hsl(220, 13%, 9%);
  --foreground: hsl(220, 14%, 96%);
  --card: hsl(220, 13%, 11%);
  --card-foreground: hsl(220, 14%, 96%);
  --popover: hsl(220, 13%, 11%);
  --popover-foreground: hsl(220, 14%, 96%);
  --primary: hsl(210, 98%, 51%);
  --primary-foreground: hsl(220, 14%, 96%);
  --secondary: hsl(220, 13%, 15%);
  --secondary-foreground: hsl(220, 14%, 96%);
  --muted: hsl(220, 13%, 15%);
  --muted-foreground: hsl(220, 9%, 65%);
  --accent: hsl(210, 98%, 51%);
  --accent-foreground: hsl(220, 14%, 96%);
  --destructive: hsl(0, 84%, 60%);
  --destructive-foreground: hsl(220, 14%, 96%);
  --border: hsl(220, 13%, 18%);
  --input: hsl(220, 13%, 18%);
  --ring: hsl(210, 98%, 51%);
  --chart-1: hsl(210, 98%, 51%);
  --chart-2: hsl(159, 100%, 36%);
  --chart-3: hsl(42, 93%, 56%);
  --chart-4: hsl(147, 79%, 42%);
  --chart-5: hsl(341, 75%, 51%);
  --sidebar: hsl(220, 13%, 11%);
  --sidebar-foreground: hsl(220, 14%, 96%);
  --sidebar-primary: hsl(210, 98%, 51%);
  --sidebar-primary-foreground: hsl(220, 14%, 96%);
  --sidebar-accent: hsl(220, 13%, 15%);
  --sidebar-accent-foreground: hsl(210, 98%, 51%);
  --sidebar-border: hsl(220, 13%, 18%);
  --sidebar-ring: hsl(210, 98%, 51%);
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
    font-family: var(--font-sans);
  }

  html {
    scroll-behavior: smooth;
  }
}

@layer components {
  .syntax-highlight .keyword {
    color: hsl(210, 98%, 51%);
  }
  
  .syntax-highlight .string {
    color: hsl(42, 93%, 56%);
  }
  
  .syntax-highlight .comment {
    color: hsl(147, 79%, 42%);
    font-style: italic;
  }
  
  .syntax-highlight .function {
    color: hsl(341, 75%, 51%);
  }

  .gradient-border {
    position: relative;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: var(--radius);
    padding: 1px;
  }
  
  .gradient-border > div {
    background: var(--card);
    border-radius: calc(var(--radius) - 1px);
  }

  .terminal-cursor {
    animation: cursor-blink 1s infinite;
  }

  @keyframes cursor-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
  }
}