/*
 * Design tokens bridged from Figma (via astra-child/theme.json) into plain CSS
 * custom properties, usable in Elementor widget markup outside block-editor contexts.
 * Keep this file's values in sync with astra-child/theme.json.
 */
:root {
	/* Brand */
	--hl-color-brand-900: #00090d;
	--hl-color-brand-800: #001219;
	--hl-color-brand-700: #001c26;
	--hl-color-brand-500: #002e3f;
	--hl-color-brand-400: #335865;
	--hl-color-brand-300: #66828c;
	--hl-color-brand-200: #99abb2;
	--hl-color-brand-100: #ccd5d9;
	--hl-color-brand-50: #e6ebec;

	/* Secondary / semantic */
	--hl-color-yellow-500: #f7ec13;
	--hl-color-warning-400: #f9a63a;

	/* Neutrals */
	--hl-color-grey-900: #17181a;
	--hl-color-grey-600: #5a5e66;
	--hl-color-grey-400: #8d9199;
	--hl-color-grey-300: #aaadb3;
	--hl-color-grey-200: #c6c8cc;
	--hl-color-grey-100: #e3e4e6;
	--hl-color-grey-50: #f1f1f2;
	--hl-color-grey-25: #fafafa;
	--hl-color-off-white: #f6f5f1;
	--hl-color-white: #ffffff;
	--hl-color-placeholder-bg: #f1f5ff;

	/* Semantic text/surface roles */
	--hl-color-text-title: #001c26;
	--hl-color-text-subtext: #5a5e66;
	--hl-color-text-primary: #17181a;
	--hl-color-text-price: #335865;
	--hl-color-form-title: #00090d;
	--hl-color-form-content-default: #aaadb3;
	--hl-color-form-surface: #ffffff;
	--hl-color-form-stroke: #c6c8cc;

	/* Button roles */
	--hl-btn-primary-content: #ffffff;
	--hl-btn-primary-surface: #002e3f;
	--hl-btn-primary-surface-hover: #001219;
	--hl-btn-primary-surface-pressed: #001219;
	--hl-btn-primary-surface-disabled: #ccd5d9;
	--hl-btn-primary-content-disabled: #99abb2;
	--hl-btn-primary-focus-ring: #99abb2;

	--hl-btn-secondary-content: #002e3f;
	--hl-btn-secondary-surface: #f7ec13;
	--hl-btn-secondary-surface-hover: #c6bd0f;
	--hl-btn-secondary-surface-pressed: #635e08;
	--hl-btn-secondary-content-pressed: #ffffff;
	--hl-btn-secondary-surface-disabled: #fdfbd0;
	--hl-btn-secondary-content-disabled: #f7ec13;
	--hl-btn-secondary-focus-ring: #c6bd0f;

	--hl-btn-ghost-content-default: #002e3f;
	--hl-btn-ghost-stroke-default: #002e3f;
	--hl-btn-ghost-surface-hover: #ccd5d9;
	--hl-btn-ghost-content-pressed: #00090d;
	--hl-btn-ghost-stroke-pressed: #00090d;
	--hl-btn-ghost-content-disabled: #99abb2;
	--hl-btn-ghost-stroke-disabled: #99abb2;
	--hl-btn-ghost-focus-ring: #99abb2;

	--hl-btn-link-content-default: #002e3f;
	--hl-btn-link-content-hover: #66828c;
	--hl-btn-link-content-pressed: #00090d;
	--hl-btn-link-content-disabled: #99abb2;

	/* Accordion */
	--hl-accordion-surface: #ffffff;
	--hl-accordion-stroke: #8d9199;
	--hl-accordion-surface-active: #002e3f;
	--hl-accordion-title-active: #ffffff;

	/* Typography */
	--hl-font-family: "Fira Sans", sans-serif;
	--hl-font-weight-regular: 400;
	--hl-font-weight-medium: 500;
	--hl-font-weight-semibold: 600;
	--hl-font-weight-bold: 700;

	--hl-text-h2-size: 36px;
	--hl-text-h2-line-height: 44px;
	--hl-text-h3-size: 20px;
	--hl-text-h3-line-height: 30px;
	--hl-text-h5-size: 16px;
	--hl-text-h5-line-height: 24px;
	--hl-text-h6-size: 14px;
	--hl-text-h6-line-height: 20px;
	--hl-text-micro-size: 10px;
	--hl-text-micro-line-height: 12px;
	--hl-text-link-size: 15px;
	--hl-text-link-line-height: 18px;
	--hl-text-badge-size: 12px;
	--hl-text-badge-line-height: 18px;
	--hl-section-title-text-size: 34px;
	--hl-section-title-text-line-height: 24px;

	--hl-body-default-size: 16px;
	--hl-body-default-line-height: 24px;
	--hl-body-small-size: 14px;
	--hl-body-small-line-height: 20px;
	--hl-body-leading-size: 20px;
	--hl-body-leading-line-height: 30px;
	--hl-body-bold-size: 16px;
	--hl-body-bold-line-height: 24px;

	--hl-form-label-size: 14px;
	--hl-form-label-line-height: 20px;
	--hl-form-input-size: 16px;
	--hl-form-input-line-height: 24px;

	--hl-accordion-title-size: 18px;
	--hl-accordion-title-line-height: 28px;
	--hl-accordion-body-size: 16px;
	--hl-accordion-body-line-height: 24px;

	/* Spacing */
	--hl-space-0: 0px;
	--hl-space-2: 2px;
	--hl-space-4: 4px;
	--hl-space-6: 6px;
	--hl-space-8: 8px;
	--hl-space-12: 12px;
	--hl-space-16: 16px;
	--hl-space-20: 20px;
	--hl-space-24: 24px;
	--hl-space-32: 32px;
	--hl-space-40: 40px;
	--hl-space-48: 48px;
	--hl-space-56: 56px;
	--hl-space-64: 64px;
	--hl-space-80: 80px;

	/* Radius */
	--hl-radius-0: 0px;
	--hl-radius-8: 8px;
	--hl-radius-12: 12px;
	--hl-radius-16: 16px;
	--hl-radius-9999: 9999px;

	/* Shadow */
	--hl-shadow-sm: 0 1px 2px 0 #0a0d120f, 0 1px 3px 0 #0a0d121a;
	--hl-shadow-card: 0 0 16px 0 #0000001f;
}