/**
 * HookedByNorth design tokens.
 * Source of truth for colors, type, spacing, radii, shadows.
 */

:root {
	/* Colors */
	--hbn-color-dark: #041726;
	--hbn-color-navy: #072647;
	--hbn-color-navy-frost: rgba(3, 40, 68, 0.6);
	--hbn-blur-frost: 10px;
	--hbn-color-navy-surface: #0a2c4e;
	--hbn-color-teal-on-dark: #00d4ca;
	--hbn-color-teal-on-light: #09c7b7;
	--hbn-color-sand: #a0774e;
	--hbn-color-cream: #f7f1ea;
	--hbn-color-bg: #fdfdfc;
	--hbn-color-bg-alt: #f8f3ee;
	--hbn-color-white: #ffffff;
	--hbn-color-text: rgba(61, 70, 75, 0.8);

	/* Borders / muted / shadows / radii */
	--hbn-border-on-dark: rgba(255, 255, 255, 0.2);
	--hbn-muted-on-dark: 0.7;
	--hbn-shadow-card: 2px 4px 16px rgba(3, 40, 68, 0.04);
	--hbn-shadow-card-tour: 2px 2px 20px 2px rgba(208, 203, 195, 0.2);
	--hbn-border-card-tour: 1px solid rgba(3, 40, 68, 0.1);
	--hbn-shadow-form: 4px 8px 180px rgba(4, 23, 38, 0.5);
	--hbn-radius-btn: 2px;
	--hbn-radius-card: 8px;
	--hbn-radius-field: 4px;
	--hbn-radius-pill: 30px;

	/*
	 * Form feedback. Peach on navy (9.1:1 on #072647). Warm brown on ivory
	 * (6.8:1 on #f7f1ea). Not pure red.
	 */
	--hbn-color-error-on-dark: #ffb7a1;
	--hbn-color-error-on-light: #8c3a28;

	/*
	 * Placeholders are ivory or navy at 72% over the field fill, stored as
	 * solid colors so contrast does not depend on opacity. Dark: #b4b8bc on
	 * #072647 is 7.6:1. Light: #4c627a on #fdfdfc is 6.2:1.
	 */
	--hbn-color-placeholder-on-dark: #b4b8bc;
	--hbn-color-placeholder-on-light: #4c627a;

	/*
	 * Focus ring on ivory. Brand teal (#09c7b7) is under 3:1 on cream, so
	 * this is that teal darkened until the 2px ring clears 3:1 (4.8:1).
	 */
	--hbn-color-focus-on-light: #05776e;

	/* Fonts */
	--hbn-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--hbn-font-heading: "Cormorant Garamond", Georgia, serif;

	/* Layout: one universal side gutter; content caps at 1240px */
	--hbn-container-max: 1240px;
	--hbn-gutter: max(6.944%, calc((100% - var(--hbn-container-max)) / 2));
	--hbn-section-py: 80px;
	--hbn-section-gap: 50px;

	/* Icons */
	--hbn-icon-size: 16px;

	/* FAQ accordion (Destinations / Day Tours mockup) */
	--hbn-faq-max: 600px;
	--hbn-faq-title-size: 20px;
	--hbn-faq-item-py: 20px;
	--hbn-faq-rule: rgba(83, 115, 99, 0.2);
	--hbn-faq-icon: rgba(83, 115, 99, 0.3);

	/*
	 * Review card tokens from Figma Home/B2C.
	 * TODO: Mariia решит, какие значения канонические (Figma navy #072647 / teal #09C7B7
	 * vs брендгайд navy #0D2742 / teal #27C2AA). Меняться должно в одном месте.
	 */
	--hbn-color-star: #fdd493;
	--hbn-reviews-dots-gap: 40px;
	--hbn-reviews-gap: 24px;

	/* Tour cards (Home.pdf / Home mobile.pdf) */
	--hbn-tour-card-gap: 24px; /* Home.pdf: 24px between two cards */
	--hbn-tour-card-pad: 24px; /* Home.pdf: 174-150 */
	--hbn-tour-card-pad-bottom: 28px; /* Home.pdf: 3074-3046 */
	--hbn-tour-card-title-size: 24px; /* оценка: 2-line bbox 49.6px */
	--hbn-tour-card-excerpt-size: 15px; /* оценка: 3-line bbox 57.6px */
	--hbn-tour-card-meta-size: 15px; /* оценка: location bbox 11.6px */
	--hbn-tour-card-price-size: 24px; /* оценка: €93 bbox height 15px */
	--hbn-tours-dots-gap: 40px;

	/* Destination cards (Home.pdf) and rows (Destinations.pdf) */
	--hbn-dest-card-gap: 16px;
	--hbn-dest-card-pad: 24px;
	--hbn-dest-card-title-size: 24px;
	--hbn-dest-card-excerpt-size: 15px;
	--hbn-dest-card-title-excerpt-gap: 16px;
	--hbn-dest-dots-gap: 40px;
	--hbn-dest-row-min-height: 512px;
	--hbn-dest-row-title-size: 40px;
	--hbn-dest-row-explore-size: 20px;
	--hbn-dest-row-body-size: 15px;
	--hbn-dest-row-pad-block: 50px;
	--hbn-dest-row-title-explore-gap: 41px;
	--hbn-dest-row-explore-content-gap: 26px;
	--hbn-dest-row-content-best-gap: 24px; /* оценка: mock body height varies with copy */
	--hbn-dest-row-best-cta-gap: 54px;
	--hbn-dest-row-title-size-mobile: 32px;
	--hbn-dest-row-photo-ratio-mobile: 3 / 2;

	/* Journal cards (Home.pdf / Home mobile.pdf) */
	--hbn-journal-card-gap: 24px; /* Home.pdf: 732-708 */
	--hbn-journal-card-pad: 24px; /* Home.pdf: 174-150 */
	--hbn-journal-card-title-size: 24px; /* Home.pdf: title bbox 24px */
	--hbn-journal-card-excerpt-size: 16px; /* Home.pdf: body word bbox 16px */
	--hbn-journal-card-title-excerpt-gap: 16px; /* оценка: title-to-body 14.2px */
	--hbn-journal-card-photo-ratio: 558 / 392; /* Home.pdf: photo inside 558-wide card */
	--hbn-journal-card-photo-ratio-mobile: 360 / 348; /* Home mobile.pdf */
	--hbn-journal-dots-gap: 40px;

	/* Tour single page (Tour Page.pdf / Tour mobile.pdf) */
	--hbn-tour-single-max: 1040px;
	--hbn-tour-single-pad: max(30px, calc((100% - var(--hbn-tour-single-max)) / 2));
	--hbn-tour-single-label: 266px;
	--hbn-tour-single-gallery-gap: 16px;
	--hbn-tour-single-gallery-ratio: 4 / 3;
	--hbn-tour-single-gallery-max-height: 500px;
	/* Mockup 64/40; clamped so Capital (87 chars) stays ≤3 lines at 1280 and ≤4 at 390. */
	--hbn-tour-single-title-size: clamp(34px, 4.4vw, 56px);
	--hbn-tour-single-title-size-mobile: 34px;
	--hbn-tour-single-price-size: 40px;
	--hbn-tour-single-price-size-mobile: 20px;
	--hbn-tour-single-section-gap: 72px;
	--hbn-tour-single-check: 40px;
}

/*
 * Mobile breakpoint: Elementor kit default is typically 767px.
 * Confirm active kit value on Mac and adjust if different.
 */
@media (max-width: 767px) {
	:root {
		/* PROVISIONAL: no mobile frame; 30px from Figma at ~390 width */
		--hbn-gutter: clamp(20px, 7.7%, 30px);
		--hbn-section-py: 50px;
		--hbn-section-gap: 24px;
		--hbn-journal-card-photo-ratio: var(--hbn-journal-card-photo-ratio-mobile);
		--hbn-tour-single-section-gap: 48px;
		--hbn-tour-single-price-size: var(--hbn-tour-single-price-size-mobile);
	}
}

/*
 * Tablet: PROVISIONAL clamp between mobile and desktop.
 * Open decision: exact tablet layout values.
 */
@media (min-width: 768px) and (max-width: 1024px) {
	:root {
		--hbn-section-py: clamp(50px, 6vw, 80px);
		--hbn-section-gap: clamp(24px, 3vw, 50px);
	}
}