:root {

  /* Page */

  --color-bg:             #eef0f1;

  --color-surface:        #ffffff;

  --color-border:         #e5e7eb;

  --color-border-subtle:  #f3f4f6;



  /* Text */

  --color-text:           #1a1a1a;

  --color-text-secondary: #374151;

  --color-text-muted:     #6b7280;

  --color-text-faint:     #9ca3af;



  /* Table */

  --color-thead-bg:       #f9fafb;

  --color-row-hover:      #eef3ff;



  /* Accent — volunteer names, pagination active */

  --color-accent:         #243568;



  /* Nav */

  --color-nav-bg:         #243568;

  --color-nav-muted:      #c8ddf0;



  /* CTA — primary action button */

  --color-cta:          #216f83;



  /* Actions */

  --color-confirm-bg: #dcfce7;

  --color-confirm-text: #15803d;

  --color-reject-bg: rgb(252, 221, 221);

  --color-reject-text: rgb(165, 100, 100);

  --color-alert-bg: #fef9c3;

  --color-alert-text:  #92400e;

  

}



[data-theme="dark"] {

  --color-bg:             #0f172a;

  --color-surface:        #1e293b;

  --color-border:         #334155;

  --color-border-subtle:  #243044;

  --color-text:           #f1f5f9;

  --color-text-secondary: #cbd5e1;

  --color-text-muted:     #94a3b8;

  --color-text-faint:     #64748b;

  --color-thead-bg:       #162032;

  --color-row-hover:      rgba(59, 130, 246, 0.08);

  --color-accent:         #5780b3;

  --color-nav-bg:         #243568;

  --color-nav-muted:      #93c5fd;

  --color-cta:          #1d687a;

  --color-confirm-bg:   rgba(21, 128, 61, 0.2);

  --color-confirm-text: #86efac;

  --color-reject-bg:    rgba(185, 28, 28, 0.2);

  --color-reject-text:  #fca5a5;

  --color-alert-bg:     rgba(146, 64, 14, 0.25);

  --color-alert-text:   #fde68a;

}



body {

  background-color: var(--color-bg);

  color: var(--color-text);

  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  transition: background-color 0.2s, color 0.2s;

}