/* ==========================================================================
   HKN Energy — design tokens
   ========================================================================== */

:root {
	/* Color */
	--hkn-navy: #0b1220;
	--hkn-navy-700: #121b2e;
	--hkn-dark: #060a12;
	--hkn-blue: #2f5dfa;
	--hkn-blue-dim: #1f3fb3;
	--hkn-blue-bright: #6c8fff;
	--hkn-green: #a4e635;
	--hkn-green-ink: #17301f;
	--hkn-green-dark: #0e1f16;
	--hkn-white: #ffffff;
	--hkn-off-white: #f5f3ee;
	--hkn-gray-100: #ece9e2;
	--hkn-gray-300: #cac6bc;
	--hkn-gray-600: #6c6a63;
	--hkn-text: #12141a;
	--hkn-text-on-dark: #eef0f4;
	--hkn-text-muted-on-dark: #9aa3b5;

	/* Typography */
	--font-heading: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
	--font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;

	--fs-display: clamp(2.5rem, 1.4rem + 4.6vw, 4.25rem);
	--fs-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
	--fs-h2: clamp(1.9rem, 1.5rem + 1.6vw, 2.5rem);
	--fs-h3: 1.4rem;
	--fs-body: 1rem;
	--fs-body-lg: 1.125rem;
	--fs-small: 0.875rem;
	--fs-eyebrow: 0.75rem;
	--fs-metadata: 0.8125rem;
	--fs-price: 1.125rem;

	--lh-tight: 1.08;
	--lh-heading: 1.2;
	--lh-body: 1.55;

	/* Spacing scale */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;

	/* Radius — thin technical lines for structural/grid elements (0-8px);
	   xl/pill for card-like modules (quote card, badges, preview widgets) */
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-lg: 8px;
	--radius-xl: 16px;
	--radius-pill: 999px;

	--shadow-card: 0 24px 48px -16px rgba(11, 18, 32, 0.28);
	--shadow-card-sm: 0 12px 24px -12px rgba(11, 18, 32, 0.24);

	/* Layout */
	--container-max: 1440px;
	--container-gutter: clamp(20px, 4vw, 64px);
	--border-hair: 1px solid rgba(18, 20, 26, 0.12);
	--border-hair-dark: 1px solid rgba(238, 240, 244, 0.14);

	--ease: cubic-bezier(0.4, 0, 0.2, 1);
}