/*
 * Bekaa typography system — single source of truth.
 *
 * Defines the canonical type scale, font families, and color tokens used
 * across the site. Any new CSS that styles type should reference these
 * variables instead of hard-coding values.
 *
 * This file is variables only — it changes nothing visible on its own.
 * Consumer stylesheets (tour-cards-luxe.css, bekaa-luxe-body.css, etc.)
 * apply the variables to specific selectors.
 *
 * Adding a new type role:
 *   1. Add a `--bekaa-fs-…` (size) and any siblings (line-height, weight,
 *      tracking, color) to :root below.
 *   2. Reference them from the consumer stylesheet — never hard-code.
 *
 * Reverting:
 *   Dequeue this file. Any consumer stylesheet still loaded will fall back
 *   to the var() defaults provided inline.
 */

:root {
	/* Families. The system stack already lives in child.css; mirror it here
	 * so this file is self-contained when read in isolation, and add a
	 * canonical display alias for Gilda Display. */
	--bekaa-display: "Gilda Display", Georgia, "Times New Roman", serif;

	/* Type scale — sizes. Card-scope tokens come first; section/page scope
	 * tokens get added as they're introduced. */
	--bekaa-fs-eyebrow: 10px;
	--bekaa-fs-eyebrow-large: 12px;  /* hero-scale eyebrow (carousels, large cards) */
	--bekaa-fs-card-body: 14px;
	--bekaa-fs-body: 15px;            /* general content body (section paragraphs) */
	--bekaa-fs-card-title: 22px;
	--bekaa-fs-card-price: 22px;
	--bekaa-fs-section-display-top: 40px;
	--bekaa-fs-section-display-accent: 50px;
	--bekaa-fs-stat: clamp(5rem, 9vw, 9rem);  /* giant statement figures (USP, hero) */

	/* Type scale — leading & tracking. */
	--bekaa-lh-tight: 1.28;
	--bekaa-lh-body: 1.6;
	--bekaa-lh-section-display: 0.94;
	--bekaa-tracking-eyebrow: 0.18em;
	--bekaa-tracking-body: 0.005em;

	/* Color tokens. Brand red (--bekaa-red, --wd-red) already exists in
	 * other files; these supplement with neutrals for type. */
	--bekaa-color-text: #1a1a1a;
	--bekaa-color-text-muted: #555;
	--bekaa-color-text-eyebrow: #7a7268;
}

@media (max-width: 767px) {
	:root {
		--bekaa-fs-section-display-top: 33px;
		--bekaa-fs-section-display-accent: 40px;
	}
}