/* ═══════════════════════════════════════════════════════
   IWTMYL Shared Design Tokens
   Location: css/iwtmyl-tokens.css
   Loaded globally via header.php — available on every page.

   Single source of truth for brand colors, typography,
   spacing, and reusable component classes.
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Brand Greens ── */
  --iw-green-900: #0f2418;
  --iw-green-800: #1c3a2a;
  --iw-green-700: #2d6a4f;   /* Primary brand green */
  --iw-green-600: #40916c;
  --iw-green-500: #52b788;
  --iw-green-400: #74c69d;
  --iw-green-300: #95d5b2;
  --iw-green-200: #b7e4c7;
  --iw-green-100: #d8f3dc;
  --iw-green-50:  #f0faf3;

  /* ── Neutrals ── */
  --iw-warm-white: #fafaf7;
  --iw-warm-50:  #f5f5f0;
  --iw-warm-100: #e8e8e0;

  /* ── Text ── */
  --iw-text-primary:   #1a1a18;
  --iw-text-secondary: #4a4a42;
  --iw-text-muted:     #7a7a70;
  --iw-text-on-dark:       #e8e8e0;
  --iw-text-on-dark-muted: #b0b0a0;

  /* ── Semantic / UI ── */
  --iw-error:   #d32f2f;
  --iw-success: #2d6a4f;
  --iw-warning: #e65100;
  --iw-info:    #0277bd;

  /* ── Typography ── */
  --iw-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --iw-serif: 'Source Serif 4', Georgia, serif;

  /* ── Border Radius ── */
  --iw-radius-sm:  6px;
  --iw-radius-md: 10px;
  --iw-radius-lg: 16px;

  /* ── Shadows ── */
  --iw-shadow-sm:  0 1px 3px rgba(0, 0, 0, .08);
  --iw-shadow-md:  0 4px 12px rgba(0, 0, 0, .10);
  --iw-shadow-lg:  0 8px 32px rgba(0, 0, 0, .12);

  /* ── Form inputs ── */
  --iw-input-border:       #ccc;
  --iw-input-border-focus: var(--iw-green-500);
  --iw-input-bg:           #fff;
  --iw-input-radius:       var(--iw-radius-sm);
}


/* ═══════════════════════════════════════════════════════
   Shared Button Classes
   Use these across all pages for visual consistency.
   ═══════════════════════════════════════════════════════ */

.iw-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--iw-sans);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--iw-green-700);
  border: none;
  padding: 12px 24px;
  border-radius: var(--iw-radius-sm);
  text-decoration: none;
  cursor: pointer;
  line-height: 1.4;
  transition: background .15s ease;
}
.iw-btn-primary:hover,
.iw-btn-primary:focus {
  background: var(--iw-green-800);
  color: #fff;
  text-decoration: none;
}

.iw-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--iw-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--iw-green-800);
  background: transparent;
  border: 1.5px solid var(--iw-green-300);
  padding: 12px 24px;
  border-radius: var(--iw-radius-sm);
  text-decoration: none;
  cursor: pointer;
  line-height: 1.4;
  transition: background .15s ease, border-color .15s ease;
}
.iw-btn-secondary:hover,
.iw-btn-secondary:focus {
  background: var(--iw-green-50);
  border-color: var(--iw-green-500);
  color: var(--iw-green-800);
  text-decoration: none;
}


/* ═══════════════════════════════════════════════════════
   Global Legacy Button Overrides
   Maps existing .btn.green-btn / .approve-btn classes
   to the shared brand tokens so every page is consistent.
   ═══════════════════════════════════════════════════════ */

/* Primary action — replaces the old Bootstrap gradient green */
.btn.green-btn,
.btn.green-btn.slick-arrow {
  background: var(--iw-green-700);
  background-image: none;
  border-color: var(--iw-green-700);
  color: #fff;
  border-radius: var(--iw-radius-sm);
  font-family: var(--iw-sans);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 24px;
  transition: background .15s ease;
}
.btn.green-btn:hover,
.btn.green-btn:focus,
.btn.green-btn.slick-arrow:hover,
.btn.green-btn.slick-arrow:focus {
  background: var(--iw-green-800);
  background-image: none;
  border-color: var(--iw-green-800);
  color: #fff;
}

/* Secondary / light action */
.btn.approve-btn {
  background: var(--iw-green-50);
  color: var(--iw-green-700);
  border: 1.5px solid var(--iw-green-300);
  border-radius: var(--iw-radius-sm);
  font-family: var(--iw-sans);
  font-weight: 600;
  transition: background .15s ease, border-color .15s ease;
}
.btn.approve-btn:hover,
.btn.approve-btn:focus {
  background: var(--iw-green-100);
  border-color: var(--iw-green-500);
}

/* Cancel / neutral action */
.btn.btn-default,
.btn.btn-cancel-pic {
  background: transparent;
  color: var(--iw-text-secondary);
  border: 1.5px solid var(--iw-warm-100);
  border-radius: var(--iw-radius-sm);
  font-family: var(--iw-sans);
  font-weight: 600;
  padding: 12px 24px;
  transition: background .15s ease, border-color .15s ease;
}
.btn.btn-default:hover,
.btn.btn-default:focus,
.btn.btn-cancel-pic:hover,
.btn.btn-cancel-pic:focus {
  background: var(--iw-warm-50);
  border-color: var(--iw-warm-100);
  color: var(--iw-text-primary);
}

/* Bare .btn (no modifier) — subtle branded baseline */
.volunteer-dashboard-section .btn:not(.green-btn):not(.btn-default):not(.btn-cancel-pic):not(.ViewMoreBtn),
.auth-section .btn:not(.green-btn):not(.approve-btn):not(.btn-default) {
  font-family: var(--iw-sans);
  border-radius: var(--iw-radius-sm);
  font-weight: 600;
}


/* ═══════════════════════════════════════════════════════
   Form Input Overrides (global)
   ═══════════════════════════════════════════════════════ */

.auth-section .form-control:focus {
  border-color: var(--iw-input-border-focus);
  box-shadow: 0 0 0 2px rgba(45, 106, 79, .15);
}

.auth-section .help-block {
  color: var(--iw-error);
}