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

:root {
  /* Light Theme Defaults */
  --background: 0 0% 100%;
  --foreground: 220 20% 5%;

  --card: 0 0% 100%;
  --card-foreground: 220 20% 5%;

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

  /* Electric teal */
  --primary: 175 85% 35%;
  --primary-foreground: 0 0% 100%;

  /* Warm amber */
  --secondary: 35 90% 50%;
  --secondary-foreground: 0 0% 100%;

  --muted: 220 15% 96%;
  --muted-foreground: 220 15% 40%;

  --accent: 220 15% 96%;
  --accent-foreground: 220 20% 5%;

  --destructive: 0 85% 55%;
  --destructive-foreground: 0 0% 100%;

  --border: 220 15% 91%;
  --input: 220 15% 91%;
  --ring: 175 85% 45%;

  --radius: 0.25rem;

  /* Custom icons & branding - Light */
  --grid-color: 220 15% 88%;
  --glow-primary: 175 85% 45%;
  --glow-secondary: 35 90% 55%;
  
  --gradient-hero: linear-gradient(135deg, hsl(210 20% 99%) 0%, hsl(0 0% 100%) 100%);
  --gradient-card: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(210 20% 98%) 100%);
  --gradient-accent: linear-gradient(135deg, hsl(175 85% 45%) 0%, hsl(175 70% 35%) 100%);
  --gradient-warm: linear-gradient(135deg, hsl(35 90% 55%) 0%, hsl(25 80% 45%) 100%);

  --sidebar-background: 210 20% 98%;
  --sidebar-foreground: 220 20% 10%;
  --sidebar-primary: 175 85% 40%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 220 15% 96%;
  --sidebar-accent-foreground: 220 20% 10%;
  --sidebar-border: 220 15% 90%;
  --sidebar-ring: 175 85% 45%;
}

.dark {
  /* Deep slate enterprise palette */
  --background: 220 20% 6%;
  --foreground: 210 20% 95%;

  --card: 220 18% 10%;
  --card-foreground: 210 20% 95%;

  --popover: 220 18% 10%;
  --popover-foreground: 210 20% 95%;

  /* Electric teal - tech accent */
  --primary: 175 85% 45%;
  --primary-foreground: 220 20% 6%;

  /* Warm amber - AEC accent */
  --secondary: 35 90% 55%;
  --secondary-foreground: 220 20% 6%;

  --muted: 220 15% 15%;
  --muted-foreground: 215 15% 55%;

  --accent: 175 70% 35%;
  --accent-foreground: 210 20% 95%;

  --destructive: 0 70% 50%;
  --destructive-foreground: 210 40% 98%;

  --border: 220 15% 18%;
  --input: 220 15% 18%;
  --ring: 175 85% 45%;
  --radius: 0.25rem;

  /* Custom brand tokens - Dark */
  --grid-color: 220 15% 12%;
  --glow-primary: 175 85% 45%;
  --glow-secondary: 35 90% 55%;
  
  --gradient-hero: linear-gradient(135deg, hsl(220 20% 6%) 0%, hsl(220 18% 12%) 50%, hsl(220 20% 6%) 100%);
  --gradient-card: linear-gradient(180deg, hsl(220 18% 12%) 0%, hsl(220 18% 8%) 100%);
  --gradient-accent: linear-gradient(135deg, hsl(175 85% 45%) 0%, hsl(175 70% 35%) 100%);
  --gradient-warm: linear-gradient(135deg, hsl(35 90% 55%) 0%, hsl(25 80% 45%) 100%);

  --sidebar-background: 220 18% 8%;
  --sidebar-foreground: 210 20% 95%;
  --sidebar-primary: 175 85% 45%;
  --sidebar-primary-foreground: 220 20% 6%;
  --sidebar-accent: 220 15% 15%;
  --sidebar-accent-foreground: 210 20% 95%;
  --sidebar-border: 220 15% 18%;
  --sidebar-ring: 175 85% 45%;
}

* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: -0.025em;
}

.grid-background {
  background-image: 
    linear-gradient(to right, hsl(var(--grid-color)) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(var(--grid-color)) 1px, transparent 1px);
  background-size: 60px 60px;
}

.glow-primary {
  box-shadow: 0 0 40px hsl(var(--glow-primary) / 0.3),
              0 0 80px hsl(var(--glow-primary) / 0.1);
}

.glow-secondary {
  box-shadow: 0 0 40px hsl(var(--glow-secondary) / 0.3),
              0 0 80px hsl(var(--glow-secondary) / 0.1);
}

.text-glow-primary {
  text-shadow: 0 0 30px hsl(var(--glow-primary) / 0.5);
}

.text-glow-secondary {
  text-shadow: 0 0 30px hsl(var(--glow-secondary) / 0.5);
}

.border-glow {
  box-shadow: inset 0 1px 0 hsl(var(--foreground) / 0.05),
              0 0 0 1px hsl(var(--border)),
              0 4px 20px hsl(var(--background) / 0.5);
}

.blueprint-line {
  background: linear-gradient(90deg, 
    transparent 0%, 
    hsl(var(--primary) / 0.3) 50%, 
    transparent 100%);
  height: 1px;
}

.animate-fade-up {
  animation: fade-up 0.8s ease-out forwards;
}

.animate-fade-in {
  animation: fade-in 0.6s ease-out forwards;
}

.animate-slide-in-left {
  animation: slide-in-left 0.6s ease-out forwards;
}

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

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

@keyframes glow-pulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: hsl(var(--muted));
  border-radius: 4px;
}

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