/**
 * CodeQuest Design System — Theme Tokens & Base Styles
 * All components MUST reference these custom properties.
 */

:root {
  /* ── Palette ── */
  --bg-dark: #16161D;
  --panel: #2A2A36;
  --panel-light: #353545;
  --border: #6B4F2A;
  --border-light: #8B7355;
  --btn-green: #6BCB77;
  --btn-green-dark: #4FA85A;
  --btn-blue: #4D96FF;
  --btn-blue-dark: #3A7AD9;
  --btn-red: #FF6B6B;
  --btn-red-dark: #D95555;
  --btn-gold: #FFD93D;
  --btn-gold-dark: #D4B832;
  --text-main: #F4F4F8;
  --text-muted: #C8C8D8;
  --text-dark: #16161D;
  --hp-color: #FF6B6B;
  --mana-color: #4D96FF;
  --exp-color: #6BCB77;
  --gold-color: #FFD93D;

  /* ── Shadows & borders ── */
  --pixel-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5);
  --pixel-shadow-sm: 2px 2px 0px rgba(0, 0, 0, 0.5);
  --pixel-shadow-inset: inset 2px 2px 0px rgba(0, 0, 0, 0.3);
  --border-width: 4px;
  --radius: 0px;

  /* ── Typography ── */
  /* Hybrid stack: Nunito (body), Silkscreen (RPG UI), JetBrains Mono (code).
     System fallbacks ensure legibility if web fonts fail to load. */
  --font-pixel: "Silkscreen", "VT323", ui-monospace, monospace;
  --font-body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-size-xs: clamp(0.65rem, 1.6vw, 0.75rem);
  --font-size-sm: clamp(0.8rem, 2vw, 0.95rem);
  --font-size-base: clamp(1.05rem, 2.6vw, 1.2rem);
  --font-size-lg: clamp(1.2rem, 3vw, 1.4rem);
  --font-size-xl: clamp(1.35rem, 3.5vw, 1.65rem);
  --font-size-pixel-min: 0.65rem;
  --font-size-pixel-max: 1.05rem;

  /* ── Spacing ── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  /* ── Transitions ── */
  --transition-fast: 100ms steps(2);
  --transition-normal: 200ms steps(4);

  /* ── Z-index scale ── */
  --z-dropdown: 100;
  --z-modal: 200;
  --z-tooltip: 300;
}

/* ── Reset & Base ── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 18px;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body.cq-body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.65;
  letter-spacing: 0.01em;
  display: flex;
  flex-direction: column;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -webkit-font-smoothing: antialiased;
}

/* Pixel headings — fallback to body font below 480px for legibility */
h1, h2, h3, .cq-heading {
  font-family: var(--font-pixel);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

@media (max-width: 479px) {
  h1, h2, h3, .cq-heading {
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.4;
  }
}

a {
  color: var(--btn-blue);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: var(--btn-gold);
  text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
.pixel-btn:focus-visible {
  outline: 3px solid var(--btn-gold);
  outline-offset: 2px;
}

/* ── Skip link ── */
.cq-skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  z-index: 9999;
  padding: var(--space-sm) var(--space-md);
  background: var(--btn-gold);
  color: var(--text-dark);
  font-family: var(--font-pixel);
  font-size: var(--font-size-xs);
}

.cq-skip-link:focus {
  top: var(--space-md);
}

/* ── Layout ── */
.cq-main {
  flex: 1;
  padding: var(--space-md);
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

.cq-footer {
  margin-top: auto;
  border-top: var(--border-width) solid var(--border);
}

.cq-footer__text {
  font-size: var(--font-size-xs);
  font-family: var(--font-pixel);
  color: var(--text-muted);
}

/* Flash / inline alerts (shared) */
.cq-alert {
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  border: var(--border-width) solid var(--border);
  box-shadow: var(--pixel-shadow-sm);
  font-size: var(--font-size-sm);
}

.cq-alert--error {
  background-color: rgba(255, 107, 107, 0.15);
  border-color: var(--btn-red);
  color: var(--btn-red);
}

.cq-alert--success {
  background-color: rgba(107, 203, 119, 0.15);
  border-color: var(--btn-green);
  color: var(--btn-green);
}

.cq-alert--info {
  background-color: rgba(77, 150, 255, 0.15);
  border-color: var(--btn-blue);
  color: var(--btn-blue);
}

/* ── Utility classes ── */
.cq-text-muted { color: var(--text-muted); }
.cq-text-gold { color: var(--gold-color); }
.cq-text-green { color: var(--btn-green); }
.cq-font-pixel {
  font-family: var(--font-pixel);
  font-size: clamp(var(--font-size-pixel-min), 2vw, var(--font-size-pixel-max));
}

.cq-section {
  margin-bottom: var(--space-xl);
}

.cq-section__title {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--border);
}

/* Hero portrait (dashboard / dialogue) */
.cq-hero-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.cq-hero-card__sprite {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  background: var(--bg-dark);
  border: var(--border-width) solid var(--border);
  box-shadow: var(--pixel-shadow-sm);
  image-rendering: pixelated;
  overflow: hidden;
}

.cq-hero-card__sprite img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  animation: cq-sprite-idle 1.2s steps(2) infinite;
}

.cq-hero-card__meta {
  min-width: 0;
}

/* ── Dashboard panels: fill their grid cell, distribute content ── */
.cq-dashboard-panel {
  display: flex;
  flex-direction: column;
}

.cq-dashboard-panel > .pixel-panel__header {
  flex: 0 0 auto;
}

.cq-dashboard-panel__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cq-dashboard-panel__footer {
  margin-top: auto;
  flex: 0 0 auto;
}

@keyframes cq-sprite-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .cq-hero-card__sprite img {
    animation: none;
  }
}

/* ── Shared UI utilities (student parity for teacher/admin) ─────────────── */
/* Teacher/admin pages reuse these classes but don't load `pages/map.css`. */
.cq-breadcrumb {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.cq-breadcrumb a {
  color: var(--btn-gold);
  text-decoration: none;
}

.cq-breadcrumb a:hover,
.cq-breadcrumb a:focus-visible {
  text-decoration: underline;
}

/* Code blocks/samples */
.cq-code-block {
  background: var(--bg-dark);
  border: var(--border-width) solid var(--border);
  padding: var(--space-md);
  overflow-x: auto;
  font-family: var(--font-mono, Consolas, "Courier New", monospace);
  font-size: var(--font-size-sm);
  color: var(--exp-color);
  white-space: pre-wrap;
  word-break: break-word;
}

pre.cq-code {
  background: var(--bg-dark);
  border: var(--border-width) solid var(--border);
  padding: var(--space-md);
  overflow-x: auto;
  font-family: var(--font-mono, Consolas, "Courier New", monospace);
  color: var(--exp-color);
  white-space: pre-wrap;
  word-break: break-word;
}

code.cq-code {
  font-family: var(--font-mono, Consolas, "Courier New", monospace);
  font-size: 0.9em;
  color: var(--exp-color);
  background: rgba(0, 0, 0, 0.35);
  padding: 0.1em 0.35em;
  border: 1px solid var(--border);
}

/* ── Contrast notes (WCAG AA) ──
 * PASS: #F4F4F8 on #16161D, #FFD93D on #16161D, #6BCB77 on #16161D
 * PASS: #4D96FF on #16161D (5.2:1)
 * WARN: muted text for secondary copy only
 * FAIL: #FFD93D on #FFFFFF — never combine; gold text always on dark bg
 * FAIL: #6BCB77 on #FFD93D — avoid green on gold buttons
 */