/* ============================================================
   theme.css — single source of truth: font + design tokens
   font ใช้ร่วมทั้ง 2 กลุ่ม | สี/พื้นหลังแยกตาม data-theme
   อนาคตจะรวมให้เหมือนกันหมด = ทำ token "admin" ให้เท่ากับ "dark"
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap');

:root {
  --font-sans: 'Noto Sans Thai', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ===== USER theme (ม่วง) ===== */
html[data-theme="dark"] {
  --bg-base: #0b0820;
  --text-base: #ffffff;
  --accent: #a855f7;
}

/* ===== ADMIN theme (slate) ===== */
html[data-theme="admin"] {
  --bg-base: #0f172a;
  --text-base: #f1f5f9;
  --accent: #6366f1;
}

/* ===== base body (ทั้งสองกลุ่ม) ===== */
body {
  font-family: var(--font-sans);
  color: var(--text-base);
  min-height: 100vh;
}

/* USER: พื้นม่วง gradient ซ้อน (ย้ายจาก titles.css) */
html[data-theme="dark"] body {
  background-color: var(--bg-base);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(168, 85, 247, 0.22), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 110%, rgba(99, 102, 241, 0.18), transparent 60%),
    linear-gradient(180deg, #0b0820 0%, #0a0a1f 50%, #0b0820 100%);
  background-attachment: fixed;
}

/* ADMIN: พื้น slate เรียบ */
html[data-theme="admin"] body {
  background-color: var(--bg-base);
}

/* ===== surface สีม่วง — เฉพาะกลุ่ม user (scoped) ===== */
html[data-theme="dark"] .match-card {
  background: linear-gradient(180deg, rgba(36, 26, 64, 0.85) 0%, rgba(22, 18, 44, 0.85) 100%) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html[data-theme="dark"] header.sticky,
html[data-theme="dark"] #app-bottom-nav {
  background-color: rgba(15, 11, 36, 0.85) !important;
  border-color: rgba(99, 102, 241, 0.18) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html[data-theme="dark"] #header-points > a,
html[data-theme="dark"] #header-points > div {
  background: linear-gradient(180deg, rgba(40, 28, 72, 0.9) 0%, rgba(22, 18, 44, 0.9) 100%) !important;
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .bg-purple-500,
html[data-theme="dark"] button.bg-purple-500 {
  box-shadow: 0 0 16px -4px rgba(168, 85, 247, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .status-badge.bg-\[\#a855f7\] {
  box-shadow: 0 0 12px -2px rgba(168, 85, 247, 0.6);
}