/**
 * CHV Website 2026 - Global CSS Variables
 * Single source of truth for typography, colors, and spacing
 *
 * Typography scale matches claude.md standards (16px minimum for accessibility)
 *
 * @package CHV_Theme
 */

:root {
	/* ============================================
	   Typography Scale
	   ============================================ */
	--chv-font-hero: 56px;        /* Hero titles */
	--chv-font-section: 36px;     /* Section H2 headings */
	--chv-font-cta: 32px;         /* CTA headings */
	--chv-font-card: 24px;        /* Card/subsection H3 */
	--chv-font-lg: 20px;          /* Large body, intro text */
	--chv-font-base: 18px;        /* Standard body text */
	--chv-font-sm: 16px;          /* Labels, notes (minimum size) */

	/* ============================================
	   Colors
	   ============================================ */
	/* Primary */
	--chv-primary-blue: #2B7CC7;
	--chv-secondary-blue: #4A9FEB;
	--chv-accent-blue: #6BB8F5;
	--chv-light-blue-bg: #F8FAFB;

	/* Text */
	--chv-text-dark: #1A1A1A;
	--chv-text-gray: #4A4A4A;
	--chv-text-light: #FFFFFF;

	/* Status */
	--chv-error: #d32f2f;
	--chv-success: #388e3c;

	/* Accent Colors */
	--chv-accent-red: #E57373;
	--chv-accent-green: #10B981;
	--chv-accent-warm: #C4653A;
	--chv-gray-muted: #9CA3AF;

	/* Borders */
	--chv-border: #ddd;
	--chv-border-light: #E5E7EB;

	/* ============================================
	   Spacing
	   ============================================ */
	--chv-spacing-xs: 8px;
	--chv-spacing-sm: 12px;
	--chv-spacing-md: 20px;
	--chv-spacing-lg: 32px;
	--chv-spacing-xl: 40px;
	--chv-spacing-section: 48px;

	/* ============================================
	   Layout
	   ============================================ */
	--chv-container-max: 1200px;
	--chv-page-padding: clamp(16px, 5vw, 40px);

	/* ============================================
	   Other
	   ============================================ */
	--chv-transition: all 0.3s ease;
	--chv-font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--chv-font-family-heading: 'Source Serif 4', Georgia, 'Times New Roman', serif;

	/* Border Radius */
	--chv-radius-sm: 4px;
	--chv-radius-md: 6px;
	--chv-radius-lg: 8px;
	--chv-radius-xl: 12px;

	/* Font Weights */
	--chv-font-weight-normal: 400;
	--chv-font-weight-medium: 500;
	--chv-font-weight-semibold: 600;
	--chv-font-weight-bold: 700;
	--chv-font-weight-extrabold: 800;

	/* Line Heights */
	--chv-line-height-normal: 1.8;
	--chv-line-height-relaxed: 2.0;

	/* Shadows */
	--chv-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
	--chv-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
	--chv-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
	--chv-shadow-btn: 0 4px 12px rgba(0, 0, 0, 0.1);
	--chv-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.2);
	--chv-shadow-hover-soft: 0 6px 16px rgba(0, 0, 0, 0.15);
	--chv-shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.2);
	--chv-shadow-header-scrolled: 0 4px 12px rgba(0, 0, 0, 0.15);

	/* Noise Texture */
	--chv-noise-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* ============================================
   Breakpoints (reference — not CSS variables)
   992px  = tablet (nav collapses at 768px)
   768px  = mobile
   480px  = small mobile
   ============================================ */

/* ============================================
   Tablet Breakpoint (992px)
   ============================================ */
@media (max-width: 992px) {
	:root {
		--chv-font-hero: 44px;
		--chv-font-section: 32px;
	}
}

/* ============================================
   Mobile Breakpoint (768px)
   ============================================ */
@media (max-width: 768px) {
	:root {
		--chv-font-hero: 32px;
		--chv-font-section: 30px;
		--chv-font-cta: 28px;
	}
}

/* ============================================
   Small Mobile Breakpoint (480px)
   ============================================ */
@media (max-width: 480px) {
	:root {
		--chv-font-hero: 28px;
		--chv-font-section: 26px;
		--chv-font-cta: 24px;
	}
}

/* ============================================
   Utility Classes
   ============================================ */

/* Screen reader only - visually hidden but accessible */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ============================================
   Mobile-First Text Overflow Prevention
   Applied globally to prevent text overflow on mobile
   ============================================ */

/* Prevent long words/URLs from breaking layouts */
h1, h2, h3, h4, h5, h6,
p, li, td, th,
.chv-hero-title,
.chv-hero-subtitle,
.chv-section-title,
.chv-card-title,
.chv-contact-methods a {
	overflow-wrap: break-word;
	-webkit-hyphens: none;
	hyphens: none;
}

/* Ensure containers don't overflow */
.chv-section-container,
.chv-hero-container,
.chv-hero-content,
.chv-hero-text {
	max-width: 100%;
	overflow-x: hidden;
}