/* GeroGame design tokens. Themes switch via <html data-theme="neon|sunset|mint|galaxy|paper">.
   Extend freely; don't rename existing tokens (games/admin/screens rely on them). */
@import url('/css/fonts.css');

:root {
  --font-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-display: "Unbounded", "Black Han Sans", var(--font-body);
  --font-kdisplay: "Black Han Sans", "Unbounded", var(--font-body);

  --radius-s: 12px;
  --radius-m: 18px;
  --radius-l: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 140ms;
  --dur: 260ms;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tabbar-h: 72px;
  --topbar-h: 60px;
  --app-max: 520px;

  --gold: #FFC93C;
  --gem: #4DE3FF;
  --coin: #FFB547;
  --ticket: #FF6FB5;

  --game-evolve: #7C5CFF;
  --game-blocks: #FF4D8D;
  --game-dash: #00E5FF;
  --game-orbit: #FFB547;
}

/* ---------- NEON (default, dark) ---------- */
:root, [data-theme="neon"] {
  color-scheme: dark;
  --bg: #0B0B1A;
  --bg-2: #12112A;
  --surface: rgba(255, 255, 255, .06);
  --surface-2: rgba(255, 255, 255, .10);
  --surface-solid: #17163A;
  --line: rgba(255, 255, 255, .10);
  --fg: #F4F2FF;
  --fg-2: rgba(244, 242, 255, .72);
  --fg-3: rgba(244, 242, 255, .45);
  --primary: #7C5CFF;
  --primary-2: #9F86FF;
  --primary-ink: #FFFFFF;
  --accent: #00E5FF;
  --pink: #FF4D8D;
  --danger: #FF4D5E;
  --success: #2EE59D;
  --warning: #FFB547;
  --glow: 0 0 24px rgba(124, 92, 255, .55);
  --grad-hero: radial-gradient(120% 80% at 10% 0%, #3A1D8F 0%, transparent 60%), radial-gradient(90% 70% at 100% 10%, #7A1253 0%, transparent 55%), linear-gradient(180deg, #0B0B1A, #0B0B1A);
  --grad-primary: linear-gradient(135deg, #7C5CFF 0%, #FF4D8D 100%);
  --grad-accent: linear-gradient(135deg, #00E5FF 0%, #7C5CFF 100%);
  --grad-gold: linear-gradient(135deg, #FFE27A 0%, #FFB547 50%, #FF7A3C 100%);
  --btn-depth: #4B2FC9;
  --shadow-1: 0 6px 18px rgba(0, 0, 0, .35);
  --shadow-2: 0 18px 50px rgba(0, 0, 0, .5);
  --blur: saturate(160%) blur(18px);
}

/* ---------- SUNSET ---------- */
[data-theme="sunset"] {
  color-scheme: dark;
  --bg: #1A0B12;
  --bg-2: #2A1020;
  --surface: rgba(255, 220, 200, .07);
  --surface-2: rgba(255, 220, 200, .12);
  --surface-solid: #32142A;
  --line: rgba(255, 220, 200, .12);
  --fg: #FFF3EC;
  --fg-2: rgba(255, 243, 236, .74);
  --fg-3: rgba(255, 243, 236, .46);
  --primary: #FF6A3D;
  --primary-2: #FF9668;
  --accent: #FFD166;
  --pink: #FF4D8D;
  --btn-depth: #B83A17;
  --glow: 0 0 24px rgba(255, 106, 61, .5);
  --grad-hero: radial-gradient(120% 80% at 0% 0%, #8A2B12 0%, transparent 60%), radial-gradient(90% 70% at 100% 10%, #7A1253 0%, transparent 55%), linear-gradient(180deg, #1A0B12, #1A0B12);
  --grad-primary: linear-gradient(135deg, #FF6A3D 0%, #FF2E7E 100%);
  --grad-accent: linear-gradient(135deg, #FFD166 0%, #FF6A3D 100%);
}

/* ---------- MINT ---------- */
[data-theme="mint"] {
  color-scheme: dark;
  --bg: #061714;
  --bg-2: #0B2420;
  --surface: rgba(200, 255, 240, .06);
  --surface-2: rgba(200, 255, 240, .11);
  --surface-solid: #0F2E29;
  --line: rgba(200, 255, 240, .12);
  --fg: #EDFFF9;
  --fg-2: rgba(237, 255, 249, .74);
  --fg-3: rgba(237, 255, 249, .46);
  --primary: #19D3A2;
  --primary-2: #5CEBC4;
  --primary-ink: #04201A;
  --accent: #B8FF5C;
  --btn-depth: #0B8A69;
  --glow: 0 0 24px rgba(25, 211, 162, .45);
  --grad-hero: radial-gradient(120% 80% at 0% 0%, #0E5E4D 0%, transparent 60%), radial-gradient(90% 70% at 100% 10%, #3B6B12 0%, transparent 55%), linear-gradient(180deg, #061714, #061714);
  --grad-primary: linear-gradient(135deg, #19D3A2 0%, #00A3FF 100%);
  --grad-accent: linear-gradient(135deg, #B8FF5C 0%, #19D3A2 100%);
}

/* ---------- GALAXY ---------- */
[data-theme="galaxy"] {
  color-scheme: dark;
  --bg: #05040F;
  --bg-2: #0D0A24;
  --surface: rgba(180, 170, 255, .07);
  --surface-2: rgba(180, 170, 255, .12);
  --surface-solid: #151036;
  --line: rgba(180, 170, 255, .14);
  --fg: #F2F0FF;
  --primary: #5B6CFF;
  --primary-2: #8C98FF;
  --accent: #FF7AF5;
  --btn-depth: #2F3BC2;
  --glow: 0 0 28px rgba(91, 108, 255, .6);
  --grad-hero: radial-gradient(120% 80% at 20% 0%, #1E2A8F 0%, transparent 60%), radial-gradient(90% 70% at 100% 20%, #6A1490 0%, transparent 55%), linear-gradient(180deg, #05040F, #05040F);
  --grad-primary: linear-gradient(135deg, #5B6CFF 0%, #FF7AF5 100%);
  --grad-accent: linear-gradient(135deg, #00E5FF 0%, #5B6CFF 100%);
}

/* ---------- PAPER (light) ---------- */
[data-theme="paper"] {
  color-scheme: light;
  --bg: #F6F3FF;
  --bg-2: #ECE6FF;
  --surface: rgba(40, 20, 120, .05);
  --surface-2: rgba(40, 20, 120, .09);
  --surface-solid: #FFFFFF;
  --line: rgba(40, 20, 120, .12);
  --fg: #1B1340;
  --fg-2: rgba(27, 19, 64, .72);
  --fg-3: rgba(27, 19, 64, .48);
  --primary: #6A45FF;
  --primary-2: #8A6BFF;
  --primary-ink: #FFFFFF;
  --accent: #00A8D6;
  --btn-depth: #3F22C2;
  --glow: 0 0 20px rgba(106, 69, 255, .25);
  --shadow-1: 0 6px 18px rgba(60, 30, 160, .12);
  --shadow-2: 0 18px 50px rgba(60, 30, 160, .18);
  --grad-hero: radial-gradient(120% 80% at 0% 0%, #E2D8FF 0%, transparent 60%), radial-gradient(90% 70% at 100% 10%, #FFD9EA 0%, transparent 55%), linear-gradient(180deg, #F6F3FF, #F6F3FF);
  --grad-primary: linear-gradient(135deg, #6A45FF 0%, #FF4D8D 100%);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; }
}