/**
 * Goldleaf Tavern — Design tokens
 *
 * SINGLE SOURCE OF TRUTH for the site's look.
 * Every other stylesheet (base, header/footer, each block) must reference
 * these variables with var(--gt-*) and must NOT contain raw colour, font or
 * size values. Change a token here and the whole site follows.
 *
 * This file is loaded on the front end AND inside the block editor iframe
 * (see inc/enqueue.php), so the editor preview always matches production.
 *
 * @package Goldleaf_Tavern
 */

:root {

	/* ---------------------------------------------------------------
	 * 1. Palette — the raw brand colours
	 * ------------------------------------------------------------- */

	--gt-color-ink: #2b2016;              /* Dark brown, main text */
	--gt-color-night: #1c140d;            /* Near-black brown, footer / header */
	--gt-color-burgundy: #6e2b1f;         /* Primary accent, buttons & links */
	--gt-color-burgundy-hover: #85372a;   /* Primary accent, hover */
	--gt-color-gold: #c9a24b;             /* Secondary accent, labels & rules */
	--gt-color-parchment: #e8dac0;        /* Page background */
	--gt-color-parchment-light: #f2e8d5;  /* Light text on dark, input background */
	--gt-color-sand: #dfcfb2;             /* Alternate section background */
	--gt-color-stone: #c9bb9e;            /* Image placeholder background */

	/* RGB channels — needed to build rgba() from the palette above. */
	--gt-rgb-ink: 43, 32, 22;
	--gt-rgb-night: 28, 20, 13;
	--gt-rgb-parchment: 232, 218, 192;
	--gt-rgb-parchment-light: 242, 232, 213;

	/* ---------------------------------------------------------------
	 * 2. Semantic colours — what the palette is used FOR
	 * ------------------------------------------------------------- */

	--gt-color-body-bg: var(--gt-color-parchment);
	--gt-color-body-text: var(--gt-color-ink);
	--gt-color-heading: var(--gt-color-ink);
	--gt-color-muted: rgba(var(--gt-rgb-ink), 0.85);
	--gt-color-rule: rgba(var(--gt-rgb-ink), 0.25);
	--gt-color-rule-soft: rgba(var(--gt-rgb-ink), 0.14);
	--gt-color-link: var(--gt-color-burgundy);
	--gt-color-link-hover: var(--gt-color-ink);

	/* On dark backgrounds (hero, header, footer). */
	--gt-color-on-dark: var(--gt-color-parchment-light);
	--gt-color-on-dark-soft: rgba(var(--gt-rgb-parchment), 0.85);
	--gt-color-on-dark-muted: rgba(var(--gt-rgb-parchment-light), 0.45);
	--gt-color-on-dark-rule: rgba(var(--gt-rgb-parchment), 0.18);
	--gt-color-on-dark-link: rgba(var(--gt-rgb-parchment), 0.85);
	--gt-color-on-dark-link-hover: var(--gt-color-gold);

	/* Section background variants — used by the block "background" field. */
	--gt-section-bg-parchment: var(--gt-color-parchment);
	--gt-section-bg-sand: var(--gt-color-sand);
	--gt-section-bg-night: var(--gt-color-night);

	/* ---------------------------------------------------------------
	 * 3. Typography
	 * ------------------------------------------------------------- */

	--gt-font-display: "Cinzel Decorative", Georgia, "Times New Roman", serif;
	--gt-font-body: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--gt-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	/* Cinzel Decorative only ships 400, 700 and 900. */
	--gt-weight-display: 700;
	--gt-weight-body: 500;

	--gt-size-hero: clamp(38px, 6vw, 76px);
	--gt-size-h2: clamp(28px, 3.4vw, 42px);
	--gt-size-h3: 24px;
	--gt-size-h4: 22px;
	--gt-size-lead: clamp(21px, 2.4vw, 26px);
	--gt-size-body: 21px;
	--gt-size-small: 20px;
	--gt-size-eyebrow: 12px;
	--gt-size-meta: 11px;
	--gt-size-button: 14px;
	--gt-size-brand: 15px;

	--gt-leading-tight: 1.08;
	--gt-leading-heading: 1.2;
	--gt-leading-lead: 1.5;
	--gt-leading-body: 1.65;

	--gt-tracking-brand: 0.22em;
	--gt-tracking-eyebrow: 0.32em;
	--gt-tracking-label: 0.2em;
	--gt-tracking-button: 0.16em;
	--gt-tracking-meta: 0.12em;

	/* Comfortable measure for running text. */
	--gt-measure: 46ch;
	--gt-measure-narrow: 42ch;
	--gt-measure-title: 22ch;

	/* ---------------------------------------------------------------
	 * 4. Spacing scale
	 * ------------------------------------------------------------- */

	--gt-space-3xs: 4px;
	--gt-space-2xs: 8px;
	--gt-space-xs: 12px;
	--gt-space-sm: 18px;
	--gt-space-md: 26px;
	--gt-space-lg: 40px;
	--gt-space-xl: 56px;
	--gt-space-2xl: 72px;
	--gt-space-3xl: 96px;
	--gt-space-4xl: 120px;

	--gt-section-padding-y: var(--gt-space-4xl);
	--gt-section-padding-x: var(--gt-space-lg);
	--gt-gap-grid: var(--gt-space-xl);

	/* ---------------------------------------------------------------
	 * 5. Layout
	 * ------------------------------------------------------------- */

	--gt-content-width: 1120px;
	--gt-content-narrow: 720px;
	--gt-header-height: 62px;

	/* ---------------------------------------------------------------
	 * 6. Components
	 * ------------------------------------------------------------- */

	--gt-radius: 2px;
	--gt-border-width: 1px;
	--gt-transition: 0.2s ease;

	/* Image frame aspect ratios. */
	--gt-ratio-landscape: 4 / 3;
	--gt-ratio-square: 1 / 1;
	--gt-ratio-portrait: 4 / 5;

	/*
		* Buttons. Not headings, so they take the body face: Cinzel Decorative's
		* flourishes are unreadable at button size and letter spacing.
		*/
	--gt-button-font: var(--gt-font-body);
	--gt-button-weight: 600;
	--gt-button-bg: var(--gt-color-burgundy);
	--gt-button-bg-hover: var(--gt-color-burgundy-hover);
	--gt-button-color: var(--gt-color-parchment-light);
	--gt-button-border-color: var(--gt-color-gold);
	--gt-button-padding: 15px 30px;
	--gt-button-padding-sm: 15px 28px;

	/* Form controls. */
	--gt-input-bg: var(--gt-color-parchment-light);
	--gt-input-color: var(--gt-color-ink);
	--gt-input-border-color: rgba(var(--gt-rgb-parchment-light), 0.6);
	--gt-input-border-focus-color: var(--gt-color-gold);
	--gt-input-padding: 12px 18px;
	--gt-input-line-height: 1.3;
	--gt-input-size: 18px;

	/* Width of the whole field + button group, centred in its section. */
	--gt-form-max-width: 480px;

	/* Site header. */
	--gt-header-bg: rgba(var(--gt-rgb-night), 0.55);
	--gt-header-blur: 6px;
	--gt-header-padding: 18px var(--gt-space-lg);
	--gt-header-color: var(--gt-color-parchment);
	--gt-logo-height: 38px;

	/*
		* Wordmark. Uses the body face: Cinzel Decorative's flourishes are hard
		* to read at brand size with this much letter spacing.
		*/
	--gt-brand-font: var(--gt-font-body);
	--gt-brand-weight: 600;

	/* Language switcher. */
	--gt-lang-opacity: 0.55;
	--gt-lang-sep-color: rgba(var(--gt-rgb-parchment), 0.4);

	/* Footer. */
	--gt-footer-bg: var(--gt-color-night);
	--gt-footer-color: var(--gt-color-parchment);
	--gt-footer-padding: var(--gt-space-3xl) var(--gt-space-lg) var(--gt-space-lg);
	--gt-social-icon-size: 22px;

	/*
		* Hero.
		*
		* The overlay gradient itself is built in blocks/hero/style.css, not
		* here: a custom property is substituted on the element that declares
		* it, so a gradient assembled at :root would freeze the default
		* strength and ignore the per-block value set inline on .gt-hero.
		* These tokens still control it.
		*/
	--gt-hero-min-height: calc(78vh + 100px);
	--gt-hero-logo-size: 120px;

	/* Scroll hint: its distance from the bottom, and the room reserved for it. */
	--gt-hero-scroll-offset: var(--gt-space-lg);
	--gt-hero-scroll-space: 100px;
	--gt-hero-overlay-strength: 0.75;
	--gt-hero-overlay-top: 0.96;
	--gt-hero-overlay-middle: 0.88;
	--gt-hero-overlay-bottom: 1.15;

	/* Image placeholder (diagonal hatch shown when no image is set). */
	--gt-placeholder-bg: var(--gt-color-stone);
	--gt-placeholder-hatch: repeating-linear-gradient(
		135deg,
		rgba(var(--gt-rgb-ink), 0.16) 0 2px,
		rgba(var(--gt-rgb-ink), 0) 2px 12px
	);
	--gt-placeholder-color: rgba(var(--gt-rgb-ink), 0.55);
	--gt-placeholder-border: var(--gt-border-width) solid rgba(var(--gt-rgb-ink), 0.2);
}

/* Tighter section rhythm on small screens. */
@media (max-width: 782px) {

	:root {
		--gt-section-padding-y: var(--gt-space-2xl);
		--gt-section-padding-x: var(--gt-space-md);
		--gt-gap-grid: var(--gt-space-lg);
		--gt-header-padding: 14px var(--gt-space-md);

		/* At 38px the hero title ran to four lines on a phone. */
		--gt-size-hero: clamp(30px, 8vw, 36px);

		/* Keeps "Ouverture prochaine - Montreal" on a single line. */
		--gt-size-eyebrow: 11px;
		--gt-tracking-eyebrow: 0.18em;

		/*
			* "La Taverne Feuille d'Or" is 23 characters. At the desktop brand
			* size the header needs 448px, which overflows a 375px phone by 73px
			* once the logo and language switcher are accounted for. At these
			* values the wordmark measures 162px and clears both 375 and 360.
			*/
		--gt-size-brand: 11px;
		--gt-tracking-brand: 0.1em;

		--gt-hero-min-height: calc(70vh + 60px);
		--gt-hero-logo-size: 96px;
	}
}