@import 'tailwindcss';
@import 'tw-animate-css';
@import './styles/markdown-terminal.css';
@import './styles/react-syntax-highlighter-terminal.css';
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

@custom-variant dark (&:is(.dark *));

@theme inline {
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --color-background: var(--terminal-bg);
  --color-foreground: var(--terminal-fg);
  --color-card: var(--terminal-bg);
  --color-card-foreground: var(--terminal-fg);
  --color-popover: var(--terminal-bg);
  --color-popover-foreground: var(--terminal-fg);
  --color-primary: var(--terminal-accent);
  --color-primary-foreground: var(--terminal-bg);
  --color-secondary: var(--terminal-bg-alt);
  --color-secondary-foreground: var(--terminal-fg);
  --color-muted: var(--terminal-bg-alt);
  --color-muted-foreground: var(--terminal-fg-dim);
  --color-accent: var(--terminal-accent);
  --color-accent-foreground: var(--terminal-bg);
  --color-destructive: var(--terminal-error);
  --color-border: var(--terminal-border);
  --color-input: var(--terminal-border);
  --color-ring: var(--terminal-accent);
  --color-chart-1: var(--terminal-accent);
  --color-chart-2: var(--terminal-accent-alt);
  --color-chart-3: var(--terminal-success);
  --color-chart-4: var(--terminal-warning);
  --color-chart-5: var(--terminal-error);
  --color-sidebar: var(--terminal-bg);
  --color-sidebar-foreground: var(--terminal-fg);
  --color-sidebar-primary: var(--terminal-accent);
  --color-sidebar-primary-foreground: var(--terminal-bg);
  --color-sidebar-accent: var(--terminal-bg-alt);
  --color-sidebar-accent-foreground: var(--terminal-fg);
  --color-sidebar-border: var(--terminal-border);
  --color-sidebar-ring: var(--terminal-accent);
}

/* Solarized Dark - Default theme */
:root,
[data-theme='solarized-dark'] {
  --terminal-bg: #002b36;
  --terminal-bg-alt: #073642;
  --terminal-fg: #839496;
  --terminal-fg-dim: #586e75;
  --terminal-accent: #268bd2;
  --terminal-accent-alt: #2aa198;
  --terminal-border: #586e75;
  --terminal-success: #859900;
  --terminal-warning: #b58900;
  --terminal-error: #dc322f;
}

/* Solarized Light */
[data-theme='solarized-light'] {
  --terminal-bg: #fdf6e3;
  --terminal-bg-alt: #eee8d5;
  --terminal-fg: #657b83;
  --terminal-fg-dim: #93a1a1;
  --terminal-accent: #268bd2;
  --terminal-accent-alt: #2aa198;
  --terminal-border: #93a1a1;
  --terminal-success: #859900;
  --terminal-warning: #b58900;
  --terminal-error: #dc322f;
}

/* Cappuccino - Warm coffee theme */
[data-theme='cappuccino'] {
  --terminal-bg: #2f1b14;
  --terminal-bg-alt: #3d261a;
  --terminal-fg: #d4b895;
  --terminal-fg-dim: #a0896b;
  --terminal-accent: #f4a261;
  --terminal-accent-alt: #e76f51;
  --terminal-border: #a0896b;
  --terminal-success: #7b9171;
  --terminal-warning: #e9c46a;
  --terminal-error: #e63946;
}

/* Catppuccin Mocha - Popular pastel theme */
[data-theme='catppuccin'] {
  --terminal-bg: #1e1e2e;
  --terminal-bg-alt: #313244;
  --terminal-fg: #cdd6f4;
  --terminal-fg-dim: #9399b2;
  --terminal-accent: #cba6f7;
  --terminal-accent-alt: #f5c2e7;
  --terminal-border: #6c7086;
  --terminal-success: #a6e3a1;
  --terminal-warning: #f9e2af;
  --terminal-error: #f38ba8;
}

/* High Contrast - Sharp white on black */
[data-theme='high-contrast'] {
  --terminal-bg: #000000;
  --terminal-bg-alt: #1a1a1a;
  --terminal-fg: #ffffff;
  --terminal-fg-dim: #cccccc;
  --terminal-accent: #00ff00;
  --terminal-accent-alt: #00cccc;
  --terminal-border: #666666;
  --terminal-success: #00ff00;
  --terminal-warning: #ffff00;
  --terminal-error: #ff0000;
}

/* Framer Dark - Inspired by Framer's dark theme */
[data-theme='framer-dark'] {
  --terminal-bg: #181818;
  --terminal-bg-alt: #2f3439;
  --terminal-fg: #eeeeee;
  --terminal-fg-dim: #999999;
  --terminal-accent: #fd5799;
  --terminal-accent-alt: #20bcfc;
  --terminal-border: #333333;
  --terminal-success: #32ccdc;
  --terminal-warning: #fecb6e;
  --terminal-error: #fd886b;
}

/* Framer Light - Light counterpart to Framer Dark */
[data-theme='framer-light'] {
  --terminal-bg: #ffffff;
  --terminal-bg-alt: #f8f9fa;
  --terminal-fg: #333333;
  --terminal-fg-dim: #666666;
  --terminal-accent: #0066cc;
  --terminal-accent-alt: #006bb3;
  --terminal-border: #e0e0e0;
  --terminal-success: #22a06b;
  --terminal-warning: #cc7722;
  --terminal-error: #dc3545;
}

/* Gruvbox Dark - Material palette, medium contrast */
[data-theme='gruvbox-dark'] {
  --terminal-bg: #282828;
  --terminal-bg-alt: #32302f;
  --terminal-fg: #d4be98;
  --terminal-fg-dim: #928374;
  --terminal-accent: #a9b665;
  --terminal-accent-alt: #89b482;
  --terminal-border: #504945;
  --terminal-success: #a9b665;
  --terminal-warning: #d8a657;
  --terminal-error: #ea6962;
}

/* Gruvbox Light - Material palette, medium contrast */
[data-theme='gruvbox-light'] {
  --terminal-bg: #fbf1c7;
  --terminal-bg-alt: #f2e5bc;
  --terminal-fg: #654735;
  --terminal-fg-dim: #928374;
  --terminal-accent: #6c782e;
  --terminal-accent-alt: #4c7a5d;
  --terminal-border: #d5c4a1;
  --terminal-success: #6c782e;
  --terminal-warning: #b47109;
  --terminal-error: #c14a4a;
}

/* Monokai - Classic dark theme */
[data-theme='monokai'] {
  --terminal-bg: #272822;
  --terminal-bg-alt: #3e3d32;
  --terminal-fg: #f8f8f2;
  --terminal-fg-dim: #75715e;
  --terminal-accent: #66d9ef;
  --terminal-accent-alt: #a6e22e;
  --terminal-border: #75715e;
  --terminal-success: #a6e22e;
  --terminal-warning: #e6db74;
  --terminal-error: #f92672;
}

/* Launch theme */
[data-theme='launch'] {
  --terminal-bg: #f6f6ef;
  --terminal-bg-alt: #ffffff;
  --terminal-fg: #000000;
  --terminal-fg-dim: #828282;
  --terminal-accent: #ff6600;
  --terminal-accent-alt: #458cc9;
  --terminal-border: #828282;
  --terminal-success: #458cc9;
  --terminal-warning: #ff6600;
  --terminal-error: #cc5200;
}

/* Rosé Pine - Soho vibes */
[data-theme='rose-pine'] {
  --terminal-bg: #191724;
  --terminal-bg-alt: #1f1d2e;
  --terminal-fg: #e0def4;
  --terminal-fg-dim: #908caa;
  --terminal-accent: #c4a7e7;
  --terminal-accent-alt: #ebbcba;
  --terminal-border: #6e6a86;
  --terminal-success: #9ccfd8;
  --terminal-warning: #f6c177;
  --terminal-error: #eb6f92;
}

/* Rosé Pine Dawn - Light theme with warm tones */
[data-theme='rose-pine-dawn'] {
  --terminal-bg: #faf4ed;
  --terminal-bg-alt: #fffaf3;
  --terminal-fg: #575279;
  --terminal-fg-dim: #797593;
  --terminal-accent: #907aa9;
  --terminal-accent-alt: #d7827e;
  --terminal-border: #cecacd;
  --terminal-success: #56949f;
  --terminal-warning: #ea9d34;
  --terminal-error: #b4637a;
}

/* Rosé Pine Moon - Softer dark theme */
[data-theme='rose-pine-moon'] {
  --terminal-bg: #232136;
  --terminal-bg-alt: #2a273f;
  --terminal-fg: #e0def4;
  --terminal-fg-dim: #908caa;
  --terminal-accent: #c4a7e7;
  --terminal-accent-alt: #ebbcba;
  --terminal-border: #6e6a86;
  --terminal-success: #9ccfd8;
  --terminal-warning: #f6c177;
  --terminal-error: #eb6f92;
}
@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
    font-family: 'IBM Plex Mono', 'Consolas', 'Monaco', 'Courier New', monospace;
  }

  /* Terminal styling for all elements */
  input,
  textarea,
  select,
  button {
    font-family: inherit;
  }

  /* Pulsing animation for incomplete events */
  @keyframes pulse-warning {
    0%,
    100% {
      opacity: 1;
      color: var(--terminal-accent);
    }
    50% {
      opacity: 0.5;
      color: var(--terminal-warning);
    }
  }

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

  .animate-pulse-warning {
    animation: pulse-warning 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  /* Pulsing animation for yolo mode */
  @keyframes pulse-error {
    0%,
    100% {
      opacity: 1;
      color: var(--terminal-error);
    }
    50% {
      opacity: 0.5;
      color: var(--terminal-error);
    }
  }

  .animate-pulse-error {
    animation: pulse-error 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  /* Custom spinner animations */
  @keyframes spin-reverse {
    from {
      transform: rotate(360deg);
    }
    to {
      transform: rotate(0deg);
    }
  }

  @keyframes spin-slow {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes morph {
    0%,
    100% {
      border-radius: 50%;
      transform: scale(1) rotate(0deg);
    }
    25% {
      border-radius: 40%;
      transform: scale(1.15) rotate(90deg);
    }
    50% {
      border-radius: 30%;
      transform: scale(0.85) rotate(180deg);
    }
    75% {
      border-radius: 45%;
      transform: scale(1.1) rotate(270deg);
    }
  }

  @keyframes wave {
    0%,
    100% {
      transform: translateX(-100%) translateY(-100%) rotate(0deg);
    }
    25% {
      transform: translateX(0%) translateY(-100%) rotate(90deg);
    }
    50% {
      transform: translateX(0%) translateY(0%) rotate(180deg);
    }
    75% {
      transform: translateX(-100%) translateY(0%) rotate(270deg);
    }
  }

  @keyframes pulse-bright {
    0%,
    100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.8;
      transform: scale(1.2);
    }
  }

  @keyframes fade-pulse {
    0%,
    100% {
      opacity: 0.8;
    }
    50% {
      opacity: 0.4;
    }
  }

  @keyframes glitch {
    0%,
    90%,
    100% {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
      transform: translate(0);
    }
    93% {
      clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
      transform: translate(-2px, 2px);
    }
    96% {
      clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
      transform: translate(2px, -2px);
    }
  }

  @keyframes slide-in-up {
    0% {
      visibility: visible;
      transform: translate3d(0, 100%, 0);
    }
    100% {
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes slide-out-down {
    0% {
      visibility: visible;
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(0, 100%, 0);
    }
  }

  .animate-slide-in-up {
    animation: slide-in-up 1s ease-in-out 0.25s 1;
  }

  .animate-slide-out-down {
    animation: slide-out-down 1s ease-in-out 0.25s 1;
  }

  .animate-spin-reverse {
    animation: spin-reverse 3s linear infinite;
  }

  .animate-spin-slow {
    animation: spin-slow 8s linear infinite;
  }

  .animate-morph {
    animation: morph 4s ease-in-out infinite;
  }

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

  .animate-pulse-bright {
    animation: pulse-bright 1.5s ease-in-out infinite;
  }

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

  .animate-glitch {
    animation: glitch 5s linear infinite;
  }

  /* Gradient utilities for conic and radial gradients */
  .bg-gradient-conic {
    background: conic-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-radial {
    background: radial-gradient(circle, var(--tw-gradient-stops));
  }

  /* Animation delays */
  .delay-75 {
    animation-delay: 75ms;
  }

  .delay-150 {
    animation-delay: 150ms;
  }

  .delay-300 {
    animation-delay: 300ms;
  }

  /* Bouncing animations for bars spinner */
  @keyframes bounce-slow {
    0%,
    100% {
      transform: scaleY(1);
    }
    50% {
      transform: scaleY(1.5);
    }
  }

  @keyframes bounce-medium {
    0%,
    100% {
      transform: scaleY(1);
    }
    50% {
      transform: scaleY(1.8);
    }
  }

  @keyframes bounce-fast {
    0%,
    100% {
      transform: scaleY(1);
    }
    50% {
      transform: scaleY(2);
    }
  }

  .animate-bounce-slow {
    animation: bounce-slow 1.4s ease-in-out infinite;
  }

  .animate-bounce-medium {
    animation: bounce-medium 1s ease-in-out infinite;
  }

  .animate-bounce-fast {
    animation: bounce-fast 0.8s ease-in-out infinite;
  }
}
