/* ============================================================
   variables.css — Design Tokens
   กองนโยบายและแผน มรภ.จอมบึง
   ============================================================ */

:root {
  /* Green Palette */
  --green-50:  #f0faf4;
  --green-100: #d0f0e0;
  --green-200: #9edbbd;
  --green-300: #5ec492;
  --green-400: #3aaa72;
  --green-500: #2d8a5c;
  --green-600: #1e6b43;

  /* Background */
  --bg-main:    #f4fbf7;
  --bg-card:    #ffffff;
  --bg-sidebar: #ffffff;
  --bg-navbar:  #ffffff;

  /* Text */
  --text-primary:   #1a3328;
  --text-secondary: #4a7060;
  --text-muted:     #8ab0a0;

  /* Border & Shadow */
  --border: #d8ede5;
  --shadow: 0 2px 16px rgba(45, 138, 92, 0.08);
  --shadow-md: 0 4px 24px rgba(45, 138, 92, 0.12);
  --shadow-lg: 0 8px 40px rgba(45, 138, 92, 0.16);

  /* Dimensions */
  --navbar-h:  64px;
  --sidebar-w: 260px;

  /* Radius */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Transition */
  --transition: 0.2s ease;
  --transition-slow: 0.35s ease;

  /* Badge Colors */
  --badge-urgent-bg:    #ffdede;
  --badge-urgent-text:  #c93a3a;
  --badge-new-bg:       #d0f0e8;
  --badge-new-text:     #1e7a60;
  --badge-important-bg: #fdf3c0;
  --badge-important-text: #a07a10;
  --badge-plan-bg:      #d4e3f7;
  --badge-plan-text:    #2d6eaa;
  --badge-activity-bg:  #d0f0e8;
  --badge-activity-text: #2a9d8f;

  /* Stat Card accent */
  --accent-green:  #2d8a5c;
  --accent-blue:   #2d6eaa;
  --accent-mint:   #2a9d8f;
  --accent-yellow: #a07a10;

  /* Banner Gradients */
  --grad-green-dark: linear-gradient(135deg, #1e6b43, #2d8a5c, #3aaa72);
  --grad-gold:       linear-gradient(135deg, #6b4a1e, #a0722a, #c49040);
  --grad-teal:       linear-gradient(135deg, #1a4a44, #206b62, #2d8c80);
  --grad-red-soft:   linear-gradient(135deg, #7c1e1e, #a83232, #c84848);
  --grad-blue:       linear-gradient(135deg, #1e3d6e, #2d6eaa, #4d8fcf);
}

/* ---- DARK MODE ---- */
[data-theme="dark"] {
  --bg-main:    #0f1f18;
  --bg-card:    #1a2e22;
  --bg-sidebar: #152a1d;
  --bg-navbar:  #152a1d;
  --text-primary:   #e0f5ea;
  --text-secondary: #8ec9a8;
  --text-muted:     #4a7060;
  --border: #2a4a38;
  --shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.4);
  --badge-urgent-bg:    #4a1a1a;
  --badge-urgent-text:  #ff8080;
  --badge-new-bg:       #1a3a2a;
  --badge-new-text:     #5ec492;
  --badge-important-bg: #3a2e0a;
  --badge-important-text: #f0c840;
  --badge-plan-bg:      #1a2a3a;
  --badge-plan-text:    #70a8e0;
  --badge-activity-bg:  #1a3a34;
  --badge-activity-text: #4ecdc0;
}

/* ---- GLOBAL RESET ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Sarabun', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  background: var(--bg-main);
  color: var(--text-primary);
  transition: background var(--transition-slow), color var(--transition-slow);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--green-500);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--green-600); }

img { max-width: 100%; display: block; }

ul, ol { list-style: none; }

button { cursor: pointer; font-family: inherit; }

input, select, textarea { font-family: inherit; }

/* ============================================================
   MOURNING MODE — โหมดไว้อาลัย (ขาวดำทั้งเว็บ)
   ลบ block นี้ออกเมื่อพ้นช่วงไว้อาลัย เพื่อกลับสู่สีปกติ
   ============================================================ */
html {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}