apps/web-client/src/index.css

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

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

@layer base {
  :root {
    --background: 240 10% 2%;
    --foreground: 0 0% 95%;

    --card: 240 10% 4%;
    --card-foreground: 0 0% 95%;

    --popover: 240 10% 4%;
    --popover-foreground: 0 0% 95%;

    /* Neon Green / Cypherpunk */
    --primary: 142 70% 50%;
    --primary-foreground: 240 10% 2%;

    --secondary: 240 6% 10%;
    --secondary-foreground: 0 0% 80%;

    --muted: 240 6% 10%;
    --muted-foreground: 240 5% 55%;

    /* Electric Violet */
    --accent: 270 100% 60%;
    --accent-foreground: 0 0% 98%;

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

    --border: 240 10% 12%;
    --input: 240 10% 12%;
    --ring: 142 70% 50%;

    --radius: 0px;

    /* Custom tokens */
    --glow-primary: 142 70% 50%;
    --glow-accent: 270 100% 60%;
    --surface-glass: 240 10% 4%;
  }
}

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

  body {
    @apply bg-background text-foreground font-sans antialiased selection:bg-primary selection:text-primary-foreground;
    background-image: 
      radial-gradient(circle at 50% 50%, hsl(var(--primary) / 0.03), transparent 50%),
      linear-gradient(hsl(var(--background)), hsl(var(--background)));
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-bold tracking-tight;
    font-family: 'Space Grotesk', system-ui, sans-serif;
  }
}

@layer utilities {
  .text-gradient-primary {
    @apply bg-clip-text text-transparent;
    background-image: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
  }

  .glow-primary {
    box-shadow: 0 0 20px -5px hsl(var(--glow-primary) / 0.5),
                0 0 40px -10px hsl(var(--glow-primary) / 0.3);
  }

  .glow-border {
    border-color: hsl(var(--primary) / 0.5);
    box-shadow: 0 0 10px -2px hsl(var(--primary) / 0.3);
  }

  .glass {
    background: hsl(var(--surface-glass) / 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid hsl(var(--border));
  }

  .grid-pattern {
    background-image: 
      linear-gradient(hsl(var(--border) / 0.15) 1px, transparent 1px),
      linear-gradient(90deg, hsl(var(--border) / 0.15) 1px, transparent 1px);
    background-size: 60px 60px;
  }

  .scanline {
    position: relative;
    overflow: hidden;
  }

  .scanline::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(
      rgba(18, 16, 16, 0) 50%,
      rgba(0, 0, 0, 0.06) 50%
    );
    z-index: 99;
    background-size: 100% 4px;
    pointer-events: none;
  }

  .terminal-cursor::after {
    content: "_";
    animation: blink 1s step-end infinite;
  }

  @keyframes blink {
    from, to { opacity: 1; }
    50% { opacity: 0; }
  }

  /* Editorial offset utility */
  .offset-right {
    margin-left: auto;
    margin-right: 0;
  }

  .offset-left {
    margin-left: 0;
    margin-right: auto;
  }
}