/**
 * gameEdu — Design tokens (font + màu + glass) đồng bộ với trang chủ.
 * Nạp file này trước các CSS khác: public-shell, admin, auth, mesh.
 */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

:root {
  --ge-font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ge-font-display: "Outfit", var(--ge-font-sans);

  --ge-ink: #0f172a;
  --ge-ink-soft: #312e81;
  --ge-muted: #64748b;
  --ge-muted-2: #94a3b8;

  --ge-cyan: #06b6d4;
  --ge-indigo: #6366f1;
  --ge-violet: #a855f7;
  --ge-pink: #e879f9;
  --ge-blue: #2563eb;
  --ge-amber: #d97706;

  --ge-page-bg: linear-gradient(180deg, #f8fafc 0%, #eef2ff 52%, #f5f3ff 100%);
  --ge-mesh-hero: linear-gradient(175deg, #ffffff 0%, #f0f9ff 32%, #f5f3ff 68%, #ecfeff 100%);

  --ge-line: rgba(148, 163, 184, 0.38);
  --ge-glass-weak: rgba(255, 255, 255, 0.52);
  --ge-glass: rgba(255, 255, 255, 0.72);
  --ge-glass-strong: rgba(255, 255, 255, 0.9);

  --ge-shadow-soft: 0 2px 8px rgba(15, 23, 42, 0.05), 0 12px 40px rgba(99, 102, 241, 0.08);
  --ge-shadow-card: 0 4px 20px rgba(15, 23, 42, 0.06), 0 16px 48px rgba(99, 102, 241, 0.1);

  --ge-gradient-accent: linear-gradient(120deg, var(--ge-cyan) 0%, var(--ge-indigo) 48%, var(--ge-violet) 88%, var(--ge-pink) 100%);
  --ge-gradient-main: linear-gradient(168deg, #c7d2fe 0%, #a5b4fc 38%, #818cf8 72%, #6366f1 100%);
  --ge-gradient-footer-line: linear-gradient(90deg, #06b6d4, #6366f1, #a855f7, #ec4899);

  /**
   * Đệm đáy khi chiếu TV / máy có overscan hoặc thanh home — dùng kèm env(safe-area-inset-bottom).
   * Tránh chân trang / nút bị cắt sát mép dưới màn hình.
   */
  --ge-tv-safe-bottom: clamp(14px, 4vmin, 52px);
}

html {
  font-family: var(--ge-font-sans);
  /* Cỡ gốc lớn hơn mặc định 16px — mọi rem trong app (Admin, vỏ công khai) đều đọc rõ hơn */
  font-size: 118.75%;
  /* Dòng chữ chặt — giảm chiều cao trang */
  line-height: 1.3;
}