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 {
  /* Page Layout Components */
  .page-container {
    @apply min-h-screen flex flex-col bg-cyber-dark text-white;
  }

  .page-header {
    @apply mb-8;
  }

  .page-title {
    @apply text-3xl font-mono font-bold text-white mb-2;
  }

  .page-subtitle {
    @apply text-cyber-neutral;
  }

  .page-content {
    @apply flex-1 pt-16;
  }

  .page-main {
    @apply container mx-auto px-4 py-8 max-w-6xl;
  }

  .page-footer {
    @apply border-t border-cyber-muted py-4 text-center text-xs text-cyber-neutral;
  }

  /* Card Components */
  .card-base {
    @apply bg-cyber-muted/20 border border-cyber-muted/30 rounded-sm transition-all duration-200;
  }

  .card-hover {
    @apply hover:bg-cyber-muted/30 hover:border-cyber-accent/50;
  }

  .card-padding {
    @apply p-6;
  }

  .card-padding-sm {
    @apply p-4;
  }

  .thread-card {
    @apply card-base card-hover card-padding-sm mb-4;
  }

  .board-card {
    @apply card-base card-hover card-padding-sm mb-3;
  }

  .comment-card {
    @apply border-l-2 border-muted pl-3 py-2 my-2 hover:border-primary transition-colors;
  }

  /* Content Cards */
  .content-card {
    @apply card-base card-hover card-padding;
  }

  .content-card-sm {
    @apply card-base card-hover card-padding-sm;
  }

  /* Status Indicators */
  .status-ready {
    @apply bg-green-500/20 text-green-400 border-green-500/30;
  }

  .status-warning {
    @apply bg-orange-500/20 text-orange-400 border-orange-500/30;
  }

  .status-error {
    @apply bg-red-500/20 text-red-400 border-red-500/30;
  }

  .status-neutral {
    @apply bg-cyber-muted/20 text-cyber-neutral border-cyber-muted/30;
  }

  /* Button Variants */
  .btn-cyber {
    @apply bg-cyber-accent hover:bg-cyber-accent/80 text-black font-mono font-medium;
  }

  .btn-cyber-outline {
    @apply border-cyber-muted/30 text-cyber-neutral hover:bg-cyber-muted/30;
  }

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

  .text-glow-subtle {
    text-shadow: 0 0 4px rgba(15, 160, 206, 0.3);
  }

  /* Spacing Utilities */
  .section-spacing {
    @apply mb-8;
  }

  .content-spacing {
    @apply mb-6;
  }

  .item-spacing {
    @apply mb-4;
  }

  /* Grid Layouts */
  .grid-main-sidebar {
    @apply grid grid-cols-1 lg:grid-cols-3 gap-6;
  }

  .grid-main-content {
    @apply lg:col-span-2;
  }

  .grid-sidebar {
    @apply lg:col-span-1;
  }

  /* Empty States */
  .empty-state {
    @apply flex flex-col items-center justify-center py-16 px-4 text-center;
  }

  .empty-state-icon {
    @apply w-16 h-16 text-cyber-accent/50 mb-4;
  }

  .empty-state-title {
    @apply text-xl font-mono font-bold text-white mb-2;
  }

  .empty-state-description {
    @apply text-cyber-neutral mb-4;
  }
}

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