/* GivSimple Design System - Enhanced for Accessibility */
/* Tokens: colors, spacing, radius, shadows, focus */
:root {
  /* Brand - Enhanced for better contrast */
  --brand-50: #E8F5E9;
  --brand-100: #C8E6C9;
  --brand-200: #A5D6A7;
  --brand-300: #81C784;
  --brand-400: #66BB6A;
  --brand-500: #4CAF50;
  --brand-600: #388E3C; /* Primary - improved contrast */
  --brand-700: #2E7D32;
  --brand-800: #1B5E20;
  --brand-900: #0D4F14;

  /* Neutrals - Enhanced contrast ratios */
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #eeeeee;
  --gray-300: #e0e0e0;
  --gray-400: #bdbdbd;
  --gray-500: #9e9e9e;
  --gray-600: #757575; /* Improved contrast for text */
  --gray-700: #424242; /* Better readability */
  --gray-800: #212121;
  --gray-900: #0a0a0a; /* Enhanced contrast */

  /* Status - Improved accessibility */
  --info-500: #2196F3;
  --info-600: #1976D2; /* Better contrast */
  --info-700: #1565C0;
  --warning-500: #FF9800;
  --warning-600: #F57C00; /* Improved contrast */
  --warning-700: #E65100;
  --danger-500: #F44336;
  --danger-600: #D32F2F; /* Better contrast */
  --danger-700: #C62828;
  --success-600: var(--brand-600);

  /* Spacing */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem;  /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem;    /* 16px */
  --space-5: 1.5rem;  /* 24px */
  --space-6: 2rem;    /* 32px */

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Shadows */
  --shadow-sm: 0 4px 10px rgba(0,0,0,0.06);
  --shadow-md: 0 10px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 18px 36px rgba(0,0,0,0.12);

  /* Focus */
  --focus-ring-color: rgba(46,125,50,0.55);
  --focus-ring: 3px solid var(--focus-ring-color);

  /* Bootstrap bridge */
  --bs-primary: var(--brand-600);
  --bs-primary-rgb: 56, 142, 60; /* #388E3C */
  --bs-success: var(--brand-600);
  --bs-success-rgb: 56, 142, 60;
  --bs-info: var(--brand-600);
  --bs-info-rgb: 56, 142, 60;
}

/* Override Bootstrap primary/info to brand green */
.bg-primary { background-color: var(--brand-600) !important; color: #fff !important; }
.bg-info { background-color: var(--brand-600) !important; color: #fff !important; }
.text-info { color: var(--brand-600) !important; }
.badge.bg-info { background-color: var(--brand-600) !important; }
.alert-info { background-color: var(--brand-100) !important; border-color: var(--brand-300) !important; color: var(--brand-800) !important; }

/* Base & Typography - Enhanced for Accessibility */
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: var(--gray-900); /* Better contrast */
  background: linear-gradient(180deg, var(--gray-50), #f8f9fa);
  font-size: 16px; /* Ensure minimum readable font size */
}

h1, h2, h3, h4, h5, h6 { 
  font-weight: 700; 
  line-height: 1.3; /* Improved readability */
  letter-spacing: 0.2px; 
  color: var(--gray-900); /* Ensure high contrast */
  margin-bottom: 0.75rem;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

small, .small { font-size: 0.875rem; color: var(--gray-700); }
.text-muted { color: var(--gray-600) !important; } /* Removed opacity for better contrast */

a { 
  color: var(--brand-600); 
  text-decoration: none; 
  transition: color 0.15s ease-in-out;
}
a:hover, a:focus { 
  color: var(--brand-800); 
  text-decoration: underline; 
}

/* Containers & Sections */
section { padding: var(--space-6) 0; }
@media (max-width: 768px) { section { padding: var(--space-5) 0; } }

/* Cards */
.card { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.card .card-header { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }

/* Navbar */
.navbar-brand { font-weight: 700; letter-spacing: 0.3px; }
.navbar.bg-primary { background: linear-gradient(90deg, var(--brand-800), var(--brand-600)); }

/* Buttons - Enhanced Accessibility */
.btn { 
  border-radius: 10px; 
  transition: background-color 180ms ease, box-shadow 180ms ease, transform 120ms ease;
  font-weight: 500;
  min-height: 44px; /* Touch target accessibility */
  padding: 0.5rem 1rem;
}
.btn:active { transform: translateY(1px); }
.btn-primary, .btn-success { 
  background-color: var(--brand-600); 
  border-color: var(--brand-600);
  color: white;
}
.btn-primary:hover, .btn-success:hover { 
  background-color: var(--brand-700); 
  border-color: var(--brand-700); 
}
.btn-outline-primary { 
  color: var(--brand-600); 
  border-color: var(--brand-600);
  border-width: 2px; /* Better visibility */
}
.btn-outline-primary:hover { 
  color: white; 
  background-color: var(--brand-600); 
  border-color: var(--brand-600); 
}
.btn-outline-success { 
  color: var(--brand-600); 
  border-color: var(--brand-600);
  border-width: 2px;
}
.btn-outline-success:hover { 
  background-color: var(--brand-600); 
  color: white; 
}

/* Alerts - Improved Contrast */
.alert { 
  border-radius: 0.5rem; 
  border-width: 2px;
  font-weight: 500;
}
.alert-success { 
  background-color: rgba(56,142,60,0.1); 
  border-color: var(--brand-600); 
  color: var(--brand-800); 
}
.alert-info { 
  background-color: rgba(25,118,210,0.1); 
  border-color: var(--info-600); 
  color: var(--info-700); 
}
.alert-warning { 
  background-color: rgba(245,124,0,0.1); 
  border-color: var(--warning-600); 
  color: var(--warning-700); 
}
.alert-danger { 
  background-color: rgba(211,47,47,0.1); 
  border-color: var(--danger-600); 
  color: var(--danger-700); 
}

/* Badges - Enhanced Accessibility */
.badge { 
  border-radius: 999px; 
  padding: 0.35rem 0.6rem; 
  font-weight: 600;
  font-size: 0.75rem;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}
.badge-soft-primary { 
  background-color: rgba(56,142,60,0.15); 
  color: var(--brand-800); 
  border: 1px solid rgba(56,142,60,0.3);
}
.badge-soft-success { 
  background-color: rgba(56,142,60,0.15); 
  color: var(--brand-800); 
  border: 1px solid rgba(56,142,60,0.3);
}
.badge-soft-info { 
  background-color: rgba(25,118,210,0.15); 
  color: var(--info-700); 
  border: 1px solid rgba(25,118,210,0.3);
}
.badge-soft-warning { 
  background-color: rgba(245,124,0,0.15); 
  color: var(--warning-700); 
  border: 1px solid rgba(245,124,0,0.3);
}
.badge-soft-danger { 
  background-color: rgba(211,47,47,0.15); 
  color: var(--danger-700); 
  border: 1px solid rgba(211,47,47,0.3);
}

/* Forms - Enhanced Accessibility */
.form-label { 
  font-weight: 600; 
  color: var(--gray-800); 
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}
body[data-theme="dark"] .form-label { color: #e2e8f0; }
.form-check-input:checked { 
  background-color: var(--brand-600); 
  border-color: var(--brand-600); 
}
.form-control {
  border: 2px solid var(--gray-300);
  border-radius: 8px;
  padding: 0.75rem;
  font-size: 1rem;
  min-height: 44px; /* Touch target accessibility */
}
.form-control:focus { 
  border-color: var(--brand-600); 
  box-shadow: 0 0 0 0.25rem rgba(56, 142, 60, 0.25); 
  outline: none;
}

/* Tables */
.table thead th { font-weight: 600; }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0,0,0,.015); }

/* Focus visibility - Enhanced Accessibility */
.btn:focus-visible, 
.form-control:focus-visible, 
a:focus-visible, 
.nav-link:focus-visible,
.card:focus-visible {
  outline: 3px solid var(--brand-600);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--brand-600);
}

/* Motion accessibility */
body[data-motion="reduced"] * { 
  transition: none !important; 
  animation: none !important; 
  scroll-behavior: auto !important;
}

/* Dark theme - Enhanced Contrast */
body[data-theme="dark"] { 
  background: var(--gray-900); 
  color: #f1f5f9; 
}
body[data-theme="dark"] .card { 
  background-color: #1e293b; 
  color: #f1f5f9; 
  box-shadow: 0 10px 20px rgba(0,0,0,0.4);
  border: 1px solid #334155;
}
body[data-theme="dark"] .navbar.bg-primary { 
  background: linear-gradient(90deg, var(--brand-800), var(--brand-600)); 
}
body[data-theme="dark"] .footer { 
  background-color: #1e293b; 
  border-top: 1px solid #334155;
}
body[data-theme="dark"] .text-muted { 
  color: #cbd5e1 !important; 
}
body[data-theme="dark"] .form-control {
  background-color: #334155;
  border-color: #475569;
  color: #f1f5f9;
}
body[data-theme="dark"] .form-control:focus {
  border-color: var(--brand-500);
  background-color: #334155;
}
body[data-theme="dark"] .btn-outline-primary {
  color: var(--brand-400);
  border-color: var(--brand-400);
}
body[data-theme="dark"] .btn-outline-primary:hover {
  background-color: var(--brand-600);
  border-color: var(--brand-600);
  color: white;
}

/* Visual Hierarchy - Consistent Spacing and Typography */
.section-header {
  margin-bottom: 2rem;
  text-align: center;
}

.section-header h1,
.section-header h2 {
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.section-header p {
  font-size: 1.125rem;
  color: var(--gray-600);
  max-width: 600px;
  margin: 0 auto;
}

/* Card Hierarchy */
.card-header {
  background-color: var(--brand-600);
  color: white;
  border-bottom: none;
  font-weight: 600;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
  color: white;
  margin-bottom: 0;
}

.card-body {
  padding: 1.5rem;
}

.card-body > *:first-child {
  margin-top: 0;
}

.card-body > *:last-child {
  margin-bottom: 0;
}

/* Profile Page Enhancements */
.profile-page .card {
  margin-bottom: 1.5rem;
}

.profile-page h2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gray-900);
}

.profile-page .text-muted {
  font-size: 1rem;
  margin-bottom: 0;
}

/* Button Hierarchy */
.btn-group .btn {
  margin-right: 0.5rem;
}

.btn-group .btn:last-child {
  margin-right: 0;
}

/* Form Hierarchy */
.form-section {
  margin-bottom: 2rem;
}

.form-section:last-child {
  margin-bottom: 0;
}

.form-section h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--gray-800);
  border-bottom: 2px solid var(--gray-200);
  padding-bottom: 0.5rem;
}

/* Alert Hierarchy */
.alert {
  margin-bottom: 1.5rem;
}

.alert:last-child {
  margin-bottom: 0;
}

.alert .alert-heading {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Navigation Hierarchy */
.navbar-brand {
  font-size: 1.5rem;
  font-weight: 700;
}

.nav-link {
  font-weight: 500;
  transition: color 0.15s ease-in-out;
}

/* Table Hierarchy */
.table th {
  font-weight: 600;
  color: var(--gray-800);
  border-bottom: 2px solid var(--gray-300);
  padding: 1rem 0.75rem;
}

.table td {
  padding: 0.75rem;
  vertical-align: middle;
}

/* Utilities */
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-md > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }
.elevate-sm { box-shadow: var(--shadow-sm); }
.elevate-md { box-shadow: var(--shadow-md); }
.elevate-lg { box-shadow: var(--shadow-lg); }

/* Spacing Utilities */
.mb-section { margin-bottom: 3rem; }
.mt-section { margin-top: 3rem; }
.py-section { padding: 3rem 0; }

/* Text Hierarchy Utilities */
.text-lead { 
  font-size: 1.25rem; 
  font-weight: 400; 
  line-height: 1.6; 
  color: var(--gray-700);
}

.text-small { 
  font-size: 0.875rem; 
  color: var(--gray-600); 
}

.text-xs { 
  font-size: 0.75rem; 
  color: var(--gray-500); 
}

/* Footer */
.footer { 
  padding: var(--space-5) 0; 
  border-top: 2px solid var(--gray-200); 
  margin-top: 3rem;
}
.footer a { color: var(--brand-600); }
.footer a:hover { color: var(--brand-800); }