/*
 * theme.css — TensorQ shared design system
 * Included by every page. Defines tokens, reset, base typography, and animations.
 */

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

/* ── Design tokens ──────────────────────────────────────── */
:root {
  --bg:         #f5f7fa;
  --surface:    #ffffff;
  --surface2:   #f0f2f5;
  --border:     #e2e6ed;
  --accent:     #2563eb;
  --accent-dim: #1d4ed8;
  --text:       #1e293b;
  --text-muted: #94a3b8;
  --text-dim:   #64748b;
  --green:      #10b981;
  --red:        #ef4444;
  --radius:     12px;
  --font-sans:  'Inter', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;
}

/* ── Base ───────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background:  var(--bg);
  color:       var(--text);
  min-height:  100vh;
  font-size:   16px;
}

/* ── Animations ─────────────────────────────────────────── */
@keyframes pulse {
  0%,100% { opacity: 1;   box-shadow: 0 0 8px var(--green); }
  50%     { opacity: 0.4; box-shadow: 0 0 2px var(--green); }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Shared: pulsing status dot ─────────────────────────── */
.dot {
  display: inline-block;
  width: 10px; height: 10px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--green);
  animation: pulse 2.5s ease-in-out infinite;
  flex-shrink: 0;
}

/* ── Shared: blue gradient header panel ─────────────────── */
/* Used by the page <header> and the login card header */
.gradient-header {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 50%, #e0e7ff 100%);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.gradient-header::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 10% 50%, rgba(37,99,235,0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Shared: monospace subtitle ─────────────────────────── */
.mono-sub {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-dim);
}
.mono-sub span { color: var(--accent); }

/* ── Shared: error banner ───────────────────────────────── */
.error-banner {
  display: none;
  background: rgba(239,68,68,0.07);
  border: 1px solid rgba(239,68,68,0.22);
  color: #b91c1c;
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 20px;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ── Shared: spinner ────────────────────────────────────── */
.spinner {
  width: 22px; height: 22px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ── Shared: links ──────────────────────────────────────── */
a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: color .15s;
}
a:hover { color: var(--accent-dim); text-decoration: underline; }