/* =====================================================================
   Design Tokens — SDG Tracker UNISERV CMU
   แนวคิด: iOS-inspired, pastel green, soft, น่าเชื่อถือระดับสากล
   ผู้ใช้งานหลากหลายวัย (ผู้บริหาร–เจ้าหน้าที่คณะ) -> เน้นความชัดเจน + สบายตา
   ===================================================================== */
:root {
  /* --- Primary: เขียวพาสเทล อิงจิตวิญญาณของ SDGs (เติบโต/ยั่งยืน) --- */
  --sdg-primary-50:  #F3FBF6;
  --sdg-primary-100: #E3F5EA;
  --sdg-primary-200: #C3E9D2;
  --sdg-primary-300: #9BD9B4;
  --sdg-primary-400: #6FC492;
  --sdg-primary-500: #4CAA76;   /* หลัก — ปุ่ม/ไฮไลต์ */
  --sdg-primary-600: #3B8C60;
  --sdg-primary-700: #2E6E4B;

  /* --- Neutral: เทาอมเขียวอุ่น ไม่ดำสนิท ให้ความรู้สึก soft --- */
  --sdg-ink-900: #1E2A24;
  --sdg-ink-700: #3E4C44;
  --sdg-ink-500: #6B7A71;
  --sdg-ink-300: #A9B6AE;
  --sdg-ink-100: #E7EFEA;

  --sdg-surface:     #FFFFFF;
  --sdg-bg:          #F6FBF8;
  --sdg-border:      #E1F0E6;

  /* --- Accent รอง: ฟ้าพาสเทล (น้ำ/มหาสมุทร) ใช้เน้นข้อมูลรอง เช่น กราฟที่สอง --- */
  --sdg-accent-blue:   #A9DDE0;
  --sdg-accent-blue-dk:#5FAEB4;

  /* --- Semantic --- */
  --sdg-success: #4CAA76;
  --sdg-warning: #E8A83C;
  --sdg-error:   #D9634C;
  --sdg-info:    #5FAEB4;

  /* --- Shape & Elevation: โค้งมนแบบ iOS, เงานุ่มมาก ไม่ใช้เงาหนัก --- */
  --sdg-radius-sm:  12px;
  --sdg-radius-md:  18px;
  --sdg-radius-lg:  24px;
  --sdg-radius-full: 999px;

  --sdg-shadow-soft: 0 1px 2px rgba(30, 42, 36, 0.04), 0 8px 24px rgba(76, 170, 118, 0.10);
  --sdg-shadow-card: 0 1px 3px rgba(30, 42, 36, 0.05), 0 12px 32px rgba(76, 170, 118, 0.08);

  /* --- Typography: Noto Sans Thai คู่กับ Inter (อ่านง่ายทั้งไทย/อังกฤษ, ตัวเลขชัด) --- */
  --sdg-font-th: 'Noto Sans Thai', -apple-system, 'SF Pro Thai', sans-serif;
  --sdg-font-en: 'Inter', -apple-system, 'SF Pro Display', sans-serif;
}

body {
  font-family: var(--sdg-font-th);
  background: var(--sdg-bg);
  color: var(--sdg-ink-900);
  -webkit-font-smoothing: antialiased;
}

/* iOS-style focus ring — ชัดเจนสำหรับ keyboard navigation, ไม่ทำลายความ soft ของธีม */
.sdg-focusable:focus-visible {
  outline: 3px solid var(--sdg-primary-300);
  outline-offset: 2px;
}

.sdg-card {
  background: var(--sdg-surface);
  border: 1px solid var(--sdg-border);
  border-radius: var(--sdg-radius-lg);
  box-shadow: var(--sdg-shadow-card);
}

.sdg-btn-primary {
  background: var(--sdg-primary-500);
  color: #fff;
  border-radius: var(--sdg-radius-full);
  transition: background-color 160ms ease, transform 120ms ease;
}
.sdg-btn-primary:hover { background: var(--sdg-primary-600); }
.sdg-btn-primary:active { transform: scale(0.98); }

.sdg-input {
  background: var(--sdg-primary-50);
  border: 1.5px solid var(--sdg-border);
  border-radius: var(--sdg-radius-md);
  transition: border-color 140ms ease, background-color 140ms ease;
}
.sdg-input:focus {
  border-color: var(--sdg-primary-400);
  background: var(--sdg-surface);
  outline: none;
}