@import "tailwindcss";

/* Light theme (default)
 * 4-layer depth: bg (#f8fafc) → chrome (#eef1f5) → card (#fff) → hover (#f1f5f9)
 * 4-tier text: text (#1e293b) → secondary (#475569) → muted (#64748b) → dim (#94a3b8)
 */
:root {
  --color-bg: #f8fafc;
  --color-card: #ffffff;
  --color-hover: #f1f5f9;
  --color-border: #dce1e8;
  --color-text: #1e293b;
  --color-text-secondary: #475569;
  --color-text-muted: #64748b;
  --color-text-dim: #94a3b8;
  --color-placeholder: #94a3b8;
  --color-status-success: #16a34a;
  --color-status-error: #dc2626;
  --color-status-warning: #d97706;
  --color-input-bg: #ffffff;
  --color-input-border: #cbd5e1;
  --color-sidebar-icon: #94a3b8;
  --color-sidebar-icon-active: #2b6cee;
  --color-code-bg: #1e293b;
  --color-status-online: #16a34a;
  --color-status-offline: #94a3b8;

  /* Explorer theme variables */
  --color-explorer-zone-label: #94a3b8;
  --color-explorer-zone-separator: #dce1e8;
  --color-explorer-indent-guide: #dce1e8;
  --color-explorer-search-highlight: rgba(43, 108, 238, 0.12);
  --color-explorer-accent: #2b6cee;
  --color-explorer-system-badge: #d97706;
  --color-explorer-focus-indicator: #2b6cee;
  --color-section-divider: #dce1e8;

  /* Git status colors — file tree decorations */
  --color-git-added: #2da44e;
  --color-git-modified: #bf8700;
  --color-git-deleted: #cf222e;
  --color-git-renamed: #1a7f5a;
  --color-git-untracked: #57ab5a;
  --color-git-conflicting: #e5534b;
  --color-git-ignored: #8b949e;

  /* Git status badges (letter labels) */
  --color-git-badge-added-bg: rgba(45, 164, 78, 0.15);
  --color-git-badge-modified-bg: rgba(191, 135, 0, 0.15);
  --color-git-badge-deleted-bg: rgba(207, 34, 46, 0.15);
  --color-git-badge-untracked-bg: rgba(87, 171, 90, 0.15);
  --color-git-badge-conflicting-bg: rgba(229, 83, 75, 0.15);
  --color-git-badge-renamed-bg: rgba(26, 127, 90, 0.15);

  /* File-type icon colors */
  --color-icon-typescript: #3178c6;
  --color-icon-javascript: #f0db4f;
  --color-icon-python: #3572a5;
  --color-icon-css: #264de4;
  --color-icon-html: #e34c26;
  --color-icon-json: #a8a8a8;
  --color-icon-markdown: #519aba;
  --color-icon-image: #a97bff;
  --color-icon-folder: #8b949e;
  --color-icon-folder-open: #2b6cee;
  --color-icon-default: #8b949e;

  /* Semantic aliases — used across components without --color-status- prefix */
  --color-error: #dc2626;
  --color-warning: #d97706;

  /* Inline code */
  --color-inline-code: #953800;

  /* Context ring (normal state — below 60%) */
  --color-context-ring: #7d8590;

  /* User message bubble */
  --color-user-bubble-bg: #e8f0fe;
  --color-user-bubble-border: rgba(43, 108, 238, 0.15);

  /* Chrome surfaces (TopBar, NavBar, Explorer, BottomBar) — subtle depth layer */
  --color-bg-chrome: #eef1f5;

  /* Hidden / dotfile / generated file dimming */
  --color-hidden-text: #a0a7b4;
  --color-hidden-icon: #b0b7c3;
}

/* Dark theme — warmer tones for long-session comfort
 * Shifted from pure blue-black (#0d1117) toward warmer neutrals.
 * Reference: VS Code Dark+ #1e1e1e, Linear #191919, GitHub #0d1117 (cold).
 */
:root.dark {
  --color-bg: #111318;
  --color-card: #1a1f2b;
  --color-hover: #252d3a;
  --color-border: #272d38;
  --color-text: #e6edf3;
  --color-text-secondary: #b0bac5;
  --color-text-muted: #7d8590;
  --color-text-dim: #545d68;
  --color-placeholder: #6b7280;
  --color-status-success: #22c55e;
  --color-status-error: #ef4444;
  --color-status-warning: #f59e0b;
  --color-input-bg: #191e28;
  --color-input-border: #2a3040;
  --color-sidebar-icon: #545d68;
  --color-sidebar-icon-active: #e6edf3;
  --color-code-bg: #111318;
  --color-status-online: #22c55e;
  --color-status-offline: #6b7280;

  /* Explorer theme variables */
  --color-explorer-zone-label: #6b7280;
  --color-explorer-zone-separator: #2a3040;
  --color-explorer-indent-guide: #2a3040;
  --color-explorer-search-highlight: rgba(43, 108, 238, 0.2);
  --color-explorer-accent: #3d7ef0;
  --color-explorer-system-badge: #f59e0b;
  --color-explorer-focus-indicator: #3d7ef0;
  --color-section-divider: #1f2430;

  /* Git status colors — dark theme */
  --color-git-added: #3fb950;
  --color-git-modified: #d29922;
  --color-git-deleted: #f85149;
  --color-git-renamed: #58a6ff;
  --color-git-untracked: #7ee787;
  --color-git-conflicting: #ff6b6b;
  --color-git-ignored: #484f58;

  /* Git status badges — dark theme */
  --color-git-badge-added-bg: rgba(63, 185, 80, 0.15);
  --color-git-badge-modified-bg: rgba(210, 153, 34, 0.15);
  --color-git-badge-deleted-bg: rgba(248, 81, 73, 0.15);
  --color-git-badge-untracked-bg: rgba(126, 231, 135, 0.15);
  --color-git-badge-conflicting-bg: rgba(255, 107, 107, 0.15);
  --color-git-badge-renamed-bg: rgba(88, 166, 255, 0.15);

  /* File-type icon colors — dark theme */
  --color-icon-typescript: #519aba;
  --color-icon-javascript: #f0db4f;
  --color-icon-python: #4584b6;
  --color-icon-css: #42a5f5;
  --color-icon-html: #ef6c35;
  --color-icon-json: #8b949e;
  --color-icon-markdown: #519aba;
  --color-icon-image: #c084fc;
  --color-icon-folder: #6b7280;
  --color-icon-folder-open: #3d7ef0;
  --color-icon-default: #6b7280;

  /* Semantic aliases — dark theme */
  --color-error: #ef4444;
  --color-warning: #f59e0b;

  /* Inline code */
  --color-inline-code: #f0883e;

  /* Context ring (normal state — below 60%) */
  --color-context-ring: #8b949e;

  /* User message bubble */
  --color-user-bubble-bg: #1c3352;
  --color-user-bubble-border: rgba(88, 166, 255, 0.12);

  /* Chrome surfaces — dark theme */
  --color-bg-chrome: #161a21;

  /* Hidden / dotfile / generated file dimming — dark theme */
  --color-hidden-text: #555d6e;
  --color-hidden-icon: #4a5264;
}

@theme {
  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Primary colors (unchanged for both themes) */
  --color-primary: #2b6cee;
  --color-primary-hover: #1d5cd6;
  --color-primary-light: #3d7ef0;

  /* Theme-aware colors using CSS variables */
  --color-theme-bg: var(--color-bg);
  --color-theme-card: var(--color-card);
  --color-theme-hover: var(--color-hover);
  --color-theme-border: var(--color-border);
  --color-theme-text: var(--color-text);
  --color-theme-text-secondary: var(--color-text-secondary);
  --color-theme-text-muted: var(--color-text-muted);
  --color-theme-text-dim: var(--color-text-dim);
  --color-theme-placeholder: var(--color-placeholder);
  --color-theme-bg-chrome: var(--color-bg-chrome);
  --color-theme-input-bg: var(--color-input-bg);
  --color-theme-input-border: var(--color-input-border);
  --color-theme-sidebar-icon: var(--color-sidebar-icon);
  --color-theme-sidebar-icon-active: var(--color-sidebar-icon-active);
  --color-theme-code-bg: var(--color-code-bg);

  /* Status colors */
  --color-status-online: var(--color-status-online);
  --color-status-offline: var(--color-status-offline);
  --color-status-error: var(--color-status-error);
  --color-status-warning: var(--color-status-warning);
  --color-status-success: var(--color-status-success);

  /* Accent color presets — override --color-primary via [data-accent] on :root.
   * Default (blue) is defined above. Additional accents below. */

  /* Legacy aliases for backward compatibility */
  --color-dark-bg: var(--color-bg);
  --color-dark-card: var(--color-card);
  --color-dark-hover: var(--color-hover);
  --color-dark-border: var(--color-border);
  --color-muted: var(--color-text-muted);
}

/* Accent color overrides — applied via data-accent attribute on <html>.
 * Each preset overrides --color-primary, --color-primary-hover, --color-primary-light
 * which flow through @theme into Tailwind utilities (bg-primary, text-primary, etc.)
 * AND into var(--color-primary) references in component styles. */
:root[data-accent="purple"] { --color-primary: #8b5cf6; --color-primary-hover: #7c3aed; --color-primary-light: #a78bfa; }
:root[data-accent="green"]  { --color-primary: #10b981; --color-primary-hover: #059669; --color-primary-light: #34d399; }
:root[data-accent="orange"] { --color-primary: #f59e0b; --color-primary-hover: #d97706; --color-primary-light: #fbbf24; }
:root[data-accent="rose"]   { --color-primary: #f43f5e; --color-primary-hover: #e11d48; --color-primary-light: #fb7185; }
/* blue = default, no override needed */

/* Theme transition — smooth toggle, no flash on startup.
 * .no-transitions is set by FOUC script in index.html and removed
 * by ThemeContext after first React paint.
 * Only body + major layout surfaces transition — NOT * (causes jank). */
:root:not(.no-transitions) body {
  transition: background-color 200ms ease, color 150ms ease;
}

/* Base styles */
html {
  font-size: 13px; /* Matches mockup — tighter, more information-dense */
  font-family: var(--font-family-sans);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

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

::-webkit-scrollbar-track {
  background: transparent;
}

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

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* Material Icons - using @fontsource-variable/material-symbols-outlined package */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined Variable';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga';
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

/* Custom utilities */
.glass-effect {
  background: rgba(26, 31, 46, 0.8);
  backdrop-filter: blur(10px);
}

:root:not(.dark) .glass-effect {
  background: rgba(255, 255, 255, 0.8);
}

/* Highlight.js Light Theme - For light UI */
:root:not(.dark) .hljs {
  background: transparent !important;
  color: #24292f;
}

:root:not(.dark) .hljs-comment,
:root:not(.dark) .hljs-quote {
  color: #6e7781;
  font-style: italic;
}

:root:not(.dark) .hljs-keyword,
:root:not(.dark) .hljs-selector-tag,
:root:not(.dark) .hljs-addition {
  color: #cf222e;
}

:root:not(.dark) .hljs-number,
:root:not(.dark) .hljs-string,
:root:not(.dark) .hljs-meta .hljs-meta-string,
:root:not(.dark) .hljs-literal,
:root:not(.dark) .hljs-doctag,
:root:not(.dark) .hljs-regexp {
  color: #0a3069;
}

:root:not(.dark) .hljs-title,
:root:not(.dark) .hljs-section,
:root:not(.dark) .hljs-name,
:root:not(.dark) .hljs-selector-id,
:root:not(.dark) .hljs-selector-class {
  color: #8250df;
}

:root:not(.dark) .hljs-attribute,
:root:not(.dark) .hljs-attr,
:root:not(.dark) .hljs-variable,
:root:not(.dark) .hljs-template-variable,
:root:not(.dark) .hljs-class .hljs-title,
:root:not(.dark) .hljs-type {
  color: #0550ae;
}

:root:not(.dark) .hljs-symbol,
:root:not(.dark) .hljs-bullet,
:root:not(.dark) .hljs-subst,
:root:not(.dark) .hljs-meta,
:root:not(.dark) .hljs-meta .hljs-keyword,
:root:not(.dark) .hljs-selector-attr,
:root:not(.dark) .hljs-selector-pseudo,
:root:not(.dark) .hljs-link {
  color: #953800;
}

:root:not(.dark) .hljs-built_in,
:root:not(.dark) .hljs-deletion {
  color: #82071e;
}

:root:not(.dark) .hljs-formula {
  background: #f6f8fa;
}

:root:not(.dark) .hljs-title.function_,
:root:not(.dark) .hljs-title.class_ {
  color: #8250df;
}

:root:not(.dark) .hljs-params {
  color: #24292f;
}

:root:not(.dark) .hljs-operator {
  color: #cf222e;
}

:root:not(.dark) .hljs-property {
  color: #0550ae;
}

:root:not(.dark) .hljs-punctuation {
  color: #24292f;
}

/* Highlight.js Dark Theme - Custom for our dark UI */
.hljs {
  background: transparent !important;
  color: #e6edf3;
}

.hljs-comment,
.hljs-quote {
  color: #8b949e;
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-addition {
  color: #ff7b72;
}

.hljs-number,
.hljs-string,
.hljs-meta .hljs-meta-string,
.hljs-literal,
.hljs-doctag,
.hljs-regexp {
  color: #a5d6ff;
}

.hljs-title,
.hljs-section,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
  color: #d2a8ff;
}

.hljs-attribute,
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-class .hljs-title,
.hljs-type {
  color: #79c0ff;
}

.hljs-symbol,
.hljs-bullet,
.hljs-subst,
.hljs-meta,
.hljs-meta .hljs-keyword,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-link {
  color: #ffa657;
}

.hljs-built_in,
.hljs-deletion {
  color: #ffa198;
}

.hljs-formula {
  background: #161b22;
}

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

.hljs-strong {
  font-weight: bold;
}

/* Function names */
.hljs-title.function_,
.hljs-title.class_ {
  color: #d2a8ff;
}

/* Parameters */
.hljs-params {
  color: #e6edf3;
}

/* Operators */
.hljs-operator {
  color: #ff7b72;
}

/* Properties */
.hljs-property {
  color: #79c0ff;
}

/* Punctuation */
.hljs-punctuation {
  color: #e6edf3;
}

/* Slide-in animations for immersive chat UI */
@keyframes slide-in-left {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-top {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

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

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

.animate-slide-in-top {
  animation: slide-in-top 0.25s ease-out forwards;
}

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

/* TreeNodeRow — hover and interaction styles */

/* Hover background — only visible when no inline backgroundColor is set
   (selected and matched rows set backgroundColor inline, which takes priority) */
.tree-node-row:hover {
  background-color: var(--color-hover);
}

/* Show CRUD action icons only on row hover */
.tree-node-row:hover .tree-node-actions {
  display: flex !important;
}

/* Drag-over highlight for drop target directories */
.tree-node-row.drag-over {
  outline: 1px dashed var(--color-explorer-accent);
  outline-offset: -1px;
  background-color: color-mix(in srgb, var(--color-explorer-accent) 15%, transparent) !important;
}

/* Shake animation for invalid filename input */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
.animate-shake {
  animation: shake 0.3s ease-in-out;
}
