/* ระบบดีไซน์: สีทั้งหมดของธีมสว่าง/มืด ฟอนต์ มุมโค้ง ระยะห่าง (แก้สี/ฟอนต์ทั้งเว็บที่ไฟล์นี้)
   (แยกออกจาก index.html ต.ค. 2026 — ลำดับไฟล์มีผล: theme → base → pages → mobile) */
/* ---------- ระบบดีไซน์ An Investor (แนว "Friendly" — เจ้าของเลือก ต.ค. 2026) ----------
   สี: ม่วงเป็นสีหลัก เขียว = ขึ้น แดง = ลง (มีลูกศร ▲▼ ประกอบเสมอ) ทุกสีของตัวอักษรผ่าน WCAG AA (≥ 4.5:1 บนการ์ด)
   มืด = ค่าเริ่มต้น, สว่าง = data-theme="light" หรือเครื่องตั้งโหมดสว่างไว้ · กราฟอ่านสีผ่าน TC ใน JS — ค่าต้องเป็น hex 6 หลัก
   ฟอนต์: Inter (อังกฤษ/ตัวเลข ตัวเลขกว้างเท่ากัน) + Anuphan (ไทย) · มุมโค้ง: 12 / 20 · ระยะห่าง: ทีละ 4px (--sp-*) ---------- */
:root {
  --bg: #100F1C;
  --bg-grad: linear-gradient(180deg, #1B1836 0, #100F1C 460px);
  --surface: #18172B;
  --surface-2: #141326;
  --surface-hover: #211F38;
  --border: #29273F;
  --border-strong: #3B3858;
  --text-primary: #EEEDFB;
  --text-secondary: #AEABCB;
  --text-dim: #8B88AB;
  --accent-teal: #8E82F7;      /* สีหลักของแบรนด์ (ม่วง) — ชื่อตัวแปรเดิมจากธีมเก่า ใช้อยู่ทั้งเว็บจึงไม่เปลี่ยนชื่อ */
  --accent-soft: #29254F;
  --hero-a: #4C3DC9;
  --hero-b: #6253E0;
  --accent-amber: #E8B65A;
  --accent-blue: #7FA8EA;
  --positive: #3DD68C;
  --negative: #FF6B72;
  --on-accent: #15122E;
  --chart-grid: #23213A;
  --map-region: #23213A;
  --map-bg: #131224;
  --heat-mid: #34324F;
  --heat-pos: #2E9A66;
  --heat-neg: #B5403F;
  --shadow: #000000;
  --ring: #EEEDFB;
  --card-shadow: 0 1px 2px color-mix(in srgb, var(--shadow) 30%, transparent);
  --card-shadow-hover: 0 14px 34px color-mix(in srgb, var(--shadow) 45%, transparent);
  color-scheme: dark;
  --font-sans: 'Inter', 'Anuphan', system-ui, -apple-system, sans-serif;
  --font-mono: 'Inter', 'Anuphan', system-ui, -apple-system, sans-serif;   /* ตัวเลข: Inter + tabular-nums (เดิมเป็นฟอนต์โมโน) */
  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
:root[data-theme="light"] {
  --bg: #F5F5FB;
  --bg-grad: linear-gradient(180deg, #ECEAFF 0, #F5F5FB 460px);
  --surface: #FFFFFF;
  --surface-2: #F3F2FB;
  --surface-hover: #F0EEFC;
  --border: #E9E7F4;
  --border-strong: #D6D3EA;
  --text-primary: #1E1B3A;
  --text-secondary: #57537A;
  --text-dim: #6F6B90;
  --accent-teal: #5B4BDB;
  --accent-soft: #ECEAFE;
  --hero-a: #5243D4;
  --hero-b: #6A5BE6;
  --accent-amber: #9A5F08;
  --accent-blue: #3B6FB6;
  --positive: #097A51;
  --negative: #C9303A;
  --on-accent: #FFFFFF;
  --chart-grid: #EEEDF6;
  --map-region: #E3E1F0;
  --map-bg: #F8F7FD;
  --heat-mid: #9A97B3;
  --heat-pos: #16A34A;
  --heat-neg: #DC2626;
  --shadow: #2A2560;
  --ring: #FFFFFF;
  --card-shadow: 0 1px 2px rgba(42,37,96,0.04), 0 4px 14px rgba(42,37,96,0.05);
  --card-shadow-hover: 0 14px 34px rgba(42,37,96,0.12);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
  --bg: #F5F5FB;
  --bg-grad: linear-gradient(180deg, #ECEAFF 0, #F5F5FB 460px);
  --surface: #FFFFFF;
  --surface-2: #F3F2FB;
  --surface-hover: #F0EEFC;
  --border: #E9E7F4;
  --border-strong: #D6D3EA;
  --text-primary: #1E1B3A;
  --text-secondary: #57537A;
  --text-dim: #6F6B90;
  --accent-teal: #5B4BDB;
  --accent-soft: #ECEAFE;
  --hero-a: #5243D4;
  --hero-b: #6A5BE6;
  --accent-amber: #9A5F08;
  --accent-blue: #3B6FB6;
  --positive: #097A51;
  --negative: #C9303A;
  --on-accent: #FFFFFF;
  --chart-grid: #EEEDF6;
  --map-region: #E3E1F0;
  --map-bg: #F8F7FD;
  --heat-mid: #9A97B3;
  --heat-pos: #16A34A;
  --heat-neg: #DC2626;
  --shadow: #2A2560;
  --ring: #FFFFFF;
  --card-shadow: 0 1px 2px rgba(42,37,96,0.04), 0 4px 14px rgba(42,37,96,0.05);
  --card-shadow-hover: 0 14px 34px rgba(42,37,96,0.12);
  color-scheme: light;
  }
}