/**
 * DinnerlyHub - CSS Custom Properties
 * Single source of truth for brand colors, spacing, and typography.
 */

:root {
	/* Brand Colors */
	--dh-green: #4a7c59;
	--dh-green-dark: #376045;
	--dh-green-subtle: rgba(74, 124, 89, 0.08);
	--dh-green-border: rgba(74, 124, 89, 0.20);
	--dh-orange: #f26522;
	--dh-orange-dark: #d9540f;
	--dh-white: #ffffff;
	--dh-text: #2d2d2d;
	--dh-text-heading: #1a1a1a;
	--dh-text-paragraph: #444444;
	--dh-text-light: #555555;
	--dh-text-muted: #717171;

	/* Accessible grays (WCAG AA compliant 4.5:1+ on white) */
	--dh-gray-600: #555555;
	--dh-gray-500: #717171;
	--dh-gray-meta: #6b6b6b;

	/* Shadows - Optimized with pre-calculated values */
	--dh-shadow-sm: 0 2px 16px rgba(0, 0, 0, 0.08);
	--dh-shadow-md: 0 4px 24px rgba(0, 0, 0, 0.13);
	--dh-shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.10);
	--dh-shadow-card: 0 4px 18px rgba(74, 124, 89, 0.18);
	--dh-shadow-card-hover: 0 16px 40px rgba(0, 0, 0, 0.12);
	--dh-shadow-btn-green: 0 4px 18px rgba(74, 124, 89, 0.30);
	--dh-shadow-btn-green-hover: 0 6px 24px rgba(74, 124, 89, 0.38);
	--dh-shadow-btn-orange: 0 4px 18px rgba(242, 101, 34, 0.25);

	/* Border Radius */
	--dh-radius-sm: 6px;
	--dh-radius-md: 16px;
	--dh-radius-lg: 18px;
	--dh-radius-pill: 30px;

	/* Transitions */
	--dh-ease: 0.22s ease;
	--dh-ease-slow: 0.4s ease;

	/* Typography - Dual font system */
	--dh-font-heading: 'Poppins', system-ui, -apple-system, sans-serif;
	--dh-font-body: 'Inter', system-ui, -apple-system, sans-serif;
	--dh-font: var(--dh-font-body);

	/* Typography Scale (optimized for readability) */
	--dh-text-h1: 2.625rem;    /* 42px */
	--dh-text-h2: 1.875rem;    /* 30px */
	--dh-text-h3: 1.375rem;    /* 22px */
	--dh-text-body: 1rem;      /* 16px */
	--dh-text-sm: 0.875rem;    /* 14px - minimum accessible size */
	--dh-text-xs: 0.813rem;    /* 13px - absolute minimum */

	/* Line Heights */
	--dh-leading-tight: 1.25;
	--dh-leading-normal: 1.5;
	--dh-leading-relaxed: 1.7;

	/* Spacing Scale (8px base) */
	--dh-space-1: 0.5rem;      /* 8px */
	--dh-space-2: 1rem;        /* 16px */
	--dh-space-3: 1.5rem;      /* 24px */
	--dh-space-4: 2rem;        /* 32px */
	--dh-space-5: 3rem;        /* 48px */
	--dh-space-6: 4rem;        /* 64px */

	/* Layout */
	--dh-header-h: 68px;
	--dh-max-width: 1200px;
	--dh-content-width: 620px;
}