bostrom.network/src/index.css

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Play:wght@400;700&display=swap');

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

/* Bostrom Cyberpunk Design System */

@layer base {
  :root {
    /* Core: Pure black background */
    --background: 0 0% 0%;
    --foreground: 0 0% 100%;

    /* Cards: Slightly elevated dark */
    --card: 0 0% 5%;
    --card-foreground: 0 0% 100%;

    --popover: 0 0% 5%;
    --popover-foreground: 0 0% 100%;

    /* Primary: Acid Green */
    --primary: 130 100% 50%;
    --primary-foreground: 0 0% 0%;

    /* Secondary: Neon Cyan */
    --secondary: 180 100% 50%;
    --secondary-foreground: 0 0% 0%;

    /* Muted: Dark gray */
    --muted: 0 0% 12%;
    --muted-foreground: 0 0% 60%;

    /* Accent: Neon Magenta */
    --accent: 300 100% 60%;
    --accent-foreground: 0 0% 0%;

    /* Neon Yellow */
    --neon-yellow: 60 100% 50%;
    
    /* Neon Orange */
    --neon-orange: 30 100% 50%;

    /* Destructive */
    --destructive: 0 100% 50%;
    --destructive-foreground: 0 0% 100%;

    --border: 0 0% 15%;
    --input: 0 0% 15%;
    --ring: 130 100% 50%;

    --radius: 0.5rem;

    /* Glow effects */
    --glow-primary: 0 0 20px hsl(130 100% 50% / 0.5), 0 0 40px hsl(130 100% 50% / 0.3);
    --glow-secondary: 0 0 20px hsl(180 100% 50% / 0.5), 0 0 40px hsl(180 100% 50% / 0.3);
    --glow-accent: 0 0 20px hsl(300 100% 60% / 0.5), 0 0 40px hsl(300 100% 60% / 0.3);

    --sidebar-background: 0 0% 3%;
    --sidebar-foreground: 0 0% 100%;
    --sidebar-primary: 130 100% 50%;
    --sidebar-primary-foreground: 0 0% 0%;
    --sidebar-accent: 0 0% 10%;
    --sidebar-accent-foreground: 0 0% 100%;
    --sidebar-border: 0 0% 15%;
    --sidebar-ring: 130 100% 50%;
  }

  .dark {
    /* Same as light - this is a dark theme only */
    --background: 0 0% 0%;
    --foreground: 0 0% 100%;
    --card: 0 0% 5%;
    --card-foreground: 0 0% 100%;
    --popover: 0 0% 5%;
    --popover-foreground: 0 0% 100%;
    --primary: 130 100% 50%;
    --primary-foreground: 0 0% 0%;
    --secondary: 180 100% 50%;
    --secondary-foreground: 0 0% 0%;
    --muted: 0 0% 12%;
    --muted-foreground: 0 0% 60%;
    --accent: 300 100% 60%;
    --accent-foreground: 0 0% 0%;
    --destructive: 0 100% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 0 0% 15%;
    --input: 0 0% 15%;
    --ring: 130 100% 50%;
  }
}

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

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground font-play antialiased;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-orbitron;
  }
}

@layer utilities {
  .text-glow-primary {
    text-shadow: 0 0 10px hsl(var(--primary) / 0.8), 0 0 20px hsl(var(--primary) / 0.5), 0 0 30px hsl(var(--primary) / 0.3);
  }

  .text-glow-secondary {
    text-shadow: 0 0 10px hsl(var(--secondary) / 0.8), 0 0 20px hsl(var(--secondary) / 0.5);
  }

  .text-glow-accent {
    text-shadow: 0 0 10px hsl(var(--accent) / 0.8), 0 0 20px hsl(var(--accent) / 0.5), 0 0 40px hsl(var(--accent) / 0.4), 0 0 60px hsl(var(--accent) / 0.3);
  }

  .text-glow-accent-intense {
    text-shadow: 0 0 5px hsl(var(--accent)), 0 0 15px hsl(var(--accent) / 0.9), 0 0 30px hsl(var(--accent) / 0.7), 0 0 50px hsl(var(--accent) / 0.5), 0 0 80px hsl(var(--accent) / 0.3);
  }

  .box-glow-primary {
    box-shadow: 0 0 20px hsl(var(--primary) / 0.4), 0 0 40px hsl(var(--primary) / 0.2);
  }

  .box-glow-secondary {
    box-shadow: 0 0 20px hsl(var(--secondary) / 0.4), 0 0 40px hsl(var(--secondary) / 0.2);
  }

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

  .gradient-text-primary {
    @apply bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent;
  }

  .animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
  }

  @keyframes pulse-glow {
    0%, 100% {
      opacity: 1;
      filter: brightness(1);
    }
    50% {
      opacity: 0.8;
      filter: brightness(1.2);
    }
  }

  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  @keyframes float {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  .animate-starlight {
    position: relative;
    background: linear-gradient(
      90deg,
      #ff0000,
      #ff8000,
      #ffff00,
      #00ff00,
      #00ffff,
      #0080ff,
      #8000ff,
      #ff00ff,
      #ff0000
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow-flow 3s linear infinite;
    filter: blur(0px);
  }

  .animate-starlight::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    background: linear-gradient(
      90deg,
      #ff0000,
      #ff8000,
      #ffff00,
      #00ff00,
      #00ffff,
      #0080ff,
      #8000ff,
      #ff00ff,
      #ff0000
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow-flow 3s linear infinite;
    filter: blur(20px);
    opacity: 0.8;
  }

  .animate-starlight::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -2;
    background: linear-gradient(
      90deg,
      #ff0000,
      #ff8000,
      #ffff00,
      #00ff00,
      #00ffff,
      #0080ff,
      #8000ff,
      #ff00ff,
      #ff0000
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow-flow 3s linear infinite;
    filter: blur(60px);
    opacity: 0.5;
  }

  @keyframes rainbow-flow {
    0% {
      background-position: 0% 50%;
    }
    100% {
      background-position: 200% 50%;
    }
  }
}