/* ============================================================
   DGA Design System — Design Tokens (เริ่มต้นสำหรับข้อเสนอ)
   ที่มา: scrape จาก dga.or.th (2026-06-17) + ปรับให้ผ่าน WCAG AA
   ใช้กับเว็บไซต์ใหม่ตาม TOR DGA-69-0177
   ============================================================ */

:root {
  /* ---------- Brand Colors ---------- */
  --dga-navy:         #1C164B;  /* สีหลัก (โครงสร้าง) */
  --dga-orange:       #F05123;  /* สีส้มหลัก DGA (accent) */
  --dga-blue:         #1073B8;  /* สีน้ำเงิน (รอง) */
  --dga-orange-light: #FF9933;  /* สีส้มอ่อน */
  --dga-blue-light:   #E6F1F8;  /* พื้นหลังอ่อน */

  /* ---------- Text ---------- */
  --color-text:        #1E154C;
  --color-text-body:   #333333;
  --color-text-muted:  #555555;
  --color-text-faint:  #767676; /* ปรับจาก #999 ให้ผ่าน 4.5:1 */

  /* ---------- Surface / Border ---------- */
  --color-bg:          #FFFFFF;
  --color-bg-alt:      #FAFAFA;
  --color-bg-soft:     #F5F5F5;
  --color-border:      #E5E7EB;
  --color-border-soft: #EEEEEE;
  --color-footer-bg:   var(--dga-navy);

  /* ---------- State ---------- */
  --color-success: #2E7D32;
  --color-warning: #B26A00;
  --color-error:   #B82228;
  --color-link:    #1073B8;
  --color-line:    #38B900; /* Line chat */

  /* ---------- Typography ---------- */
  --font-primary: 'Prompt', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Roboto Mono', monospace;

  --fs-display: clamp(2rem, 1.4rem + 2vw, 3rem);
  --fs-h1: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-body: 1rem;      /* 16px */
  --fs-small: 0.875rem; /* 14px */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.25;
  --lh-base: 1.6;

  /* ---------- Spacing (8pt) ---------- */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --gutter: 1rem;

  /* ---------- Radius ---------- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.18);

  /* ---------- Motion ---------- */
  --transition: 0.2s ease;
}

/* ---------- Breakpoints (อ้างอิง) ----------
   mobile  : < 640px
   tablet  : 640–1024px
   desktop : > 1024px
*/

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}