/* ================================
   Core theme + base styles
   ================================ */

/* ---------- THEME VARIABLES ---------- */
:root {
  --bg: #f5f5f7;
  --card-bg: #ffffff;
  --text-main: #111827;
  --text-muted: #6b7280;
  --accent: #4f46e5;
  --accent-soft: rgba(79, 70, 229, 0.08);
  --radius-xl: 18px;
  --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.12);
  --border: rgba(148, 163, 184, 0.35);
  --hero-grad: radial-gradient(circle at top, #e0f2fe, #f9fafb 55%, #f5f5f7);
}

[data-theme="dark"] {
  --bg: #020617;
  --card-bg: #020617;
  --text-main: #e5e7eb;
  --text-muted: #94a3b8;
  --accent: #818cf8;
  --accent-soft: rgba(129, 140, 248, 0.22);
  --shadow-soft: 0 14px 32px rgba(0,0,0,0.45);
  --border: rgba(148, 163, 184, 0.45);
  --hero-grad: radial-gradient(circle at top, #1e293b, #020617 55%, #020617);
}

/* ---------- RESET ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease;
}

html, body {
  height: 100%;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  background: var(--hero-grad);
  color: var(--text-main);
  line-height: 1.6;
}

/* ---------- GENERIC ELEMENTS ---------- */
a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

/* ---------- LAYOUT ---------- */
.page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}

/* ---------- UTILITIES ---------- */
.muted {
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}