/* ==========================================================================
   CSS Custom Properties (Variables)
   Sarcoma Foundation Theme — styled after Unbound template
   ========================================================================== */

:root {
	/* Primary Colors — Unbound charity style */
	--color-primary: #F15B43;
	--color-primary-dark: #CB4B36;
	--color-primary-light: #fef0ee;

	/* Secondary — deep navy */
	--color-secondary: #364F75;
	--color-secondary-light: #4F6E9B;
	--color-secondary-dark: #283A57;

	/* Accent */
	--color-accent: #f59e0b;
	--color-accent-dark: #d97706;

	/* Success/Progress */
	--color-success: #4caf50;
	--color-success-light: #e8f5e9;

	/* Neutrals */
	--color-text: #383838;
	--color-text-light: #64748b;
	--color-text-muted: #94a3b8;
	--color-bg: #ffffff;
	--color-bg-alt: #f8fafc;
	--color-bg-dark: #1a1a2e;
	--color-border: #e2e8f0;

	/* Error */
	--color-error: #D9534F;

	/* Fonts — Montserrat (body) + Playfair Display (headings), like Unbound */
	--font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-heading: 'Playfair Display', Georgia, serif;

	/* Font sizes */
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 0.9375rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.875rem;
	--text-4xl: 2.25rem;
	--text-5xl: 3.125rem;

	/* Spacing */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;

	/* Container — Unbound uses 1170px */
	--container-max: 1170px;
	--container-padding: 1rem;

	/* Border radius — Unbound uses 25px pills for buttons */
	--radius-sm: 4px;
	--radius: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-full: 50%;
	--radius-pill: 25px;

	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
	--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);

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

	/* Z-index */
	--z-header: 100;
	--z-dropdown: 99;
	--z-overlay: 200;
	--z-modal: 300;

	/* Header */
	--header-height: 80px;
	--topbar-height: 40px;
}