OpChan/app/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: 210 5% 6%;
    --foreground: 45 18% 92%;

    --card: 210 4% 8%;
    --card-foreground: 45 18% 92%;

    --popover: 210 5% 10%;
    --popover-foreground: 45 18% 92%;

    --primary: 38 80% 62%;
    --primary-foreground: 0 0% 12%;

    --secondary: 210 4% 12%;
    --secondary-foreground: 45 18% 92%;

    --muted: 210 5% 18%;
    --muted-foreground: 210 10% 60%;

    --accent: 38 80% 62%;
    --accent-foreground: 0 0% 12%;

    --destructive: 2 64% 48%;
    --destructive-foreground: 45 18% 96%;

    --border: 210 6% 22%;
    --input: 210 6% 22%;
    --ring: 38 80% 62%;

    --radius: 0rem;

    --sidebar-background: 210 5% 8%;
    --sidebar-foreground: 45 18% 92%;
    --sidebar-primary: 38 80% 62%;
    --sidebar-primary-foreground: 0 0% 12%;
    --sidebar-accent: 210 4% 12%;
    --sidebar-accent-foreground: 45 18% 90%;
    --sidebar-border: 210 6% 22%;
    --sidebar-ring: 38 80% 62%;
  }
}

@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;
    letter-spacing: 0.03em;
    background-image:
      linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.03) 1px,
        transparent 1px
      ),
      linear-gradient(
        to right,
        rgba(255, 255, 255, 0.02) 1px,
        transparent 1px
      );
    background-size: 100% 32px, 32px 100%;
  }

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

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

  ::-webkit-scrollbar-thumb {
    background: hsl(var(--border));
  }

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

  .text-glow {
    text-transform: none;
    letter-spacing: 0.02em;
    text-shadow: none;
  }

  .text-glow-subtle {
    text-transform: none;
    letter-spacing: 0.01em;
    text-shadow: none;
  }

  *:focus-visible {
    @apply outline-none ring-1 ring-primary/60 ring-offset-2 ring-offset-background;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  button,
  input,
  textarea {
    @apply font-mono;
  }

  .btn {
    @apply inline-flex items-center justify-between border border-border px-3 py-2 text-xs font-normal text-foreground transition-none focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-60;
  }
}

@layer components {
  /* Page Layout Components */
  .page-container {
    @apply min-h-screen flex flex-col bg-cyber-dark text-foreground;
  }

  .page-header {
    @apply mb-2 sm:mb-3 border-b border-border pb-2 sm:pb-3;
  }

  .page-title {
    @apply text-sm sm:text-base font-semibold text-foreground mb-1;
  }

  .page-subtitle {
    @apply text-[10px] sm:text-xs text-muted-foreground;
  }

  .page-content {
    @apply flex-1 pt-4 sm:pt-6;
  }

  .page-main {
    @apply w-full mx-auto px-2 sm:px-3 md:px-4 py-2 sm:py-3 md:py-4 max-w-5xl;
  }

  .page-footer {
    @apply border-t border-border py-2 sm:py-3 text-center text-[10px] text-muted-foreground px-3;
  }

  /* Card Components - Simplified to flat list items */
  .card-base {
    @apply bg-transparent border-0 rounded-none shadow-none;
  }

  .card-hover {
    @apply hover:bg-transparent;
  }

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

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

  .thread-card {
    @apply border-b border-border/30 py-2 mb-0;
  }

  .board-card {
    @apply border-b border-border/30 py-2 mb-0;
  }

  .comment-card {
    @apply border-l border-border pl-2 py-1 my-1;
  }

  /* Content Cards */
  .content-card {
    @apply border-b border-border/30 py-2;
  }

  .content-card-sm {
    @apply border-b border-border/30 py-1;
  }

  /* 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 border border-border bg-transparent text-foreground text-xs hover:bg-white/10;
  }

  .btn-cyber-outline {
    @apply border border-border text-muted-foreground hover:text-foreground hover:bg-white/5;
  }

  /* Typography */
  /* Spacing Utilities - Simplified for raw layout */
  .section-spacing {
    @apply mb-4;
  }

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

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

  /* 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 - Simplified */
  .empty-state {
    @apply py-4 px-2 text-center;
  }

  .empty-state-icon {
    @apply hidden;
  }

  .empty-state-title {
    @apply text-xs font-mono text-muted-foreground mb-1;
  }

  .empty-state-description {
    @apply text-xs text-muted-foreground mb-2;
  }
}

.cyberpunk-glow {
  text-transform: none;
  letter-spacing: 0.02em;
  text-shadow: none;
}