/* Quest Academy — Design Tokens & Base Styles */

:root {
  /* Cozy / Adventure theme (default) */
  --bg: #F4EFE6;
  --bg-2: #EDE5D6;
  --paper: #FBF7EE;
  --ink: #2B2620;
  --ink-soft: #5C5448;
  --ink-mute: #8A8172;
  --rule: #E3D9C6;
  --rule-strong: #C9BCA0;

  --sage: #6F8A5F;
  --sage-deep: #4E6843;
  --sage-soft: #CFDBC1;

  --terra: #C27A52;
  --terra-deep: #9A5A37;
  --terra-soft: #EBC9B2;

  --gold: #D9A441;
  --gold-soft: #F2DFA8;

  --plum: #8A5A7A;
  --plum-soft: #DDC5D4;

  --sky: #6B8FA8;
  --sky-soft: #C6D6E0;

  --danger: #B84A3E;
  --success: var(--sage-deep);

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  --shadow-soft: 0 1px 0 rgba(43,38,32,.04), 0 8px 24px -12px rgba(43,38,32,.14);
  --shadow-lift: 0 2px 0 rgba(43,38,32,.06), 0 16px 40px -16px rgba(43,38,32,.22);
  --shadow-inset: inset 0 0 0 1px var(--rule);

  --font-display: "Fraunces", Georgia, serif;
  --font-ui: "Nunito", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

[data-theme="playful"] {
  --bg: #FFF6EA;
  --bg-2: #FFEBCF;
  --paper: #FFFFFF;
  --ink: #2A2340;
  --ink-soft: #55507A;
  --sage: #2FB37A;
  --sage-deep: #1F8659;
  --sage-soft: #C4EBD7;
  --terra: #F27B4F;
  --terra-deep: #D15A2E;
  --terra-soft: #FFD4BF;
  --gold: #F4BD3A;
  --plum: #8A5AE0;
  --plum-soft: #DCCBF5;
  --sky: #3AA7E4;
  --sky-soft: #C5E5F6;
  --rule: #F2DEC1;
  --rule-strong: #E0C79C;
}

[data-theme="focused"] {
  --bg: #F5F5F2;
  --bg-2: #ECECE7;
  --paper: #FFFFFF;
  --ink: #1A1A1A;
  --ink-soft: #4A4A4A;
  --ink-mute: #8A8A8A;
  --sage: #2F6B4A;
  --sage-deep: #1F4A33;
  --sage-soft: #CFE0D6;
  --terra: #A64B2A;
  --terra-deep: #7A3317;
  --gold: #C08A1E;
  --plum: #6A3E5C;
  --sky: #3E6A82;
  --rule: #D6D6CF;
  --rule-strong: #B0B0A6;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, textarea {
  font-family: inherit;
}

/* ---------- primitives ---------- */

.qa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 15px;
  transition: transform 80ms ease, box-shadow 160ms ease, background 160ms;
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.qa-btn:active { transform: translateY(1px); }

.qa-btn--primary {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 2px 0 var(--ink-soft);
}
.qa-btn--primary:hover { background: #1F1B16; }

.qa-btn--sage {
  background: var(--sage-deep);
  color: #F7F2E6;
  box-shadow: 0 2px 0 #3B4F33;
}
.qa-btn--sage:hover { background: var(--sage); }

.qa-btn--terra {
  background: var(--terra);
  color: #FFF;
  box-shadow: 0 2px 0 var(--terra-deep);
}
.qa-btn--terra:hover { background: var(--terra-deep); }

.qa-btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.qa-btn--ghost:hover { background: var(--bg-2); }

.qa-btn--paper {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--rule);
  box-shadow: var(--shadow-soft);
}
.qa-btn--paper:hover { border-color: var(--rule-strong); }

.qa-btn--lg { padding: 16px 28px; font-size: 17px; border-radius: var(--radius-lg); }
.qa-btn--sm { padding: 8px 14px; font-size: 13px; border-radius: 10px; }

.qa-card {
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.qa-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--bg-2);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
}
.qa-chip--sage { background: var(--sage-soft); color: var(--sage-deep); border-color: #B8C9A8; }
.qa-chip--terra { background: var(--terra-soft); color: var(--terra-deep); border-color: #D9B396; }
.qa-chip--gold { background: var(--gold-soft); color: #8A6416; border-color: #DFC178; }
.qa-chip--plum { background: var(--plum-soft); color: #5A3A4E; }
.qa-chip--sky { background: var(--sky-soft); color: #3D5A70; }

/* Faint paper texture via radial noise */
.qa-paper-bg {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(180,160,120,.06) 0 1.5px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(180,160,120,.05) 0 1px, transparent 1.5px),
    radial-gradient(circle at 40% 80%, rgba(120,90,50,.04) 0 1px, transparent 1.5px);
  background-size: 180px 180px, 120px 120px, 220px 220px;
}

.qa-dashed-rule {
  height: 0;
  border: none;
  border-top: 1.5px dashed var(--rule-strong);
  margin: 0;
}

/* Screen transitions */
.qa-fade-in { animation: fadeIn 280ms ease both; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.qa-pop { animation: pop 320ms cubic-bezier(.2,.8,.2,1.2) both; }
@keyframes pop {
  0% { transform: scale(.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }

/* Utility */
.qa-mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; }
.qa-sr { position: absolute; width:1px; height:1px; overflow: hidden; clip: rect(0 0 0 0); }