/*
  Design tokens — CitizenMap
  โครงสร้างเดียวกับ design system ของ kku_supply (tokens → components → shell)
  แต่ใช้สีแบรนด์ CitizenMap: Navy #1E3A8A (หลัก) / Orange #F97316 (เน้น)
  ปรับหน้าตาทั้งระบบ: แก้ไฟล์นี้ไฟล์เดียว
*/
:root {
  /* พื้นผิวและตัวอักษร */
  --bg: #F5F0E8;
  --surface: #FFFFFF;
  --surface-2: #F0EAE0;
  --border: #E6E0D5;
  --border-strong: #D6CFC2;
  --ink: #111827;
  --ink-soft: #374151;
  --muted: #6B7280;

  /* แบรนด์ */
  --primary: #1E3A8A;
  --primary-hover: #1B3578;
  --primary-active: #16285C;
  --primary-subtle: #EEF2FB;
  --primary-ink: #FFFFFF;
  --accent: #F97316;
  --accent-hover: #EA580C;
  --accent-subtle: #FFF7ED;
  --accent-text: #C2410C;

  /* เมนูด้านซ้าย */
  --sidebar-bg: #16285C;
  --sidebar-bg-active: #1E3A8A;
  --sidebar-border: rgba(255, 255, 255, 0.1);
  --sidebar-ink: #FFFFFF;
  --sidebar-ink-muted: #B9C6E4;

  /* สีความหมาย — ใช้บอกสถานะเท่านั้น ห้ามใช้ตกแต่ง และห้ามใช้สีแบรนด์แทน */
  --success: #16A34A;
  --success-subtle: #DCFCE7;
  --success-text: #166534;
  --warning: #F59E0B;
  --warning-subtle: #FEF3C7;
  --warning-text: #92400E;
  --danger: #DC2626;
  --danger-subtle: #FEE2E2;
  --danger-text: #991B1B;
  --info: #2563EB;
  --info-subtle: #DBEAFE;
  --info-text: #1E40AF;

  /* ตัวอักษร — --app-font-family มาจาก settings.APP_FONT_FAMILY ผ่าน theme_head.html */
  --font-sans: var(--app-font-family, 'Anuphan'), system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* มุมโค้ง เงา และจังหวะเวลา */
  --r-sm: 8px;
  --r-md: 9px;
  --r-lg: 11px;
  --r-xl: 14px;
  --shadow-card: 0 1px 2px rgba(17, 24, 39, 0.05);
  --shadow-btn: 0 1px 2px rgba(30, 58, 138, 0.25);
  --shadow-pop: 0 8px 24px rgba(17, 24, 39, 0.12);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 200ms;

  /* ขนาดโครงหน้า */
  --sidebar-w: 256px;
  --topbar-h: 56px;
}

.dark {
  --bg: #0F172A;
  --surface: #1E293B;
  --surface-2: #273449;
  --border: #334155;
  --border-strong: #475569;
  --ink: #F1F5F9;
  --ink-soft: #CBD5E1;
  --muted: #94A3B8;

  --primary: #3B5BB5;
  --primary-hover: #4A6AC4;
  --primary-active: #2F4C9E;
  --primary-subtle: rgba(59, 91, 181, 0.22);
  --accent-subtle: rgba(249, 115, 22, 0.16);
  --accent-text: #FDBA74;

  --sidebar-bg: #0C1838;
  --sidebar-bg-active: #1B3578;

  --success-subtle: rgba(22, 163, 74, 0.18);
  --success-text: #86EFAC;
  --warning-subtle: rgba(245, 158, 11, 0.18);
  --warning-text: #FCD34D;
  --danger-subtle: rgba(220, 38, 38, 0.18);
  --danger-text: #FCA5A5;
  --info-subtle: rgba(37, 99, 235, 0.2);
  --info-text: #93C5FD;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
  }
}