OpChan/src/index.css

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

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

@layer base {
  :root {
    --background: 226 20% 12%; 
    --foreground: 0 0% 95%; 

    --card: 226 20% 12%; 
    --card-foreground: 0 0% 94%;

    --popover: 226 20% 18%;
    --popover-foreground: 0 0% 94%;

    --primary: 195 82% 42%; 
    --primary-foreground: 0 0% 98%;

    --secondary: 226 20% 18%; 
    --secondary-foreground: 0 0% 94%;

    --muted: 226 13% 27%; 
    --muted-foreground: 225 6% 57%; 

    --accent: 195 82% 42%; 
    --accent-foreground: 0 0% 98%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;

    --border: 226 13% 27%; 
    --input: 226 13% 27%;
    --ring: 195 82% 42%;

    --radius: 0.25rem; 

    --sidebar-background: 226 20% 14%;
    --sidebar-foreground: 0 0% 94%;
    --sidebar-primary: 195 82% 42%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 226 20% 18%;
    --sidebar-accent-foreground: 0 0% 94%;
    --sidebar-border: 226 13% 27%;
    --sidebar-ring: 195 82% 42%;
  }
}

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

  body {
    @apply bg-background text-foreground font-mono;
    font-family: 'IBM Plex Mono', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: hsl(var(--secondary));
  }

  ::-webkit-scrollbar-thumb {
    background: hsl(var(--muted));
    border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground));
  }

  .text-glow {
    text-shadow: 0 0 8px rgba(15, 160, 206, 0.5);
  }

  *:focus-visible {
    @apply outline-none ring-2 ring-primary/70 ring-offset-1 ring-offset-background;
  }
  
  h1, h2, h3, h4, h5, h6, button, input, textarea {
    @apply font-mono;
  }
  
  .btn {
    @apply inline-flex items-center justify-center rounded-sm px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none disabled:opacity-50;
  }
}

@layer components {
  .thread-card {
    @apply border border-cyber-muted bg-cyber-dark hover:bg-cyber-muted/20 transition-colors rounded-sm p-4 mb-4;
  }
  
  .board-card {
    @apply border border-cyber-muted bg-cyber-dark hover:bg-cyber-muted/20 transition-colors rounded-sm p-3 mb-3;
  }
  
  .comment-card {
    @apply border-l-2 border-muted pl-3 py-2 my-2 hover:border-primary transition-colors;
  }
}

@keyframes cyber-flicker {
  0%, 100% {
    opacity: 1;
    filter: drop-shadow(0 0 2px rgba(0, 255, 255, 0.8));
  }
  8%, 10% {
    opacity: 0.8;
    filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.8));
  }
  20%, 25% {
    opacity: 1;
    filter: drop-shadow(0 0 1px rgba(0, 255, 255, 0.5));
  }
  30% {
    opacity: 0.6;
    filter: drop-shadow(0 0 8px rgba(0, 255, 255, 1));
  }
  40%, 45% {
    opacity: 1;
    filter: drop-shadow(0 0 2px rgba(0, 255, 255, 0.6));
  }
  50%, 55% {
    opacity: 0.9;
    filter: drop-shadow(0 0 3px rgba(0, 255, 255, 0.8));
  }
  60%, 100% {
    opacity: 1;
    filter: drop-shadow(0 0 2px rgba(0, 255, 255, 0.6));
  }
}

.cyberpunk-glow {
  animation: cyber-flicker 8s infinite;
  will-change: filter, opacity;
}