/* base.css — resets, fonts, theme tokens */

:root[data-theme="midnight"] {
  --bg: #0b0e16;
  --bg-soft: #11141f;
  --surface: #161a26;
  --surface-raised: #1b2030;
  --border: #272c3c;
  --text: #eef0f6;
  --text-muted: #8c93a8;
  --accent: #7c6cf0;
  --accent-soft: rgba(124, 108, 240, 0.16);
  --accent-strong: #9b8dff;
  --danger: #f2667a;
  --success: #4fd1a5;
  --glow-a: rgba(124, 108, 240, 0.25);
  --glow-b: rgba(79, 209, 165, 0.12);
}

:root[data-theme="dusk"] {
  --bg: #1a1420;
  --bg-soft: #20182a;
  --surface: #251c30;
  --surface-raised: #2c2238;
  --border: #3a2d49;
  --text: #f4eef9;
  --text-muted: #a897b8;
  --accent: #e18bd0;
  --accent-soft: rgba(225, 139, 208, 0.16);
  --accent-strong: #eea6e0;
  --danger: #f2667a;
  --success: #4fd1a5;
  --glow-a: rgba(225, 139, 208, 0.22);
  --glow-b: rgba(142, 110, 230, 0.14);
}

:root[data-theme="paper"] {
  --bg: #f6f5f2;
  --bg-soft: #ffffff;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --border: #e4e1da;
  --text: #22201c;
  --text-muted: #6b675f;
  --accent: #5a4fcf;
  --accent-soft: rgba(90, 79, 207, 0.1);
  --accent-strong: #4339b5;
  --danger: #d1435a;
  --success: #2f9e6e;
  --glow-a: rgba(90, 79, 207, 0.08);
  --glow-b: rgba(47, 158, 110, 0.06);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.is-hidden { display: none !important; }

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-soft); }

.backdrop {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.backdrop-glow {
  position: absolute;
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.6;
}
.backdrop-glow-a {
  top: -20%;
  left: -10%;
  background: var(--glow-a);
  animation: drift-a 22s ease-in-out infinite alternate;
}
.backdrop-glow-b {
  bottom: -25%;
  right: -10%;
  background: var(--glow-b);
  animation: drift-b 26s ease-in-out infinite alternate;
}

.screen {
  position: relative;
  z-index: 1;
  height: 100vh;
}