/* ═══════════════════════════════════════════════════════════════════
   theme.css  —  Shared design tokens, reset, theme toggle
   ═══════════════════════════════════════════════════════════════════ */

/* ── Dark theme (default) ─────────────────────────────────────── */
:root, [data-theme="dark"] {
  --bg:       #050C16;
  --bg0:      #050C16;
  --bg1:      #0A1828;
  --bg3:      #152840;
  --border:   #1C3555;
  --green:    #04D99E;
  --text1:    #DCF0FF;
  --text2:    #6FA0C0;
  --text3:    #355570;
  --red:      #FF3A5E;
  --amber:    #F5A52A;
  --purple:   #8B5CF6;

  --green-bg:    rgba(4, 217, 158, .15);
  --green-bg2:   rgba(4, 217, 158, .08);
  --green-border:rgba(4, 217, 158, .4);
  --red-bg:      rgba(255, 58, 94, .12);
  --red-bg2:     rgba(255, 58, 94, .15);
  --red-border:  rgba(255, 58, 94, .4);
  --amber-bg:    rgba(245, 165, 42, .12);
  --amber-border:rgba(245, 165, 42, .4);
  --purple-bg:   rgba(139, 92, 246, .15);
  --purple-border:rgba(139, 92, 246, .7);
  --subtle-border: rgba(28, 53, 85, .4);

  --scrollbar-bg:   #0A1828;
  --scrollbar-thumb: #1C3555;
}

/* ── Light theme ──────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:       #F4F6F9;
  --bg0:      #EBEEF3;
  --bg1:      #FFFFFF;
  --bg3:      #E2E7EE;
  --border:   #CBD5E1;
  --green:    #059669;
  --text1:    #1E293B;
  --text2:    #475569;
  --text3:    #94A3B8;
  --red:      #DC2626;
  --amber:    #D97706;
  --purple:   #7C3AED;

  --green-bg:    rgba(5, 150, 105, .12);
  --green-bg2:   rgba(5, 150, 105, .06);
  --green-border:rgba(5, 150, 105, .35);
  --red-bg:      rgba(220, 38, 38, .10);
  --red-bg2:     rgba(220, 38, 38, .12);
  --red-border:  rgba(220, 38, 38, .35);
  --amber-bg:    rgba(217, 119, 6, .10);
  --amber-border:rgba(217, 119, 6, .35);
  --purple-bg:   rgba(124, 58, 237, .10);
  --purple-border:rgba(124, 58, 237, .5);
  --subtle-border: rgba(203, 213, 225, .6);

  --scrollbar-bg:   #EBEEF3;
  --scrollbar-thumb: #CBD5E1;
}

/* ── Reset & base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
body {
  background: var(--bg);
  font-family: system-ui, -apple-system, sans-serif;
  color: var(--text1);
  -webkit-font-smoothing: antialiased;
  transition: background .25s, color .25s;
}

/* ── Scrollbar styling ────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px }
::-webkit-scrollbar-track { background: var(--scrollbar-bg) }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px }

/* ── Theme toggle button ──────────────────────────────────────── */
.theme-toggle {
  position: relative;
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  color: var(--text3);
  transition: all .2s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--amber);
  color: var(--amber);
  background: var(--amber-bg);
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon { position: absolute; transition: opacity .25s, transform .25s }
[data-theme="dark"] .theme-toggle .icon-sun  { opacity: 1; transform: rotate(0deg) }
[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) }
[data-theme="light"] .theme-toggle .icon-sun  { opacity: 0; transform: rotate(90deg) }
[data-theme="light"] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg) }

/* ── Small-screen utilities ───────────────────────────────────── */
@media (max-width: 400px) {
  .hide-xs { display: none !important }
  .text-sm-xs { font-size: 10px !important }
}