/* Design tokens — จากไฟล์ออกแบบ (PROMPT.md §4) */
:root {
  /* สีหลัก */
  --navy: #0F2A5F;
  --navy-hover: #1A3A78;
  --navy-line: #23417A;
  --primary: #1B4FBF;
  --primary-soft: #E8F0FD;
  --green: #12805C;
  --green-dark: #0E5A40;
  --green-soft: #E3F4EC;
  --note-bg: #F1F7F4;
  --hero-bg: #E8F1FC;
  --hero-line: #D9E5F5;
  --hero-art: #CFE0F5;
  --page-bg: #F5F7FB;
  --admin-bg: #F3F5F9;
  --surface: #FFFFFF;
  --surface-muted: #F1F5FB;
  --border: #E3E8F0;
  --border-soft: #EEF1F6;
  --border-input: #D5DCE8;
  --border-strong: #C6D4EA;
  --text: #1F2937;
  --text-strong: #111827;
  --text-body: #2B3545;
  --text-sub: #3D4757;
  --text-muted: #5B6577;      /* ผ่าน contrast 4.5:1 บนพื้นขาว */
  --on-navy: #DCE4F2;
  --on-navy-muted: #B8C6DF;
  --on-navy-label: #A9B9D6;
  --on-navy-link: #C9D5EA;
  --danger: #B3261E;
  --badge-new: #C62828;
  --pdf: #D93025;
  --dot-off: #B9C8E2;

  /* สีประจำเมนูสำคัญ (พื้น / ตัวอักษร) */
  --tile-blue-bg: #E8F0FD;   --tile-blue-fg: #1B4FBF;
  --tile-green-bg: #E3F4EC;  --tile-green-fg: #0E6B4C;
  --tile-purple-bg: #EEEAFB; --tile-purple-fg: #5B3CC4;
  --tile-orange-bg: #FDEFE2; --tile-orange-fg: #A04A00;
  --tile-teal-bg: #E0F3F3;   --tile-teal-fg: #0B6B6B;
  --tile-pink-bg: #FCE8EE;   --tile-pink-fg: #B0244F;
  --tile-slate-bg: #E7ECF3;  --tile-slate-fg: #3D5A8A;
  --tile-sky-bg: #DCE8FB;    --tile-sky-fg: #1B4FBF;
  --tile-mint-bg: #DDF1E7;   --tile-mint-fg: #12805C;

  /* สถานะเนื้อหา (พื้น / ตัวอักษร) — ต้องมีสัญลักษณ์ + ข้อความเสมอ */
  --st-published-bg: #E3F4EC; --st-published-fg: #0E5A40;
  --st-review-bg: #FFF4E0;    --st-review-fg: #8A4B00;
  --st-draft-bg: #EEF1F6;     --st-draft-fg: #3D4757;
  --st-scheduled-bg: #E8F0FD; --st-scheduled-fg: #1B4FBF;

  /* ฟอนต์ */
  --font-head: "Prompt", "IBM Plex Sans Thai", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* รูปทรง */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 10px;
  --radius-md: 12px;
  --radius-card: 14px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --shadow-pop: 0 12px 32px rgba(15, 42, 95, 0.14);
  --container: 1360px;
  --gutter: 24px;
  --control-h: 44px;
  --focus: 0 0 0 3px rgba(27, 79, 191, 0.45);
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
}