/* FundThrive CSS Variables - Design System */
:root {
	/* Primary Colors - Proper Scale */
	--primary-50: #e6f2fa;
	--primary-100: #b3daf2;
	--primary-200: #80c2e9;
	--primary-300: #4daae1;
	--primary-400: #2698d8;
	--primary-500: #0973b9;
	/* Base primary color */
	--primary-600: #075d94;
	--primary-700: #05476f;
	--primary-800: #04314a;
	--primary-900: #021b25;

	/* Primary Color Aliases (for backward compatibility) */
	--primary-color: var(--primary-500);
	--primary-color-dark: var(--primary-700);
	--primary-color-light: var(--primary-300);
	--primary-light: #93c5fd;
	--secondary-color: #2c5aa0;
	--accent-color: #e96c22;

	/* Compatibility aliases used across components */
	--on-primary: #ffffff; /* Text color on primary backgrounds */
	--primary-dark: var(--primary-color-dark);
	--border-radius-md: var(--radius-md);
	--border-radius-lg: var(--radius-lg);
	--transition-duration-fast: var(--transition-fast);
	--transition-duration-base: var(--transition-normal);

	/* Primary RGB values for rgba() usage */
	--primary-rgb: 9, 115, 185;
	/* RGB for #0973b9 */
	--gradient-primary-rgb: 24, 92, 146;
	/* RGB for #185c92 */

	/* Status Colors */
	--success-color: #26b050;
	--danger-color: #dc3545;
	--warning-color: #ffc107;
	--info-color: #2196f3;

	/* Status Background Colors */
	--success-bg: #d4edda;
	--success-bg-subtle: #d1f4e0;
	--success-border: #c3e6cb;
	--success-subtle: rgba(38, 176, 80, 0.12);
	--warning-bg: #fff3cd;
	--warning-border: #ffeaa7;
	--warning-text: #856404;
	--warning-subtle: rgba(255, 193, 7, 0.15);
	--error-bg: #f8d7da;
	--error-bg-subtle: #ffe6e6;
	--error-color: var(--danger-color);
	--error-border: #f5c6cb;
	--secondary-subtle: rgba(108, 117, 125, 0.15);
	--info-subtle: rgba(13, 202, 240, 0.15);

	/* Extended Color Palette */
	--purple-500: #6f42c1;
	--purple-600: #5b21b6;
	--purple-700: #7c3aed;
	--blue-500: #007bff;
	--blue-600: #1e6fb8;
	--blue-700: #1e3a8a;
	--blue-800: #1d4ed8;
	--blue-900: #1e40af;
	--indigo-600: #2563eb;
	--indigo-700: #1d4ed8;
	--slate-700: #334155;
	--slate-800: #1e293b;
	--slate-900: #0f172a;
	--green-600: #065f46;
	--green-50: #ecfdf5;
	--green-100: #d1fae5;

	/* Metric Card Colors */
	--metric-purple: #8b5cf6;
	--metric-orange: #f59e0b;
	--metric-green: #10b981;
	--metric-blue: #3b82f6;
	--metric-red: #ef4444;
	--metric-teal: #06b6d4;
	--metric-purple-dark: #764ba2;

	/* Chart Colors - Mode of Contributions */
	--chart-ach-color: #3b82f6;
	--chart-card-color: #f59e0b;
	--chart-cash-color: #e96c22; /* cash uses accent color */
	--chart-check-color: #10b981;

	/* Metric RGB values for rgba() usage */
	--metric-red-rgb: 239, 68, 68;

	/* Activity Colors */
	--activity-orange-bg: #fef3c7;
	--activity-red-bg: #fee2e2;
	--activity-purple-bg: #ede9fe;

	/* Growth Badge Colors */
	--growth-positive-bg: #dcfce7;
	--growth-positive-text: #16a34a;
	--growth-negative-bg: #fef2f2;
	--growth-negative-text: #dc2626;
	--growth-neutral-bg: #f3f4f6;
	--growth-neutral-text: #6b7280;

	/* Neutral Colors */
	--white: #ffffff;
	--gray-50: #f8f9fa;
	--gray-100: #f1f3f4;
	--gray-200: #e9ecef;
	--gray-300: #e0e0e0;
	--gray-400: #c1c1c1;
	--gray-500: #a8a8a8;
	--gray-600: #6c757d;
	--gray-700: #495057;
	--gray-800: #343a40;
	--gray-900: #212529;
	--slate-700: #334155;
	--slate-800: #1e293b;
	--slate-900: #0f172a;

	/* Background Colors */
	--bg-primary: #e9ecef;
	--bg-secondary: #f8f9fa;
	--bg-light: var(--gray-50);
	--bg-muted: var(--gray-50);
	--bg-card: #ffffff;
	--bg-sidebar: #ffffff;
	--bg-hover: #f8f9fa;
	--bg-active: #e3f2fd;
	--bg-highlight: #f8f9ff;
	--bg-tertiary: #f1f1f1;

	/* Overlay Colors */
	--overlay-light: rgba(255, 255, 255, 0.1);
	--overlay-dark: rgba(0, 0, 0, 0.5);
	--overlay-hover-light: rgba(255, 255, 255, 0.15);
	/* Outline / utility colors */
	--outline-light-border: rgba(255, 255, 255, 0.5);

	/* Text Colors */
	--text-primary: #212529;
	--text-secondary: #6c757d;
	--text-muted: #999999;
	--text-light: #ffffff;
	--text-link: #2c5aa0;
	--text-code: #c02d76;

	/* Gradients */
	--gradient-primary: #185c92;
	--gradient-card: #185c92;
	/* --gradient-primary: linear-gradient(135deg,
			var(--primary-600) 0%,
			var(--primary-400) 100%);
	--gradient-card: linear-gradient(135deg,
			var(--primary-600) 0%,
			var(--primary-400) 100%); */
	--gradient-primary-solid: #185c92;
	/* Fallback solid color */

	/* Spacing System (Based on 0.25rem = 4px) */
	--spacing-xxs: 0.125rem;
	/* 2px */
	--spacing-xs: 0.25rem;
	/* 4px */
	--spacing-sm: 0.5rem;
	/* 8px */
	--spacing-md: 1rem;
	/* 16px */
	--spacing-lg: 1.5rem;
	/* 24px */
	--spacing-xl: 2rem;
	/* 32px */
	--spacing-2xl: 3rem;
	/* 48px */
	--spacing-3xl: 4rem;
	/* 64px */

	/* Alert/close control sizing - used to reserve space for alert close buttons */
	--alert-close-width: 30px; /* default close button width including hit area */

	/* Additional small tokens used by Activities styles */
	--spacing-6: 0.375rem;
	/* 6px */
	--spacing-10: 0.625rem;
	/* 10px */
	--spacing-12: 0.75rem;
	/* 12px */
	--spacing-15: 0.9375rem;
	/* 15px */
	--spacing-20: 1.25rem;
	/* 20px */
	--spacing-30: 1.875rem;
	/* 30px */
	--spacing-32: 2rem;
	/* 32px */

	/* Receipt Layout Widths */
	--receipt-container-width: 21.875rem;
	/* 350px */
	--receipt-text-max-width: 12.5rem;
	/* 200px */
	--receipt-header-max-width: 31.25rem;
	/* 500px */
	--receipt-info-max-width: 23.75rem;
	/* 380px */

	/* Logo Dimensions */
	--logo-xs-width: 3.75rem;
	/* 60px */
	--logo-xs-height: 2.8125rem;
	/* 45px */
	--logo-sm-height: 5rem;
	/* 80px */
	--logo-md-height: 5.625rem;
	/* 90px */
	--logo-lg-height: 6.875rem;
	/* 110px */
	--logo-xl-width: 11.25rem;
	/* 180px */

	/* Button Dimensions */
	--btn-height-sm: 1.75rem;
	/* fixed pixel height used in some places when an exact pixel match is required */
	--btn-height-fixed: 35px;
	/* Standard input height for form controls (used by Syncfusion overrides) */
	--input-height: 40px;
	/* Standard form-control height used across the site (Bootstrap-like) */
	--form-control-height: 36px;
	/* 28px */
	--btn-min-width-xs: 4.375rem;
	/* 70px */
	--btn-min-width-sm: 5.625rem;
	/* 90px */
	--btn-min-width-md: 6.875rem;
	/* 110px */
	--btn-min-width-lg: 9.375rem;
	/* 150px */
	--btn-min-width-xl: 15.625rem;
	/* 250px */

	/* Font Sizes (Pixel-based for PDF rendering) */
	--font-size-9: 9px;
	--font-size-10: 10px;
	--font-size-11: 11px;
	--font-size-12: 12px;
	--font-size-13: 13px;
	--font-size-18: 18px;

	/* Border Radius */
	--radius-xs: 2px;
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 10px;
	--radius-xl: 15px;
	--radius-20: 20px;
	--radius-full: 50%;

	/* Small control sizes */
	--checkbox-size: 1em;
	/* 16px - default size for checkboxes and small square controls (use 1em to match base font-size) */

	/* Shadows */
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 2px 10px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 4px 15px rgba(0, 0, 0, 0.15);
	--shadow-hover: 0 4px 15px rgba(102, 126, 234, 0.3);
	--shadow-focus: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--secondary-color);

	/* Typography */
	--font-family-primary: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	--font-family-monospace: "Consolas", "Courier New", monospace;
	--font-size-xs: 0.75rem;
	/* 12px */
	--font-size-sm: 0.875rem;
	/* 14px */
	--font-size-base: 1rem;
	/* 16px */
	--font-size-lg: 1.125rem;
	/* 18px */
	--font-size-xl: 1.25rem;
	/* 20px */
	--font-size-2xl: 1.5rem;
	/* 24px */
	--font-size-3xl: 2.2rem; /* slightly larger to emphasize metric values */
	/* 35px */

	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	--line-height-tight: 1.25;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.75;

	/* Layout */
	--container-max-width: 1200px;
	--sidebar-width: 280px;
	--header-height: 70px;
	--card-header-height: 56px;

	/* Responsive Breakpoints */
	--breakpoint-xs: 480px;
	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;

	/* Transitions */
	--transition-fast: 0.15s ease;
	--transition-normal: 0.3s ease;
	--transition-slow: 0.5s ease;
	--transition-all: all 0.3s ease;

	/* Z-index Scale */
	--z-dropdown: 1000;
	--z-sticky: 1020;
	--z-fixed: 1030;
	--z-modal-backdrop: 1040;
	--z-modal: 1050;
	--z-popover: 1060;
	--z-tooltip: 1070;

	/* Additional semantic variables for modal and component styling */
	--input-border-variant: #d1d5db;
	/* used by floating inputs */
	--floating-label-color: #9ca3af;
	/* muted label color used by floating labels */
	--danger-dark: #a01e1e;
	/* deeper red used for destructive hover states */
	--text-black: #000000;
	/* explicit black text token */

	/* Column Widths */
	--payment-amount-column-width: 25rem;
	/* 400px */

	/* Textarea & floating label focused position tokens */
	--textarea-min-height: 7.5rem;
	/* 120px */
	--textarea-padding-vertical: 1.5rem;
	--textarea-padding-horizontal: 0.75rem;
	--textarea-padding-bottom: 0.5rem;
	--floating-label-top-focused: -0.5rem;
	--floating-label-left-focused: 0.5rem;
	--floating-label-font-size-focused: 0.75rem;

	/* Field Heights */
	--field-height-lg: 12.5rem;
	/* 200px */

	/* Modal overlay tokens */
	--modal-overlay-bg: rgba(0, 0, 0, 0.5);
	--modal-backdrop-blur: 2px;
	--modal-fade-duration: 0.3s;
	/* Additional modal & interaction tokens used by campaign modals */
	--modal-max-width: 56.25rem;
	/* 900px - default max width for modals */
	--z-modal-overlay: calc(var(--z-modal) + 10);
	--transition-quick: 0.2s;
	/* quick transition timing for small UI elements */
	--focus-outline-width: 0.25rem;
	/* width used for focus outline box-shadows */
	--btn-min-width: 100px;
	/* default minimum width for modal action buttons */
	--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

	/* Border Colors */
	--border-color: var(--gray-300);
	--border-light: #f0f0f0;
	--border-secondary: #c1c1c1;
	--border-primary: #a8a8a8;
	--border-hover: var(--gray-400);
	--border-disabled: var(--input-border-muted);
	--border-blue-light: #cfe4fb;

	/* Form Elements */
	--input-border-color: var(--gray-300);
	--input-border-color-focus: var(--primary-color);
	--input-border-color-hover: var(--gray-400);
	--input-bg: var(--white);
	--placeholder-color: #9ca3af;
	--blue-bg-light: #e8f1ff;
	--blue-bg-subtle: #e8f3ff;
	/* rgb helper tokens for rgba(...) usage via variables */
	--black-rgb: 0, 0, 0;
	--white-rgb: 255, 255, 255;
	/* tooltip specific shadow to replace inline rgba() in tooltip styles */
	--tooltip-shadow: 0 4px 20px rgba(var(--black-rgb), 0.15);
	/* additional semantic tokens used by campaign/create modal and tooltips */
	--input-border-muted: #b4b4b4;
	/* slightly darker muted input border */
	--tooltip-bg-dark: #000000;
	--tooltip-bg-light: rgba(255, 255, 255, 0.95);
	--overlay-bg-light: rgba(255, 255, 255, 0.4);
	--overlay-bg: rgba(255, 255, 255, 0.5);
	--overlay-white: rgba(255, 255, 255, 0.8);
	--tooltip-border: #ffffff;
	--input-padding: var(--spacing-sm) var(--spacing-md);

	/* Small spinner sizes */
	--spinner-sm: 1rem;

	/* Danger color RGB for use with rgba(var(--danger-rgb), alpha) */
	--danger-rgb: 220, 53, 69;

	/* Button Styles */
	--btn-padding: var(--spacing-sm) var(--spacing-lg);
	--btn-border-radius: var(--radius-md);
	--btn-font-weight: var(--font-weight-medium);

	/* Cards */
	--card-padding: var(--spacing-lg);
	--card-border-radius: var(--radius-lg);
	--card-shadow: var(--shadow-md);
	--card-border: none;

	/* Avatar Sizes */
	--avatar-sm: 2rem;
	/* 32px */
	--avatar-md: 2.5rem;
	/* 40px */
	--avatar-lg: 5rem;
	/* 80px */
	--avatar-xl: 3.75rem;
	/* 60px */

	/* Keep only tokens used by Attendees, Recent Donations, and Top Donors */
	--avatar-circle-sm: 2.75rem;
	/* 44px */
	--avatar-circle-md: 3rem;
	/* 48px */
	--radius-6: 0.375rem;
	/* 6px */
	--spacing-4xl: 6rem;
	--gap-10: 0.625rem;
	/* 10px */
	--badge-max-width: 10rem;
	/* 160px */
	--scrollbar-size: 0.5rem;
	/* 8px */
	--pill-border-radius: 999px;
	--badge-font-size: 0.75rem;
	/* 12px */

	/* Added tokens used by Volunteers component */
	--col-action-width: 6.25rem;
	/* 100px */
	--volunteer-min-height: 4.5rem;
	/* 72px */
	--badge-radius: 0.75rem;
	/* 12px */
	--badge-min-width: 4.5rem;
	/* 72px */
	--size-36: 2.25rem;
	/* 36px */
	/* Compatibility aliases still used in those sections */
	--bg-disabled: #e8f0f7;
	--text-disabled: var(--text-muted);
	--font-size-md: var(--font-size-base);
}

/* FundThrive compatibility aliases (components may reference --ft-* variables) */
:root {
	/* Color aliases */
	--ft-primary: var(--primary-500);
	--ft-primary-700: var(--primary-700);
	--ft-primary-400: var(--primary-400);
	--ft-accent: var(--secondary-color, #2b6cb0);
	--ft-emerald: var(--metric-green, #10b981);
	--ft-success: var(--success-color, #10b981);
	--ft-error: var(--danger-color, #dc2626);
	--ft-muted: var(--text-muted, #64748b);
	--ft-text: var(--text-primary, #0f172a);
	--ft-subtext: var(--text-secondary, #475569);
	--ft-card-bg: var(--bg-card, #ffffff);
	--ft-border: var(--border-color, #e2e8f0);
	--ft-input-border: var(--input-border-color, #d1d5db);

	/* Size aliases */
	--icon-large: 3rem;
	--icon-medium: 2rem;
	--icon-small: 1.25rem;
	--input-height: 2.25rem;
	--border-radius: var(--radius-sm, 0.375rem);
	--gap-sm: var(--spacing-sm, 0.5rem);
	--gap-md: var(--spacing-md, 0.75rem);
	--submit-height: 3rem;
	--submit-min-width: 16rem;
	--max-width: 70rem;
}

/* Dark Mode Support (Future Enhancement) - COMMENTED OUT */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-card: #363636;
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --text-muted: #888888;
  }
}
*/

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
	:root {
		--shadow-md: 0 2px 10px rgba(0, 0, 0, 0.3);
		--shadow-lg: 0 4px 15px rgba(0, 0, 0, 0.4);
	}
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
	:root {
		--transition-fast: none;
		--transition-normal: none;
		--transition-slow: none;
		--transition-all: none;
	}
}