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;
}