/* ============================================================
   BASE.CSS — Design tokens, reset, and typography
   ============================================================ */

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

/* ── Design Tokens ── */
:root {
  /* Colors — Dark Theme (default) */
  --bg-page:          #09090f;
  --bg-card:          rgba(255, 255, 255, 0.045);
  --bg-card-solid:    #111118;
  --bg-btn:           rgba(255, 255, 255, 0.07);
  --bg-btn-hover:     rgba(255, 255, 255, 0.13);
  --bg-btn-active:    rgba(255, 255, 255, 0.18);
  --bg-operator:      rgba(139, 92, 246, 0.18);
  --bg-operator-hover:rgba(139, 92, 246, 0.3);
  --bg-clear:         rgba(239, 68, 68, 0.15);
  --bg-clear-hover:   rgba(239, 68, 68, 0.28);
  --bg-equal:         linear-gradient(135deg, #7c3aed, #2563eb);
  --bg-equal-hover:   linear-gradient(135deg, #6d28d9, #1d4ed8);
  --bg-memory:        rgba(16, 185, 129, 0.12);
  --bg-memory-hover:  rgba(16, 185, 129, 0.22);
  --bg-sci:           rgba(245, 158, 11, 0.1);
  --bg-sci-hover:     rgba(245, 158, 11, 0.2);
  --bg-history:       #0e0e18;
  --bg-overlay:       rgba(0, 0, 0, 0.55);

  --border-card:      rgba(255, 255, 255, 0.08);
  --border-btn:       rgba(255, 255, 255, 0.06);
  --border-operator:  rgba(139, 92, 246, 0.4);
  --border-clear:     rgba(239, 68, 68, 0.35);
  --border-memory:    rgba(16, 185, 129, 0.3);
  --border-sci:       rgba(245, 158, 11, 0.3);

  --text-primary:     #f1f5f9;
  --text-secondary:   #94a3b8;
  --text-muted:       #475569;
  --text-operator:    #a78bfa;
  --text-clear:       #f87171;
  --text-memory:      #34d399;
  --text-sci:         #fbbf24;
  --text-equal:       #ffffff;

  --accent:           #7c3aed;
  --accent-glow:      rgba(124, 58, 237, 0.35);

  /* Sizing */
  --card-width:       360px;
  --card-radius:      28px;
  --btn-radius:       14px;
  --btn-height:       62px;
  --gap:              10px;

  /* Shadows */
  --shadow-card:      0 24px 64px rgba(0,0,0,0.55), 0 0 0 1px var(--border-card);
  --shadow-btn:       0 2px 8px rgba(0,0,0,0.25);
  --shadow-glow:      0 0 24px var(--accent-glow);

  /* Transitions */
  --t-fast:           0.12s cubic-bezier(0.4, 0, 0.2, 1);
  --t-base:           0.2s  cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:           0.35s cubic-bezier(0.4, 0, 0.2, 1);

  /* Typography */
  --font-base:        'Inter', system-ui, sans-serif;
}

/* ── Light Theme ── */
[data-theme="light"] {
  --bg-page:          #e2e8f0;
  --bg-card:          rgba(255, 255, 255, 0.82);
  --bg-card-solid:    #ffffff;
  --bg-btn:           rgba(15, 23, 42, 0.06);
  --bg-btn-hover:     rgba(15, 23, 42, 0.11);
  --bg-btn-active:    rgba(15, 23, 42, 0.17);
  --bg-operator:      rgba(124, 58, 237, 0.1);
  --bg-operator-hover:rgba(124, 58, 237, 0.2);
  --bg-clear:         rgba(220, 38, 38, 0.09);
  --bg-clear-hover:   rgba(220, 38, 38, 0.18);
  --bg-memory:        rgba(5, 150, 105, 0.09);
  --bg-memory-hover:  rgba(5, 150, 105, 0.18);
  --bg-sci:           rgba(217, 119, 6, 0.09);
  --bg-sci-hover:     rgba(217, 119, 6, 0.18);
  --bg-history:       #f8fafc;
  --bg-overlay:       rgba(15, 23, 42, 0.3);

  --border-card:      rgba(15, 23, 42, 0.1);
  --border-btn:       rgba(15, 23, 42, 0.08);
  --border-operator:  rgba(124, 58, 237, 0.3);
  --border-clear:     rgba(220, 38, 38, 0.3);
  --border-memory:    rgba(5, 150, 105, 0.3);
  --border-sci:       rgba(217, 119, 6, 0.3);

  --text-primary:     #0f172a;
  --text-secondary:   #475569;
  --text-muted:       #94a3b8;
  --text-operator:    #7c3aed;
  --text-clear:       #dc2626;
  --text-memory:      #059669;
  --text-sci:         #d97706;

  --shadow-card:      0 20px 60px rgba(15, 23, 42, 0.15), 0 0 0 1px var(--border-card);
  --accent-glow:      rgba(124, 58, 237, 0.2);
}

/* ── CSS Reset ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html { font-size: 16px; }

body {
  font-family: var(--font-base);
  background: var(--bg-page);
  color: var(--text-primary);
  min-height: 100dvh;
  display: flex;
  align-items: flex-start;      /* allow card to grow without clipping */
  justify-content: center;
  overflow-y: auto;             /* scrollable when scientific mode expands */
  transition: background var(--t-slow), color var(--t-slow);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Background decoration ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 10%, rgba(124, 58, 237, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 90%, rgba(37, 99, 235, 0.1) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}