/* ═══════════════════════════════════════════════════════════
   HMCD — themes.css
   CSS custom properties for all color themes.
   Switched at runtime by theme-manager.js via data-theme attribute.
   ═══════════════════════════════════════════════════════════ */

/* ── Shared layout/spacing tokens (theme-independent) ── */
:root {
  --sidebar-w:  220px;
  --nav-h:       56px;
  --radius:      10px;
  --font-mono:  'Space Mono', 'Fira Code', 'Courier New', monospace;
  --font-ui:    'Syne', 'Segoe UI', system-ui, sans-serif;
  --transition:  0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --danger:     #ff4757;
  --success:    #10ffa0;
  --warn:       #fbbf24;
}

/* ══════════════════════════════════
   THEME: OBSIDIAN (default)
   Cool dark with cyan accent
══════════════════════════════════ */
[data-theme="obsidian"], :root {
  --bg:       #0a0b0f;
  --surface:  #111318;
  --border:   #1e2028;
  --accent:   #00e5ff;
  --accent2:  #7c3aed;
  --text:     #e8eaf0;
  --muted:    #6b7280;
}

/* ══════════════════════════════════
   THEME: EMBER
   Warm dark with orange accent
══════════════════════════════════ */
[data-theme="ember"] {
  --bg:       #0d0806;
  --surface:  #130f0c;
  --border:   #261d17;
  --accent:   #ff6b35;
  --accent2:  #f59e0b;
  --text:     #f0ece8;
  --muted:    #78716c;
}

/* ══════════════════════════════════
   THEME: AURORA
   Deep dark with green/teal accent
══════════════════════════════════ */
[data-theme="aurora"] {
  --bg:       #060d0a;
  --surface:  #0d1510;
  --border:   #162318;
  --accent:   #10ffa0;
  --accent2:  #06b6d4;
  --text:     #e8f5ee;
  --muted:    #6b7f74;
}

/* ══════════════════════════════════
   THEME: NEON
   Deep purple with magenta accent
══════════════════════════════════ */
[data-theme="neon"] {
  --bg:       #07050f;
  --surface:  #100d1a;
  --border:   #1c1830;
  --accent:   #c84bff;
  --accent2:  #ff2d78;
  --text:     #f0ecff;
  --muted:    #7c6d96;
}

/* ══════════════════════════════════
   THEME: ARCTIC
   Near-white light theme
══════════════════════════════════ */
[data-theme="arctic"] {
  --bg:       #f4f6fa;
  --surface:  #ffffff;
  --border:   #e2e8f0;
  --accent:   #0070f3;
  --accent2:  #7c3aed;
  --text:     #0f172a;
  --muted:    #64748b;
}

/* ══════════════════════════════════
   THEME: MIDNIGHT
   True black with gold accent
══════════════════════════════════ */
[data-theme="midnight"] {
  --bg:       #000000;
  --surface:  #0a0a0a;
  --border:   #1a1a1a;
  --accent:   #f5c518;
  --accent2:  #e07b39;
  --text:     #efefef;
  --muted:    #666666;
}

/* ══════════════════════════════════
   SYNTAX HIGHLIGHT TOKENS
   Used by editor.js highlight()
══════════════════════════════════ */
:root {
  --syn-keyword:  #ff7b72;
  --syn-string:   #a5d6ff;
  --syn-number:   #79c0ff;
  --syn-comment:  #8b949e;
  --syn-class:    #ffa657;
  --syn-function: #d2a8ff;
  --syn-operator: #c9d1d9;
  --syn-tag:      #7ee787;
  --syn-attr:     #79c0ff;
  --syn-punct:    #c9d1d9;
}

/* ══════════════════════════════════
   SCROLLBAR theming
══════════════════════════════════ */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}