/* ============================================================
 *  theme.css — Design tokens, fonts, base reset
 *  Used by every scene. Loaded first.
 * ============================================================ */

:root {
  /* === Velvet Room palette === */
  --vr-blue-deep:    #050a20;
  --vr-blue-mid:     #0a1438;
  --vr-blue-light:   #25408f;
  --vr-blue-pale:    #1a2a5f;
  --vr-gold:         #c9a461;
  --vr-gold-bright:  #d4af37;
  --vr-gold-soft:    rgba(201, 164, 97, 0.4);
  --vr-cream:        #f5e6c8;
  --vr-ivory:        #fffaef;

  /* === Persona 3 Reload palette === */
  --p3-blue-bg:      #0a1e3f;
  --p3-blue-mid:     #1a4080;
  --p3-blue-light:   #6cb4ff;
  --p3-cyan:         #00d4ff;
  --p3-cyan-soft:    rgba(0, 212, 255, 0.4);

  /* === Persona 5 palette === */
  --p5-red:          #e8001d;
  --p5-red-bright:   #ff003c;
  --p5-red-dark:     #8a0011;
  --p5-yellow:       #f5c300;
  --p5-yellow-soft:  #ffe055;
  --p5-teal:         #00d4e0;
  --p5-black:        #060606;
  --p5-white:        #f0ece0;
  --p5-skew:         -12deg;

  /* === Fonts ===
   * CJK fallbacks (Noto Serif JP, Hiragino, Yu Mincho) keep the Japanese
   * status quote legible when Cormorant Garamond / Georgia can't render it. */
  --font-display:    'Cinzel', 'Noto Serif JP', 'Times New Roman', serif;
  --font-body:       'Cormorant Garamond', 'Noto Serif JP', 'Hiragino Mincho ProN',
                     'Yu Mincho', 'Georgia', serif;
  --font-impact:     'Anton', 'Oswald', 'Impact', sans-serif;
  --font-ui:         'Rajdhani', 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic',
                     system-ui, -apple-system, sans-serif;
  --font-p5-display: 'Anton', 'Impact', sans-serif;
  --font-p5-body:    'Rajdhani', 'Noto Sans JP', system-ui, sans-serif;
  --font-p5-mono:    'Share Tech Mono', 'Courier New', monospace;

  /* === Layout === */
  --stage-min-width: 1280px;
  --stage-min-height: 720px;
}

/* ============ Reset ============ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  background: var(--vr-blue-deep);
  color: var(--vr-cream);
  font-family: var(--font-ui);
  overflow: hidden;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

img {
  max-width: 100%;
  display: block;
}

ul, ol { list-style: none; }

/* Hidden util */
.hidden { display: none !important; }