/**
 * Edible — design tokens.
 *
 * Type scale, spacing, widths and the knobs that drive the hero.
 * Mobile-first: the base block is the phone scale, and each min-width query steps up.
 *
 * The --text-* and --space-* names are also an interface: theme.json offers them to the
 * editor as the font sizes on Heading and Paragraph and the spacing values on those and the
 * media blocks, as `var()` rather than as copies. Retuning a value here changes the editor's
 * presets with it — renaming one leaves a preset resolving to nothing, so rename in both.
 *
 * @package Edible
 */

:root {

	/* Typography — families.
	   Swap these two lines (and the Google Fonts URL in inc/enqueue.php) if Edible
	   licenses its own brand fonts. Everything downstream reads these tokens. */
	--font-display: "Playfair Display", georgia, "Times New Roman", serif;
	--font-sans: "Archivo", system-ui, -apple-system, "Helvetica Neue", sans-serif;

	/* Typography — sizes. Phone first. */
	--text-xs: 0.75rem;			/* 12px */
	--text-sm: 0.875rem;		/* 14px */
	--text-base: 1rem;			/* 16px */
	--text-lg: 1.25rem;			/* 20px */
	--text-xl: 1.5rem;			/* 24px */
	--text-2xl: 1.875rem;		/* 30px */

	/* Typography — line height. */
	--leading-tighter: 0.85;
	--leading-snug: 1.2;
	--leading-normal: 1.35;
	--leading-relaxed: 1.5;

	/* Typography — letter spacing. */
	--tracking-negative: -0.015rem;
	--tracking-tight: 0.025em;
	--tracking-normal: 0;
	--tracking-wide: 0.05em;

	/* Typography — opacity. */
	--text-opacity-highlight: 0.45;
	--text-opacity-inactive: 0.2;

	/* Spacing. */
	--space-xs: 0.25rem;		/* 4px */
	--space-sm: 0.5rem;			/* 8px */
	--space-md: 1rem;			/* 16px */
	--space-lg: 1.5rem;			/* 24px */
	--space-xl: 2rem;			/* 32px */
	--space-2xl: 3rem;			/* 48px */
	--space-3xl: 4rem;			/* 64px */
	--space-4xl: 6rem;			/* 96px */

	/* Widths. */
	--width-sm: 24rem;
	--width-md: 28rem;
	--width-lg: 32rem;
	--width-xl: 36rem;
	--width-full: 100%;

	/* Shadows. */
	--shadow: 0 20px 26px rgba(0, 0, 0, 0.1);
	--shadow-header: 0 1px 1px rgba(0, 0, 0, 0.1);

	/* Components. */
	--content-max-width: 100%;
	--header-height: 2.75rem;
	--gutter: var(--space-md);

	/* Height of the WordPress admin bar, for logged-in views. Zero by default; the
	   .admin-bar rules below fill it in. Everything position:fixed or sticky offsets
	   by this, because WordPress pushes the document down with html{margin-top} but
	   fixed elements are positioned against the viewport and would slide underneath.

	   The unit is required: this value is subtracted inside calc(), and a unitless
	   zero there is a <number>, which makes the whole expression invalid. */
	/* stylelint-disable-next-line length-zero-no-unit */
	--admin-bar-height: 0px;

	/* Hero tuning.
	   --title-skew   how far an interior page's title shears.
	   --menu-skew    how far the fullscreen menu items shear. Its own token rather than
	                  a share of --title-skew: a page title is one line at rest, where a
	                  steep angle reads as deliberate, while the menu stacks four of them
	                  and alternates direction — at the same angle the stack reads as
	                  collapsing rather than leaning.
	   --hero-spacer  how far the page scrolls before the hero is fully passed. */
	--title-skew: -30deg;
	--menu-skew: -16deg;
	--hero-spacer-height: 70svh;

	/* How far a menu link shears when hovered. Positive skews the top of the glyphs
	   to the left — the y axis points down, so a positive angle pushes the baseline
	   right and the ascenders left. That backslant is the point: it leans the opposite
	   way to an ordinary italic, so it reads as a deliberate move rather than as the
	   typeface simply switching style. */
	--menu-hover-skew: 14deg;

	/* Set at runtime by home.js from the wordmark's measured bounding box.
	   Only consulted at desktop widths, where the meta labels are absolutely placed. */
	--hero-meta-x: 0;
	--hero-meta-y: 0;
	--date-meta-x: 0;
	--date-meta-y: 0;
}

/*
 * Admin bar offsets, matching WordPress's own breakpoints:
 *
 *     >= 783px   32px, fixed
 *     601-782px  46px, fixed
 *     <= 600px   46px, but absolute — it scrolls away, so no offset is wanted
 */
@media screen and (min-width: 601px) {

	.admin-bar {
		--admin-bar-height: 46px;
	}
}

@media screen and (min-width: 783px) {

	.admin-bar {
		--admin-bar-height: 32px;
	}
}

@media (min-width: 48em) {

	:root {
		--text-xs: 0.8125rem;	/* 13px */
		--text-sm: 0.9375rem;	/* 15px */
		--text-base: 1.125rem;	/* 18px */
		--text-lg: 1.5rem;		/* 24px */
		--text-xl: 1.875rem;	/* 30px */
		--text-2xl: 2.25rem;	/* 36px */
		--header-height: 3.25rem;
		--gutter: calc(var(--space-md) + var(--space-xs));
	}
}

@media (min-width: 90em) {

	:root {
		--text-xs: 0.875rem;	/* 14px */
		--text-sm: 1.125rem;	/* 18px */
		--text-base: 1.375rem;	/* 22px */
		--text-lg: 1.75rem;		/* 28px */
		--text-xl: 2.25rem;		/* 36px */
		--text-2xl: 3rem;		/* 48px */
		--header-height: 3.5rem;
	}
}