hikari-desktop/src/app.css

@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;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  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));
}