/* HVSC Game — design tokens. Theme = html[data-theme]. Không dùng xanh dương cho nút. */
@font-face { font-family: "Be Vietnam Pro"; src: url("../assets/fonts/BeVietnamPro-Medium.ttf") format("truetype"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("../assets/fonts/BeVietnamPro-Bold.ttf") format("truetype"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("../assets/fonts/BeVietnamPro-ExtraBold.ttf") format("truetype"); font-weight: 800 900; font-display: swap; }

:root, [data-theme="cam"] {
  --c-primary: #ff6b2c; --c-primary-2: #ff9a3d; --c-primary-ink: #ffffff; --c-primary-soft: #ffe6d8;
  --c-accent: #7c3aed; --c-accent-soft: #efe6ff;
  --c-bg: #fff7ef; --c-bg-2: #ffeedd; --c-surface: #ffffff; --c-surface-2: #fff3e8;
  --c-ink: #22163a; --c-muted: #6f6488; --c-line: #f0dccb;
  --c-ok: #16a34a; --c-ok-soft: #dcfce7; --c-bad: #e11d48; --c-bad-soft: #ffe4e8; --c-warn: #f59e0b;
  --opt-1: #ff6b2c; --opt-2: #8b5cf6; --opt-3: #f43f8e; --opt-4: #0fa89b;
  --shadow-press: 0 4px 0 rgba(34, 22, 58, .18);
  --shadow-card: 0 1px 2px rgba(34, 22, 58, .06), 0 8px 24px -10px rgba(34, 22, 58, .18);
  --stage-bg: radial-gradient(1200px 600px at 10% -10%, #ffd9bf 0, transparent 60%), radial-gradient(900px 600px at 110% 110%, #e9dcff 0, transparent 60%), var(--c-bg);
}
[data-theme="tim"] {
  --c-primary: #7c3aed; --c-primary-2: #a855f7; --c-primary-ink: #fff; --c-primary-soft: #efe6ff;
  --c-accent: #ff6b9a; --c-accent-soft: #ffe4ee;
  --c-bg: #f7f3ff; --c-bg-2: #ece4ff; --c-surface: #fff; --c-surface-2: #f3edff; --c-line: #e3d8fb;
  --stage-bg: radial-gradient(1200px 600px at 0% 0%, #e2d4ff 0, transparent 60%), radial-gradient(900px 600px at 100% 100%, #ffd6e6 0, transparent 60%), var(--c-bg);
}
[data-theme="hong"] {
  --c-primary: #f43f8e; --c-primary-2: #ff7ab3; --c-primary-ink: #fff; --c-primary-soft: #ffe1ee;
  --c-accent: #ff9f1c; --c-accent-soft: #fff0d6;
  --c-bg: #fff3f8; --c-bg-2: #ffe4ef; --c-surface: #fff; --c-surface-2: #fff0f6; --c-line: #f8d5e4;
  --stage-bg: radial-gradient(1200px 600px at 0% 0%, #ffd1e5 0, transparent 60%), radial-gradient(900px 600px at 100% 100%, #ffe7c2 0, transparent 60%), var(--c-bg);
}
[data-theme="ngoc"] {
  --c-primary: #0d9488; --c-primary-2: #14b8a6; --c-primary-ink: #fff; --c-primary-soft: #d5f5f0;
  --c-accent: #ff6b2c; --c-accent-soft: #ffe6d8;
  --c-bg: #f0faf8; --c-bg-2: #ddf3ef; --c-surface: #fff; --c-surface-2: #eaf8f5; --c-line: #cdeae4;
  --stage-bg: radial-gradient(1200px 600px at 0% 0%, #c6f1e9 0, transparent 60%), radial-gradient(900px 600px at 100% 100%, #ffe0cc 0, transparent 60%), var(--c-bg);
}
[data-theme="dem"] {
  --c-primary: #ff8a3d; --c-primary-2: #ffb15c; --c-primary-ink: #1b1230; --c-primary-soft: #3a2a4a;
  --c-accent: #c084fc; --c-accent-soft: #33264f;
  --c-bg: #15102a; --c-bg-2: #1d1638; --c-surface: #221a40; --c-surface-2: #2a2150;
  --c-ink: #f5efff; --c-muted: #b4a8d6; --c-line: #3a2f63;
  --c-ok-soft: #12351f; --c-bad-soft: #3e1424;
  --shadow-press: 0 4px 0 rgba(0, 0, 0, .45);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -12px rgba(0, 0, 0, .6);
  --stage-bg: radial-gradient(1200px 600px at 0% 0%, #3b2370 0, transparent 60%), radial-gradient(900px 600px at 100% 100%, #4a1f3c 0, transparent 60%), var(--c-bg);
  color-scheme: dark;
}

:root {
  --font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-xl: 32px;
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem;
  --tap: 48px;
  --page-pad: clamp(16px, 2.4vw, 56px);
  --header-h: 64px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}
html { font-size: 16px; }
@media (min-width: 1280px) { html { font-size: 17px; } :root { --header-h: 72px; --tap: 52px; } }
@media (min-width: 1700px) { html { font-size: 19px; } :root { --header-h: 80px; --tap: 56px; } }