/* GyanGuru Tools — shared theme tokens (blue take on the choices.gyanguru.org.in look) */
:root {
  --bg1: #e4f4fb;
  --bg2: #d3ecf8;
  --card: #fbfeff;
  --soft: #eaf6fc;
  --ink: #0f1b4d;
  --muted: #557091;
  --line: #cfe6f2;
  --field: #ffffff;
  --brand: #0b84c6;
  --brand-deep: #1e3a8a;
  --grad1: #12b3e0;
  --grad2: #1e3a8a;
  --navy: #141a5c;
  --yellow: #ffd23f;
  --yellow-ink: #2e2300;
  --good: #11744a;
  --goodbg: #dff4ea;
  --err: #b4232c;
  --errbg: #fde8ea;
  --glass: rgba(255, 255, 255, .78);
  --glass-line: rgba(255, 255, 255, .65);
  --shadow: 0 24px 48px -28px rgba(14, 70, 140, .45);
  --blob-op: .55;
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg1: #080d33; --bg2: #0d1546; --card: #101a52; --soft: #15215f;
    --ink: #e6f4ff; --muted: #9db4d6; --line: #23336f; --field: #0c1544;
    --brand: #38bdf8; --brand-deep: #7dd3fc;
    --glass: rgba(20, 32, 92, .72); --glass-line: rgba(125, 211, 252, .22);
    --shadow: 0 28px 60px -30px rgba(0, 0, 0, .8); --blob-op: .35;
    --goodbg: #0f3a33; --good: #6ee7b7; --errbg: #3d1424; --err: #fda4af;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg1: #080d33; --bg2: #0d1546; --card: #101a52; --soft: #15215f;
  --ink: #e6f4ff; --muted: #9db4d6; --line: #23336f; --field: #0c1544;
  --brand: #38bdf8; --brand-deep: #7dd3fc;
  --glass: rgba(20, 32, 92, .72); --glass-line: rgba(125, 211, 252, .22);
  --shadow: 0 28px 60px -30px rgba(0, 0, 0, .8); --blob-op: .35;
  --goodbg: #0f3a33; --good: #6ee7b7; --errbg: #3d1424; --err: #fda4af;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
html { min-height: 100%; background: linear-gradient(135deg, var(--bg1), var(--bg2)) fixed; background-color: var(--bg2); }
body {
  min-height: 100vh;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: transparent;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: 8px; }

/* Glossy floating bubbles */
.bubbles { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.bubbles .b {
  position: absolute; border-radius: 50%; opacity: var(--blob-op);
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 6%, #9be3f5 22%, #38bdf8 58%, #1d6fc4 100%);
  box-shadow: inset -14px -18px 40px rgba(14, 60, 140, .35), 0 30px 60px -30px rgba(14, 90, 170, .5);
  animation: drift 22s ease-in-out infinite alternate;
}
.b1 { width: 240px; height: 240px; top: -70px; right: -50px; }
.b2 { width: 180px; height: 180px; bottom: 6%; left: -70px; animation-duration: 26s; }
.b3 { width: 70px;  height: 70px;  top: 30%; right: 6%; animation-duration: 18s; }
.b4 { width: 120px; height: 120px; bottom: -40px; right: 14%; animation-duration: 30s; }
.b5 { width: 46px;  height: 46px;  top: 14%; left: 9%; animation-duration: 20s; }
@keyframes drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(14px,-22px,0); } }

/* Theme toggle pill */
.theme-toggle {
  position: fixed; top: 18px; right: 18px; z-index: 5;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--ink); font: 600 15px var(--body); cursor: pointer;
}
.theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .i-sun { display: none; }
  :root:not([data-theme]) .theme-toggle .i-moon { display: inline; }
}

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