base/frontend/react-shadcn/pc/src/index.css

@import "tailwindcss";

@theme {
  --color-background: oklch(0.15 0 0);
  --color-foreground: oklch(0.98 0.005 240);
  --color-card: oklch(0.15 0 0);
  --color-card-foreground: oklch(0.98 0.005 240);
  --color-popover: oklch(0.15 0 0);
  --color-popover-foreground: oklch(0.98 0.005 240);
  --color-primary: oklch(0.65 0.2 240);
  --color-primary-foreground: oklch(0.98 0.005 240);
  --color-secondary: oklch(0.20 0.03 240);
  --color-secondary-foreground: oklch(0.98 0.005 240);
  --color-muted: oklch(0.20 0.03 240);
  --color-muted-foreground: oklch(0.60 0.02 240);
  --color-accent: oklch(0.20 0.03 240);
  --color-accent-foreground: oklch(0.98 0.005 240);
  --color-destructive: oklch(0.55 0.22 25);
  --color-destructive-foreground: oklch(0.98 0.005 240);
  --color-border: oklch(0.22 0.03 240);
  --color-input: oklch(0.22 0.03 240);
  --color-ring: oklch(0.65 0.2 240);
  --radius: 0.5rem;

  --font-display: 'Oswald', sans-serif;
  --font-body: 'Space Grotesk', sans-serif;

  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  --animate-slide-in-left: slide-in-left 0.4s ease-out;
  --animate-slide-in-right: slide-in-right 0.4s ease-out;
  --animate-fade-in: fade-in 0.3s ease-out;
  --animate-scale-in: scale-in 0.2s ease-out;

  @keyframes accordion-down {
    from { height: 0; }
    to { height: var(--radix-accordion-content-height); }
  }

  @keyframes accordion-up {
    from { height: var(--radix-accordion-content-height); }
    to { height: 0; }
  }

  @keyframes slide-in-left {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }

  @keyframes slide-in-right {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }

  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes scale-in {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }
}

body {
  background-color: oklch(0.10 0.01 240);
  color: oklch(0.98 0.005 240);
  font-family: var(--font-body);
  background-image:
    radial-gradient(circle at 15% 50%, rgba(30, 58, 138, 0.15) 0%, transparent 25%),
    radial-gradient(circle at 85% 30%, rgba(139, 92, 246, 0.1) 0%, transparent 25%),
    linear-gradient(rgba(15, 23, 42, 0.95) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.95) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: oklch(0.15 0.01 240);
}

::-webkit-scrollbar-thumb {
  background-color: oklch(0.30 0.02 240);
  border-radius: 0.125rem;
}

::-webkit-scrollbar-thumb:hover {
  background-color: oklch(0.35 0.02 240);
}

/* Typography utilities */
.font-display {
  font-family: var(--font-display);
}

.font-body {
  font-family: var(--font-body);
}

/* Industrial grid pattern */
.grid-pattern {
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Glowing effects */
.glow-primary {
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.3), 0 0 40px rgba(56, 189, 248, 0.1);
}

.glow-accent {
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.3), 0 0 40px rgba(251, 191, 36, 0.1);
}

/* Diagonal stripe pattern */
.stripe-pattern {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(56, 189, 248, 0.02) 10px,
    rgba(56, 189, 248, 0.02) 20px
  );
}

/* Tech border effect */
.tech-border {
  position: relative;
}

.tech-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.5), rgba(168, 85, 247, 0.5), rgba(56, 189, 248, 0.5)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Scanline effect */
.scanline {
  position: relative;
  overflow: hidden;
}

.scanline::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(0, 0, 0, 0.02) 51%
  );
  background-size: 100% 4px;
  pointer-events: none;
}

/* Noise texture overlay */
.noise-overlay {
  position: relative;
}

.noise-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  pointer-events: none;
}