/* Theme Styles - Light/Dark mode support */

/* Theme toggle icon visibility */
[data-theme="light"] .icon-moon, [data-theme="dark"] .icon-sun { display: none; }
[data-theme="light"] .icon-sun, [data-theme="dark"] .icon-moon { display: block; }

:root:not([data-theme]) .icon-sun, :root:not([data-theme]) .icon-moon { display: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .icon-sun { display: block; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .icon-moon { display: block; } }

/* Dark Theme Colors */
[data-theme="dark"] {
  --color-bg: #0f0f1a;
  --color-bg-secondary: #1a1a2e;
  --color-bg-tertiary: #252542;
  --color-text: #e4e4e7;
  --color-text-secondary: #a1a1aa;
  --color-text-muted: #71717a;
  --color-border: #3f3f5a;
  --color-border-light: #2a2a42;
  --color-primary: #60a5fa;
  --color-primary-hover: #93c5fd;
  --color-primary-light: rgba(96, 165, 250, 0.15);
  --color-accent: #818cf8;
  --color-code-bg: #1e1e32;
  --color-code-text: #f472b6;
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-primary-hover);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #0f0f1a;
    --color-bg-secondary: #1a1a2e;
    --color-bg-tertiary: #252542;
    --color-text: #e4e4e7;
    --color-text-secondary: #a1a1aa;
    --color-text-muted: #71717a;
    --color-border: #3f3f5a;
    --color-border-light: #2a2a42;
    --color-primary: #60a5fa;
    --color-primary-hover: #93c5fd;
    --color-primary-light: rgba(96, 165, 250, 0.15);
    --color-accent: #818cf8;
    --color-code-bg: #1e1e32;
    --color-code-text: #f472b6;
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-hover);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  }
}

[data-theme="dark"] mark { background-color: rgba(250, 204, 21, 0.3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) mark { background-color: rgba(250, 204, 21, 0.3); } }

[data-theme="dark"] ::selection { background-color: rgba(96, 165, 250, 0.3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) ::selection { background-color: rgba(96, 165, 250, 0.3); } }

/* Command Palette */
.command-palette { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: flex-start; justify-content: center; padding-top: 15vh; }
.command-palette[hidden] { display: none; }
.command-backdrop { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.5); }
[data-theme="dark"] .command-backdrop { background-color: rgba(0, 0, 0, 0.7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .command-backdrop { background-color: rgba(0, 0, 0, 0.7); } }
.command-dialog { position: relative; width: 100%; max-width: 560px; margin: 0 var(--space-4); background-color: var(--color-bg); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); overflow: hidden; }
.command-input-wrapper { display: flex; align-items: center; padding: var(--space-4); border-bottom: 1px solid var(--color-border); }
.command-input { flex: 1; border: none; background: none; font-size: var(--font-size-lg); color: var(--color-text); outline: none; }
.command-input::placeholder { color: var(--color-text-muted); }
.command-hint { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-left: var(--space-3); }
.command-list { list-style: none; padding: var(--space-2); margin: 0; max-height: 400px; overflow-y: auto; }
.command-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); cursor: pointer; transition: background-color var(--transition-fast); }
.command-item:hover, .command-item.active { background-color: var(--color-bg-secondary); }
.command-item-icon { display: flex; color: var(--color-text-muted); }
.command-item-content { flex: 1; min-width: 0; }
.command-item-title { font-weight: var(--font-weight-medium); color: var(--color-text); }
.command-item-desc { font-size: var(--font-size-sm); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.command-group-title { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); padding: var(--space-3) var(--space-4) var(--space-2); }