/* ===========================================================
   Curiosity Corner — shared design tokens & base elements
   =========================================================== */

:root {
  /* Brand + surface */
  --bg: #fff7ec;
  --bg-2: #ffeed8;
  --surface: #ffffff;
  --surface-2: #fdf6ee;
  --ink: #2f2a3f;
  --ink-soft: #5f5872;
  --ink-faint: #8b849c;
  --line: #ece3f5;
  --line-strong: #ddd2ea;

  /* Subject palette */
  --math: #f5872b;
  --math-soft: #ffe7cf;
  --science: #12a594;
  --science-soft: #d3f3ee;
  --reading: #8b5cf6;
  --reading-soft: #e9e0ff;
  --history: #e0526a;
  --history-soft: #ffe0e4;

  --accent: var(--reading);
  --accent-soft: var(--reading-soft);

  --ok: #22a06b;
  --warn: #e2a33b;

  /* Shape */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --shadow-sm: 0 2px 0 rgba(47, 42, 63, .08);
  --shadow-md: 0 6px 18px rgba(47, 42, 63, .10);
  --shadow-lg: 0 16px 40px rgba(47, 42, 63, .16);

  --font: "Baloo 2", "Fredoka", "Nunito", "Trebuchet MS", system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;

  --maxw: 1180px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1d1a29;
    --bg-2: #241f33;
    --surface: #272235;
    --surface-2: #2f2941;
    --ink: #f6f2ff;
    --ink-soft: #cdc4e0;
    --ink-faint: #9d94b3;
    --line: #392f4d;
    --line-strong: #4a3d63;
    --math-soft: #4a3118;
    --science-soft: #133b37;
    --reading-soft: #33255c;
    --history-soft: #4a1f28;
    --shadow-sm: 0 2px 0 rgba(0, 0, 0, .35);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, .35);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .45);
  }
}

:root[data-theme="dark"] {
  --bg: #1d1a29;
  --bg-2: #241f33;
  --surface: #272235;
  --surface-2: #2f2941;
  --ink: #f6f2ff;
  --ink-soft: #cdc4e0;
  --ink-faint: #9d94b3;
  --line: #392f4d;
  --line-strong: #4a3d63;
  --math-soft: #4a3118;
  --science-soft: #133b37;
  --reading-soft: #33255c;
  --history-soft: #4a1f28;
  --shadow-sm: 0 2px 0 rgba(0, 0, 0, .35);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background:
    radial-gradient(1100px 520px at 12% -10%, var(--bg-2), transparent 60%),
    radial-gradient(900px 460px at 92% 0%, var(--bg-2), transparent 55%),
    var(--bg);
  min-height: 100vh;
}

h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .4em; font-weight: 800; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
a { color: inherit; }

img, svg { max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap { width: min(100% - 2rem, var(--maxw)); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px;
  background: var(--surface); color: var(--ink);
  padding: 10px 16px; border-radius: var(--r-sm);
  box-shadow: var(--shadow-md); z-index: 50; transition: top .15s;
}
.skip-link:focus { top: 12px; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--accent);
  --btn-ink: #fff;
  display: inline-flex; align-items: center; gap: .5rem;
  border: 0; cursor: pointer;
  background: var(--btn-bg); color: var(--btn-ink);
  padding: .65rem 1.15rem;
  border-radius: 999px;
  font-weight: 800;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .18);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  text-decoration: none;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 rgba(0, 0, 0, .18); filter: brightness(1.04); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
.btn.ghost {
  --btn-bg: var(--surface);
  --btn-ink: var(--ink);
  border: 2px solid var(--line-strong);
  box-shadow: none;
}
.btn.ghost:hover { box-shadow: var(--shadow-sm); }
.btn.small { padding: .4rem .85rem; font-size: .9rem; }

/* ---------- Subject theming helper ---------- */
[data-subject="Math"]    { --accent: var(--math);    --accent-soft: var(--math-soft); }
[data-subject="Science"] { --accent: var(--science); --accent-soft: var(--science-soft); }
[data-subject="Reading"] { --accent: var(--reading); --accent-soft: var(--reading-soft); }
[data-subject="History"] { --accent: var(--history); --accent-soft: var(--history-soft); }

/* ---------- Pills / tags ---------- */
.pill {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--surface-2); color: var(--ink-soft);
  border: 1px solid var(--line);
  padding: .18rem .6rem; border-radius: 999px;
  font-size: .8rem; font-weight: 700; white-space: nowrap;
}
.pill.accent { background: var(--accent-soft); border-color: transparent; color: var(--ink); }

/* ---------- Chips (toggle buttons) ----------
   Shared, because activity pages use them for their own little toggles. */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  border: 2px solid var(--line-strong); background: var(--surface-2);
  color: var(--ink-soft); border-radius: 999px;
  padding: .32rem .8rem; font-size: .88rem; font-weight: 800; cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
  transition: transform .1s ease;
}
.chip:hover { transform: translateY(-1px); }
.chip[aria-pressed="true"] {
  background: var(--chip-on, var(--accent)); border-color: var(--chip-on, var(--accent)); color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}