/* ==========================================================================
   Synaptic — Theme System
   Light + Dark + Auto Detection
   ========================================================================== */

/* ----- Light Theme (default) ----- */
:root,
[data-theme="light"] {
  /* Surfaces */
  --color-bg:            #FAFAF9;
  --color-surface:       #FFFFFF;
  --color-surface-hover: #F5F5F4;
  --color-sidebar:       #F7F7F5;

  /* Borders */
  --color-border:        #E7E5E4;
  --color-border-strong: #D6D3D1;

  /* Text */
  --color-text-primary:   #1C1917;
  --color-text-secondary: #57534E;
  --color-text-tertiary:  #A8A29E;
  --color-text-inverse:   #FAFAF9;

  /* Brand Accent — Indigo */
  --color-accent:         #6366F1;
  --color-accent-hover:   #4F46E5;
  --color-accent-subtle:  #EEF2FF;
  --color-accent-text:    #4338CA;

  /* Semantic */
  --color-success: #059669;
  --color-warning: #D97706;
  --color-error:   #DC2626;
  --color-info:    #0284C7;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.12);
}

/* ----- Dark Theme ----- */
[data-theme="dark"] {
  /* Surfaces */
  --color-bg:            #0C0A09;
  --color-surface:       #1C1917;
  --color-surface-hover: #292524;
  --color-sidebar:       #14110F;

  /* Borders */
  --color-border:        #292524;
  --color-border-strong: #44403C;

  /* Text — brighter tertiary for dark mode readability */
  --color-text-primary:   #FAFAF9;
  --color-text-secondary: #D6D3D1;
  --color-text-tertiary:  #A8A29E;
  --color-text-inverse:   #1C1917;

  /* Brand Accent — Indigo (lighter for dark) */
  --color-accent:         #818CF8;
  --color-accent-hover:   #A5B4FC;
  --color-accent-subtle:  #1E1B4B;
  --color-accent-text:    #C7D2FE;

  /* Semantic */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error:   #EF4444;
  --color-info:    #38BDF8;

  /* Shadows — heavier for dark depth */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
}

/* ----- Auto-detect system preference ----- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:            #0C0A09;
    --color-surface:       #1C1917;
    --color-surface-hover: #292524;
    --color-sidebar:       #14110F;

    --color-border:        #292524;
    --color-border-strong: #44403C;

    --color-text-primary:   #FAFAF9;
    --color-text-secondary: #D6D3D1;
    --color-text-tertiary:  #A8A29E;
    --color-text-inverse:   #1C1917;

    --color-accent:         #818CF8;
    --color-accent-hover:   #A5B4FC;
    --color-accent-subtle:  #1E1B4B;
    --color-accent-text:    #C7D2FE;

    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error:   #EF4444;
    --color-info:    #38BDF8;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
  }
}

/* ----- Smooth theme transitions ----- */
.synaptic-v2,
.synaptic-v2 *,
.synaptic-v2 *::before,
.synaptic-v2 *::after {
  transition:
    background-color var(--transition-slow),
    border-color var(--transition-slow),
    color var(--transition-slow);
}

/* But disable on interactions that have their own transitions */
.synaptic-v2 .sv2-btn,
.synaptic-v2 .sv2-icon-btn,
.synaptic-v2 .sv2-chip,
.synaptic-v2 .sv2-dropdown-item,
.synaptic-v2 .sv2-send,
.synaptic-v2 .sv2-attach,
.synaptic-v2 .sv2-model-selector,
.synaptic-v2 .sv2-suggestion {
  transition: all var(--transition-fast);
}

/* ----- Dark mode scrollbars ----- */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--color-bg);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-full);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-tertiary);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  :root:not([data-theme]) ::-webkit-scrollbar-track {
    background: var(--color-bg);
  }
  :root:not([data-theme]) ::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: var(--radius-full);
  }
}