/* ============================
   theme.css — Glassmorphism Palette
   Dark: #121212 / #bb86fc (lavender-purple)
   Light: #e0e5ec / #6c5ce7 (deep indigo)
   ============================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ── Dark Theme (default) ── */
  --bg-body:        #121212;
  --bg-sidebar:     rgba(18,18,18,0.88);
  --bg-panel:       #121212;
  --bg-card:        rgba(30,30,30,0.72);
  --bg-btn:         rgba(45,45,45,0.60);
  --bg-btn-hover:   rgba(60,60,60,0.78);
  --bg-display:     rgba(18,18,18,0.92);
  --bg-input:       #2d2d2d;

  --text-primary:   #ffffff;
  --text-secondary: #a0a0a0;
  --text-accent:    #bb86fc;
  --text-dim:       #555555;

  --accent-1:       #bb86fc;
  --accent-2:       #9c4dff;
  --accent-3:       #a5d6a7;
  --accent-4:       #ffa726;

  --btn-op-bg:      rgba(187,134,252,0.12);
  --btn-op-color:   #bb86fc;
  --btn-sci-bg:     rgba(187,134,252,0.08);
  --btn-sci-color:  #ce93d8;
  --btn-fn-color:   #ff6b9d;
  --btn-eq-bg:      #bb86fc;
  --btn-eq-color:   #000000;
  --btn-hex-color:  #ffd54f;

  --border:         rgba(187,134,252,0.14);
  --border-accent:  rgba(187,134,252,0.38);
  --glow:           0 0 24px rgba(187,134,252,0.18);
  --glow-btn:       0 4px 20px rgba(187,134,252,0.40);
  --glass-shine:    linear-gradient(135deg,rgba(255,255,255,0.06),transparent);

  --shadow-card:    0 8px 32px rgba(0,0,0,0.55);
  --shadow-btn:     0 2px 8px rgba(0,0,0,0.45);

  --sidebar-w:      220px;
  --radius-card:    14px;
  --radius-btn:     13px;
  --radius-input:   10px;

  --font-display:   'Space Mono', monospace;
  --font-ui:        'Inter', sans-serif;
}

[data-theme="light"] {
  --bg-body:        #e0e5ec;
  --bg-sidebar:     rgba(240,244,248,0.82);
  --bg-panel:       #e0e5ec;
  --bg-card:        rgba(240,244,248,0.78);
  --bg-btn:         rgba(255,255,255,0.65);
  --bg-btn-hover:   rgba(255,255,255,0.88);
  --bg-display:     rgba(224,229,236,0.92);
  --bg-input:       #ffffff;

  --text-primary:   #2d3436;
  --text-secondary: #636e72;
  --text-accent:    #6c5ce7;
  --text-dim:       #b2bec3;

  --accent-1:       #6c5ce7;
  --accent-2:       #5a4bd1;
  --accent-3:       #2e7d32;
  --accent-4:       #e65100;

  --btn-op-bg:      rgba(108,92,231,0.10);
  --btn-op-color:   #6c5ce7;
  --btn-sci-bg:     rgba(108,92,231,0.07);
  --btn-sci-color:  #6c5ce7;
  --btn-fn-color:   #c62828;
  --btn-eq-bg:      #6c5ce7;
  --btn-eq-color:   #ffffff;
  --btn-hex-color:  #e65100;

  --border:         rgba(108,92,231,0.16);
  --border-accent:  rgba(108,92,231,0.40);
  --glow:           0 0 24px rgba(108,92,231,0.14);
  --glow-btn:       0 4px 20px rgba(108,92,231,0.30);
  --glass-shine:    linear-gradient(135deg,rgba(255,255,255,0.48),transparent);

  --shadow-card:    0 8px 32px rgba(108,92,231,0.10);
  --shadow-btn:     0 2px 8px rgba(0,0,0,0.08);
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  transition:
    background-color 0.28s ease,
    color 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease;
}

html, body {
  height: 100%;
  font-family: var(--font-ui);
  background-color: var(--bg-body);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

/* ── Background orb accents ── */
body::before,
body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

body::before {
  width: 420px;
  height: 420px;
  background: var(--accent-1);
  top: -120px;
  right: -100px;
  opacity: 0.28;
}

body::after {
  width: 300px;
  height: 300px;
  background: var(--accent-2);
  bottom: -90px;
  left: -70px;
  opacity: 0.18;
}

[data-theme="light"] body::before { opacity: 0.14; }
[data-theme="light"] body::after  { opacity: 0.10; }

::selection {
  background: var(--accent-1);
  color: #fff;
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-accent);
  border-radius: 3px;
}