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

/* Design tokens (shadcn variables) */
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 224 71% 4%;

    --muted: 220 14% 96%;
    --muted-foreground: 220 8.9% 46.1%;

    --popover: 0 0% 100%;
    --popover-foreground: 224 71% 4%;

    --card: 0 0% 100%;
    --card-foreground: 224 71% 4%;

    /* Terminal primary: green */
    --primary: 120 100% 63%;
    --primary-foreground: 0 0% 0%;

    --secondary: 220 14% 96%;
    --secondary-foreground: 224 71% 4%;

    --accent: 195 95% 50%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 120 100% 63%;

    --chart-1: 120 100% 63%;
    --chart-2: 195 95% 50%;
    --chart-3: 161 94% 30%;
    --chart-4: 31 97% 60%;
    --chart-5: 340 82% 52%;

    --radius: 0.6rem;
  }

  .dark {
    /* mem8 Terminal IDE Theme */
    --background: 229 39% 7%;     /* Deep blue-black #0a0e27 */
    --foreground: 120 100% 93%;   /* Terminal green-white */

    --muted: 229 30% 12%;          /* Slightly lighter IDE background */
    --muted-foreground: 120 20% 75%;

    --popover: 229 35% 9%;
    --popover-foreground: 120 60% 85%;

    --card: 229 33% 10%;           /* Panel background */
    --card-foreground: 120 50% 90%;

    /* Terminal green primary */
    --primary: 120 100% 63%;       /* Bright terminal green #00ff41 */
    --primary-foreground: 229 39% 7%;

    --secondary: 39 100% 50%;      /* Amber/orange #ffb700 */
    --secondary-foreground: 229 39% 7%;

    /* Cyan accent for highlights */
    --accent: 180 100% 50%;        /* Terminal cyan */
    --accent-foreground: 229 39% 7%;

    --destructive: 0 85% 50%;      /* Terminal red */
    --destructive-foreground: 120 100% 93%;

    --border: 120 30% 25%;         /* Green-tinted borders */
    --input: 229 30% 15%;          /* Input field background */
    --ring: 120 100% 63%;

    --chart-1: 120 100% 63%;
    --chart-2: 39 100% 50%;
    --chart-3: 180 100% 50%;
    --chart-4: 60 100% 50%;
    --chart-5: 300 100% 50%;
  }
}

/* Base application styling */
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-family: var(--font-mono), Consolas, Monaco, monospace;
  }
}

/* mem8 Terminal IDE effects and utilities */
@layer utilities {
  /* Animation utilities for dropdowns */
  .animate-in {
    animation: animate-in 0.2s ease-out;
  }
  
  .fade-in-0 {
    --tw-enter-opacity: 0;
  }
  
  .zoom-in-95 {
    --tw-enter-scale: 0.95;
  }
  
  .slide-in-from-top-2 {
    --tw-enter-translate-y: -0.5rem;
  }
  
  @keyframes animate-in {
    from {
      opacity: var(--tw-enter-opacity, 1);
      transform: translate(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0)) 
                rotate(var(--tw-enter-rotate, 0)) 
                skewX(var(--tw-enter-skew-x, 0)) 
                skewY(var(--tw-enter-skew-y, 0)) 
                scaleX(var(--tw-enter-scale, 1)) 
                scaleY(var(--tw-enter-scale, 1));
    }
    to {
      opacity: 1;
      transform: translate(0, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
    }
  }
  
  /* Terminal grid pattern */
  .bg-grid {
    background-image:
      linear-gradient(to bottom, rgba(0, 255, 65, 0.03) 1px, transparent 1px),
      linear-gradient(to right, rgba(0, 255, 65, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
  }

  /* Scanline effect */
  .bg-scanlines {
    background-image: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 255, 65, 0.03) 2px,
      rgba(0, 255, 65, 0.03) 4px
    );
  }

  /* Terminal glow effect */
  .terminal-glow {
    text-shadow: 0 0 5px hsl(var(--primary)), 0 0 10px hsl(var(--primary));
  }

  /* Memory cell effect for thoughts */
  .memory-cell {
    background: linear-gradient(145deg, 
      hsl(var(--card)) 0%, 
      hsl(var(--card) / 0.8) 100%
    );
    border: 1px solid hsl(var(--primary) / 0.2);
    box-shadow: 
      0 0 20px hsl(var(--primary) / 0.05),
      inset 0 1px 0 hsl(var(--primary) / 0.1);
  }

  .memory-cell:hover {
    border-color: hsl(var(--primary) / 0.4);
    box-shadow: 
      0 0 30px hsl(var(--primary) / 0.1),
      inset 0 1px 0 hsl(var(--primary) / 0.2);
  }
}

/* mem8 Terminal IDE Components */
@layer components {
  .gradient-text {
    background-image: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent)));
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 8px hsl(var(--primary) / 0.5));
  }

  /* Terminal text styling for AI content */
  .terminal-text {
    @apply font-mono text-primary/90;
    text-shadow: 0 0 3px hsl(var(--primary) / 0.5);
  }

  .container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* mem8 specific status indicators */
  .status-active {
    @apply bg-primary/20 text-primary border-primary/30;
  }

  .status-syncing {
    @apply bg-accent/20 text-accent border-accent/30;
  }

  .status-error {
    @apply bg-destructive/20 text-destructive border-destructive/30;
  }
}

/* Terminal selection styling */
::selection {
  background: hsl(var(--primary) / 0.3);
  color: hsl(var(--background));
  text-shadow: none;
}

/* Scrollbar styling for mem8 IDE feel */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
}
::-webkit-scrollbar-thumb {
  background: hsl(var(--primary) / 0.3);
  border: 1px solid hsl(var(--primary) / 0.5);
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--primary) / 0.5);
}

/* Terminal-themed syntax highlighting for code blocks */
.hljs {
  background: hsl(var(--card)) !important;
  color: hsl(var(--foreground)) !important;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-title {
  color: hsl(var(--primary)) !important;
  text-shadow: 0 0 3px hsl(var(--primary) / 0.5);
}

.hljs-string,
.hljs-attr,
.hljs-template-variable {
  color: hsl(var(--accent)) !important;
}

.hljs-number,
.hljs-literal {
  color: hsl(var(--secondary)) !important;
}

.hljs-comment {
  color: hsl(var(--muted-foreground)) !important;
  font-style: italic;
}

.hljs-meta {
  color: hsl(var(--primary) / 0.7) !important;
}

.hljs-function,
.hljs-class {
  color: hsl(var(--accent)) !important;
}

.hljs-variable {
  color: hsl(var(--foreground)) !important;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
  color: hsl(var(--primary)) !important;
}
