/**
 * Global Design Tokens
 * Reusable across all custom Elementor widgets.
 *
 * @package HelloElementorChild
 */

/* --------------------------------------------------------------------------
   Google Fonts — Sora (headings) + Manrope (body / UI)
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@400;600;700;800&display=swap');

/* --------------------------------------------------------------------------
   CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
	/* Colors */
	--color-ink: #073B4C;
	--color-sea: #118AB2;
	--color-frost: #E9F5F7;
	--color-gold: #F4B942;
	--color-surface: #FFFFFF;
	--color-border: #CDE5E9;
	--color-muted-foreground: #557A85;

	/* Semantic aliases */
	--color-primary: var(--color-ink);
	--color-secondary: var(--color-sea);
	--color-background: var(--color-frost);
	--color-accent: var(--color-gold);
	--color-card: var(--color-surface);

	/* Typography */
	--font-heading: 'Sora', sans-serif;
	--font-body: 'Manrope', sans-serif;

	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extrabold: 800;

	/* Spacing scale */
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 3rem;

	/* Radii */
	--radius-sm: 0.375rem;
	--radius-md: 0.75rem;
	--radius-lg: 1.25rem;
	--radius-pill: 9999px;

	/* Shadows */
	--shadow-soft: 0 4px 24px rgba(7, 59, 76, 0.08);
	--shadow-medium: 0 8px 32px rgba(7, 59, 76, 0.12);

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;
	--transition-slow: 400ms cubic-bezier(0.22, 1, 0.36, 1);

	/* Layout */
	--header-height: 72px;
	--container-max: 1280px;
}

/* --------------------------------------------------------------------------
   Base typography helpers (opt-in via classes)
   -------------------------------------------------------------------------- */
.hec-heading,
.hec-heading h1,
.hec-heading h2,
.hec-heading h3,
.hec-heading h4,
.hec-heading h5,
.hec-heading h6 {
	font-family: var(--font-heading);
	color: var(--color-ink);
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
}

.hec-body {
	font-family: var(--font-body);
	color: var(--color-ink);
	font-weight: var(--font-weight-regular);
	line-height: 1.6;
}

.hec-muted {
	color: var(--color-muted-foreground);
}

/* Utility: visually hidden (search labels, a11y) */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}