@import "tailwindcss";

:root,
[data-theme="dark"] {
  --bg-primary: #1a1a2e;
  --bg-secondary: #16213e;
  --bg-terminal: #0f0f1a;
  --bg-hover: #2a2a4a;
  --bg-code: #1e1e2e;
  --accent-primary: #e94560;
  --accent-secondary: #ff6b9d;
  --text-primary: #ffffff;
  --text-secondary: #a0a0a0;
  --text-tertiary: #6b7280;
  --border-color: #2a2a4a;

  /* Trans pride colors */
  --trans-blue: #5bcefa;
  --trans-pink: #f5a9b8;
  --trans-white: #ffffff;
  --trans-gradient: linear-gradient(
    135deg,
    var(--trans-blue) 0%,
    var(--trans-pink) 50%,
    var(--trans-white) 100%
  );
  --trans-gradient-vibrant: linear-gradient(
    135deg,
    var(--trans-blue) 0%,
    var(--trans-pink) 35%,
    var(--trans-white) 50%,
    var(--trans-pink) 65%,
    var(--trans-blue) 100%
  );

  /* Terminal specific colors */
  --terminal-user: #22d3ee;
  --terminal-tool: #c084fc;
  --terminal-tool-name: #ddd6fe;
  --terminal-error: #f87171;

  /* Syntax highlighting colors (dark) */
  --hljs-keyword: #f472b6;
  --hljs-string: #a3e635;
  --hljs-number: #fbbf24;
  --hljs-comment: #6b7280;
  --hljs-function: #c084fc;
  --hljs-type: #22d3ee;
  --hljs-variable: #fb923c;
  --hljs-meta: #94a3b8;
}

[data-theme="light"] {
  --bg-primary: #f8f9fa;
  --bg-secondary: #ffffff;
  --bg-terminal: #f1f3f4;
  --bg-hover: #e8e8e8;
  --bg-code: #f5f5f5;
  --accent-primary: #e94560;
  --accent-secondary: #ff6b9d;
  --text-primary: #1a1a2e;
  --text-secondary: #5a5a7a;
  --text-tertiary: #9ca3af;
  --border-color: #d0d0e0;

  /* Trans pride colors */
  --trans-blue: #5bcefa;
  --trans-pink: #f5a9b8;
  --trans-white: #ffffff;
  --trans-gradient: linear-gradient(
    135deg,
    var(--trans-blue) 0%,
    var(--trans-pink) 50%,
    var(--trans-white) 100%
  );
  --trans-gradient-vibrant: linear-gradient(
    135deg,
    var(--trans-blue) 0%,
    var(--trans-pink) 35%,
    var(--trans-white) 50%,
    var(--trans-pink) 65%,
    var(--trans-blue) 100%
  );

  /* Terminal specific colors */
  --terminal-user: #0891b2;
  --terminal-tool: #7c3aed;
  --terminal-tool-name: #8b5cf6;
  --terminal-error: #dc2626;

  /* Syntax highlighting colors (light) */
  --hljs-keyword: #d946ef;
  --hljs-string: #16a34a;
  --hljs-number: #d97706;
  --hljs-comment: #9ca3af;
  --hljs-function: #7c3aed;
  --hljs-type: #0891b2;
  --hljs-variable: #ea580c;
  --hljs-meta: #64748b;
}

[data-theme="high-contrast"] {
  --bg-primary: #000000;
  --bg-secondary: #0a0a0a;
  --bg-terminal: #000000;
  --bg-hover: #1a1a1a;
  --bg-code: #0a0a0a;
  --accent-primary: #ff4d6d;
  --accent-secondary: #ff85a1;
  --text-primary: #ffffff;
  --text-secondary: #e0e0e0;
  --text-tertiary: #b0b0b0;
  --border-color: #ffffff;

  /* Trans pride colors (high contrast) */
  --trans-blue: #00d4ff;
  --trans-pink: #ff99cc;
  --trans-white: #ffffff;
  --trans-gradient: linear-gradient(
    135deg,
    var(--trans-blue) 0%,
    var(--trans-pink) 50%,
    var(--trans-white) 100%
  );
  --trans-gradient-vibrant: linear-gradient(
    135deg,
    var(--trans-blue) 0%,
    var(--trans-pink) 35%,
    var(--trans-white) 50%,
    var(--trans-pink) 65%,
    var(--trans-blue) 100%
  );

  /* Terminal specific colors - bright and saturated */
  --terminal-user: #00ffff;
  --terminal-tool: #ff00ff;
  --terminal-tool-name: #ffaaff;
  --terminal-error: #ff5555;

  /* Syntax highlighting colors (high contrast) */
  --hljs-keyword: #ff66ff;
  --hljs-string: #66ff66;
  --hljs-number: #ffff00;
  --hljs-comment: #aaaaaa;
  --hljs-function: #ff99ff;
  --hljs-type: #00ffff;
  --hljs-variable: #ffaa00;
  --hljs-meta: #cccccc;
}

[data-theme="dracula"] {
  --bg-primary: #282a36;
  --bg-secondary: #1e1f29;
  --bg-terminal: #191a21;
  --bg-hover: #44475a;
  --bg-code: #282a36;
  --accent-primary: #bd93f9;
  --accent-secondary: #ff79c6;
  --text-primary: #f8f8f2;
  --text-secondary: #6272a4;
  --text-tertiary: #44475a;
  --border-color: #44475a;

  /* Trans pride colors */
  --trans-blue: #5bcefa;
  --trans-pink: #f5a9b8;
  --trans-white: #ffffff;
  --trans-gradient: linear-gradient(
    135deg,
    var(--trans-blue) 0%,
    var(--trans-pink) 50%,
    var(--trans-white) 100%
  );
  --trans-gradient-vibrant: linear-gradient(
    135deg,
    var(--trans-blue) 0%,
    var(--trans-pink) 35%,
    var(--trans-white) 50%,
    var(--trans-pink) 65%,
    var(--trans-blue) 100%
  );

  /* Terminal specific colors */
  --terminal-user: #8be9fd;
  --terminal-tool: #bd93f9;
  --terminal-tool-name: #caa9fa;
  --terminal-error: #ff5555;

  /* Syntax highlighting colors (Dracula) */
  --hljs-keyword: #ff79c6;
  --hljs-string: #f1fa8c;
  --hljs-number: #bd93f9;
  --hljs-comment: #6272a4;
  --hljs-function: #50fa7b;
  --hljs-type: #8be9fd;
  --hljs-variable: #ffb86c;
  --hljs-meta: #94a3b8;
}

[data-theme="catppuccin"] {
  --bg-primary: #1e1e2e;
  --bg-secondary: #181825;
  --bg-terminal: #11111b;
  --bg-hover: #313244;
  --bg-code: #1e1e2e;
  --accent-primary: #cba6f7;
  --accent-secondary: #f5c2e7;
  --text-primary: #cdd6f4;
  --text-secondary: #a6adc8;
  --text-tertiary: #6c7086;
  --border-color: #313244;

  /* Trans pride colors */
  --trans-blue: #5bcefa;
  --trans-pink: #f5a9b8;
  --trans-white: #ffffff;
  --trans-gradient: linear-gradient(
    135deg,
    var(--trans-blue) 0%,
    var(--trans-pink) 50%,
    var(--trans-white) 100%
  );
  --trans-gradient-vibrant: linear-gradient(
    135deg,
    var(--trans-blue) 0%,
    var(--trans-pink) 35%,
    var(--trans-white) 50%,
    var(--trans-pink) 65%,
    var(--trans-blue) 100%
  );

  /* Terminal specific colors */
  --terminal-user: #89dceb;
  --terminal-tool: #cba6f7;
  --terminal-tool-name: #d9b3ff;
  --terminal-error: #f38ba8;

  /* Syntax highlighting colors (Catppuccin Mocha) */
  --hljs-keyword: #cba6f7;
  --hljs-string: #a6e3a1;
  --hljs-number: #fab387;
  --hljs-comment: #6c7086;
  --hljs-function: #89b4fa;
  --hljs-type: #89dceb;
  --hljs-variable: #fab387;
  --hljs-meta: #a6adc8;
}

[data-theme="nord"] {
  --bg-primary: #2e3440;
  --bg-secondary: #3b4252;
  --bg-terminal: #242933;
  --bg-hover: #434c5e;
  --bg-code: #2e3440;
  --accent-primary: #88c0d0;
  --accent-secondary: #81a1c1;
  --text-primary: #eceff4;
  --text-secondary: #d8dee9;
  --text-tertiary: #4c566a;
  --border-color: #434c5e;

  /* Trans pride colors */
  --trans-blue: #5bcefa;
  --trans-pink: #f5a9b8;
  --trans-white: #ffffff;
  --trans-gradient: linear-gradient(
    135deg,
    var(--trans-blue) 0%,
    var(--trans-pink) 50%,
    var(--trans-white) 100%
  );
  --trans-gradient-vibrant: linear-gradient(
    135deg,
    var(--trans-blue) 0%,
    var(--trans-pink) 35%,
    var(--trans-white) 50%,
    var(--trans-pink) 65%,
    var(--trans-blue) 100%
  );

  /* Terminal specific colors */
  --terminal-user: #88c0d0;
  --terminal-tool: #b48ead;
  --terminal-tool-name: #c7a8c9;
  --terminal-error: #bf616a;

  /* Syntax highlighting colors (Nord) */
  --hljs-keyword: #81a1c1;
  --hljs-string: #a3be8c;
  --hljs-number: #b48ead;
  --hljs-comment: #4c566a;
  --hljs-function: #88c0d0;
  --hljs-type: #8fbcbb;
  --hljs-variable: #d08770;
  --hljs-meta: #616e88;
}

[data-theme="solarized"] {
  --bg-primary: #002b36;
  --bg-secondary: #073642;
  --bg-terminal: #00212b;
  --bg-hover: #094656;
  --bg-code: #002b36;
  --accent-primary: #268bd2;
  --accent-secondary: #2aa198;
  --text-primary: #fdf6e3;
  --text-secondary: #93a1a1;
  --text-tertiary: #657b83;
  --border-color: #094656;

  /* Trans pride colors */
  --trans-blue: #5bcefa;
  --trans-pink: #f5a9b8;
  --trans-white: #ffffff;
  --trans-gradient: linear-gradient(
    135deg,
    var(--trans-blue) 0%,
    var(--trans-pink) 50%,
    var(--trans-white) 100%
  );
  --trans-gradient-vibrant: linear-gradient(
    135deg,
    var(--trans-blue) 0%,
    var(--trans-pink) 35%,
    var(--trans-white) 50%,
    var(--trans-pink) 65%,
    var(--trans-blue) 100%
  );

  /* Terminal specific colors */
  --terminal-user: #2aa198;
  --terminal-tool: #6c71c4;
  --terminal-tool-name: #9395d0;
  --terminal-error: #dc322f;

  /* Syntax highlighting colors (Solarized Dark) */
  --hljs-keyword: #859900;
  --hljs-string: #2aa198;
  --hljs-number: #d33682;
  --hljs-comment: #586e75;
  --hljs-function: #268bd2;
  --hljs-type: #b58900;
  --hljs-variable: #cb4b16;
  --hljs-meta: #657b83;
}

[data-theme="solarized-light"] {
  --bg-primary: #fdf6e3;
  --bg-secondary: #eee8d5;
  --bg-terminal: #f9f3d7;
  --bg-hover: #d8d1be;
  --bg-code: #eee8d5;
  --accent-primary: #268bd2;
  --accent-secondary: #2aa198;
  --text-primary: #657b83;
  --text-secondary: #839496;
  --text-tertiary: #93a1a1;
  --border-color: #cfc9b5;

  /* Trans pride colors */
  --trans-blue: #5bcefa;
  --trans-pink: #f5a9b8;
  --trans-white: #ffffff;
  --trans-gradient: linear-gradient(
    135deg,
    var(--trans-blue) 0%,
    var(--trans-pink) 50%,
    var(--trans-white) 100%
  );
  --trans-gradient-vibrant: linear-gradient(
    135deg,
    var(--trans-blue) 0%,
    var(--trans-pink) 35%,
    var(--trans-white) 50%,
    var(--trans-pink) 65%,
    var(--trans-blue) 100%
  );

  /* Terminal specific colors */
  --terminal-user: #268bd2;
  --terminal-tool: #6c71c4;
  --terminal-tool-name: #8f94cc;
  --terminal-error: #dc322f;

  /* Syntax highlighting colors (Solarized Light) */
  --hljs-keyword: #859900;
  --hljs-string: #2aa198;
  --hljs-number: #d33682;
  --hljs-comment: #93a1a1;
  --hljs-function: #268bd2;
  --hljs-type: #b58900;
  --hljs-variable: #cb4b16;
  --hljs-meta: #657b83;
}

[data-theme="catppuccin-latte"] {
  --bg-primary: #eff1f5;
  --bg-secondary: #e6e9ef;
  --bg-terminal: #dce0e8;
  --bg-hover: #ccd0da;
  --bg-code: #e6e9ef;
  --accent-primary: #8839ef;
  --accent-secondary: #ea76cb;
  --text-primary: #4c4f69;
  --text-secondary: #6c6f85;
  --text-tertiary: #9ca0b0;
  --border-color: #bcc0cc;

  /* Trans pride colors */
  --trans-blue: #5bcefa;
  --trans-pink: #f5a9b8;
  --trans-white: #ffffff;
  --trans-gradient: linear-gradient(
    135deg,
    var(--trans-blue) 0%,
    var(--trans-pink) 50%,
    var(--trans-white) 100%
  );
  --trans-gradient-vibrant: linear-gradient(
    135deg,
    var(--trans-blue) 0%,
    var(--trans-pink) 35%,
    var(--trans-white) 50%,
    var(--trans-pink) 65%,
    var(--trans-blue) 100%
  );

  /* Terminal specific colors */
  --terminal-user: #209fb5;
  --terminal-tool: #8839ef;
  --terminal-tool-name: #a259f1;
  --terminal-error: #d20f39;

  /* Syntax highlighting colors (Catppuccin Latte) */
  --hljs-keyword: #8839ef;
  --hljs-string: #40a02b;
  --hljs-number: #fe640b;
  --hljs-comment: #8c8fa1;
  --hljs-function: #1e66f5;
  --hljs-type: #209fb5;
  --hljs-variable: #fe640b;
  --hljs-meta: #5c5f77;
}

[data-theme="gruvbox-light"] {
  --bg-primary: #fbf1c7;
  --bg-secondary: #ebdbb2;
  --bg-terminal: #f9f5d7;
  --bg-hover: #d5c4a1;
  --bg-code: #ebdbb2;
  --accent-primary: #458588;
  --accent-secondary: #689d6a;
  --text-primary: #3c3836;
  --text-secondary: #665c54;
  --text-tertiary: #7c6f64;
  --border-color: #bdae93;

  /* Trans pride colors */
  --trans-blue: #5bcefa;
  --trans-pink: #f5a9b8;
  --trans-white: #ffffff;
  --trans-gradient: linear-gradient(
    135deg,
    var(--trans-blue) 0%,
    var(--trans-pink) 50%,
    var(--trans-white) 100%
  );
  --trans-gradient-vibrant: linear-gradient(
    135deg,
    var(--trans-blue) 0%,
    var(--trans-pink) 35%,
    var(--trans-white) 50%,
    var(--trans-pink) 65%,
    var(--trans-blue) 100%
  );

  /* Terminal specific colors */
  --terminal-user: #458588;
  --terminal-tool: #b16286;
  --terminal-tool-name: #c37aa0;
  --terminal-error: #cc241d;

  /* Syntax highlighting colors (Gruvbox Light) */
  --hljs-keyword: #d65d0e;
  --hljs-string: #98971a;
  --hljs-number: #b16286;
  --hljs-comment: #928374;
  --hljs-function: #458588;
  --hljs-type: #d79921;
  --hljs-variable: #af3a03;
  --hljs-meta: #7c6f64;
}

[data-theme="rose-pine-dawn"] {
  --bg-primary: #faf4ed;
  --bg-secondary: #fffaf3;
  --bg-terminal: #f2e9e1;
  --bg-hover: #dfdad9;
  --bg-code: #fffaf3;
  --accent-primary: #907aa9;
  --accent-secondary: #d7827e;
  --text-primary: #575279;
  --text-secondary: #797593;
  --text-tertiary: #9893a5;
  --border-color: #cecacd;

  /* Trans pride colors */
  --trans-blue: #5bcefa;
  --trans-pink: #f5a9b8;
  --trans-white: #ffffff;
  --trans-gradient: linear-gradient(
    135deg,
    var(--trans-blue) 0%,
    var(--trans-pink) 50%,
    var(--trans-white) 100%
  );
  --trans-gradient-vibrant: linear-gradient(
    135deg,
    var(--trans-blue) 0%,
    var(--trans-pink) 35%,
    var(--trans-white) 50%,
    var(--trans-pink) 65%,
    var(--trans-blue) 100%
  );

  /* Terminal specific colors */
  --terminal-user: #56949f;
  --terminal-tool: #907aa9;
  --terminal-tool-name: #a48abf;
  --terminal-error: #b4637a;

  /* Syntax highlighting colors (Rosé Pine Dawn) */
  --hljs-keyword: #286983;
  --hljs-string: #56949f;
  --hljs-number: #ea9d34;
  --hljs-comment: #9893a5;
  --hljs-function: #907aa9;
  --hljs-type: #d7827e;
  --hljs-variable: #b4637a;
  --hljs-meta: #797593;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--ui-font-family, "Segoe UI", system-ui, -apple-system, sans-serif);
  background: var(--bg-primary);
  color: var(--text-primary);
}

#app {
  height: 100%;
}

::-webkit-scrollbar {
  width: 8px;
}

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

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

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary);
}

::selection {
  background: var(--accent-primary);
  color: var(--text-primary);
}

/* Trans gradient button - primary action buttons */
.btn-trans-gradient {
  background: var(--trans-gradient-vibrant) !important;
  border: none !important;
  color: #1a1a2e !important;
  font-weight: 600;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
  transition: all 0.2s ease;
}

.btn-trans-gradient:hover:not(:disabled) {
  filter: brightness(1.1);
  box-shadow:
    0 0 20px rgba(91, 206, 250, 0.4),
    0 0 30px rgba(245, 169, 184, 0.3);
}

.btn-trans-gradient:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

/* Trans gradient focus border for inputs */
.input-trans-focus {
  position: relative;
  transition: all 0.2s ease;
}

.input-trans-focus:focus {
  border-color: var(--trans-pink) !important;
  box-shadow:
    0 0 0 1px var(--trans-blue),
    0 0 12px rgba(91, 206, 250, 0.3),
    0 0 20px rgba(245, 169, 184, 0.2) !important;
  outline: none !important;
}

/* Trans gradient hover for icon buttons */
.icon-trans-hover {
  transition: all 0.2s ease;
}

.icon-trans-hover:hover {
  color: var(--trans-pink) !important;
  filter: drop-shadow(0 0 6px rgba(91, 206, 250, 0.5))
    drop-shadow(0 0 10px rgba(245, 169, 184, 0.4));
}