/**
 * PPB Core — design tokens (shared).
 * Company brand fallbacks when venue ACF is unset: primary #917145, secondary #1E374B
 * (see ppb_core_default_color_primary / secondary and Venue branding fields).
 * Themes still set --color-primary, --color-secondary, --font-display, --font-body (see pub appearance).
 *
 * --ppb-color-surface-page is set on the pub parent theme (:root); do not redefine here or child overrides
 * (e.g. Neighbourhood → white) will lose. See docs/architecture.md.
 * --ppb-color-surface-panel: light elevated surface for panels/cards (Pub Club split, gift tiles,
 *   room copy column, …); themes may override.
 */

:root {
	/* Layout — standard content width (header, footer, main sections) */
	--ppb-layout-max-width: 1460px;
	/* Shared Pub Club promo — right-column image height */
	--ppb-pub-club-media-height: 46.875rem; /* 750px at 16px root */

	/* ─── Type scale ─────────────────────────────────────────────────────────
	 * 8 steps. Named by relative size, never by context or module.
	 * All rem; px annotations assume 16px browser root.
	 * Always use these tokens for font-size. Never write a raw rem font-size value.
	 * Do not add context-named tokens (e.g. --ppb-text-banner-body).
	 * ──────────────────────────────────────────────────────────────────────── */
	--ppb-text-xs: 0.75rem; /* 12px — eyebrow labels, tags */
	--ppb-text-sm: 0.875rem; /* 14px — captions, meta, fine print */
	--ppb-text-base: 1rem; /* 16px — body copy */
	--ppb-text-lg: 1.125rem; /* 18px — lead / slightly prominent body */
	--ppb-text-xl: 1.25rem; /* 20px — small titles, sidebar headings */
	--ppb-text-2xl: 1.5rem; /* 24px — section titles */
	--ppb-text-3xl: 1.875rem; /* 30px — large section titles */
	--ppb-text-4xl: 2.5rem; /* 40px — display / hero headings */

	/* ─── Line heights ───────────────────────────────────────────────────────
	 * Unitless. --ppb-leading-{name}.
	 * ──────────────────────────────────────────────────────────────────────── */
	--ppb-leading-normal: 1.5;
	--ppb-leading-tight: 1.3;

	/* ─── Tracking ───────────────────────────────────────────────────────────
	 * Letter spacing. --ppb-tracking-{name}.
	 * ──────────────────────────────────────────────────────────────────────── */
	--ppb-tracking-eyebrow: 1px;

	/* ─── Measure ───────────────────────────────────────────────────────────
	 * max-width for text columns.
	 * ──────────────────────────────────────────────────────────────────────── */
	--ppb-measure-wide: 50rem; /* 800px — wide intro / banner text columns */
	--ppb-measure-prose: 65ch; /* `.ppb-u-prose`, CTAs aligned under prose — readable line length */

	/*
	 * Font weights — numeric for variable fonts / separate files. Child themes may override
	 * (e.g. 600 instead of 700, or font-variation-settings). Optional: pair with font-family
	 * on `.ppb-site-footer` or specific blocks if a face only supports certain weights.
	 */
	--ppb-font-weight-regular: 400;
	--ppb-font-weight-bold: 700;
	--ppb-font-weight-light: 300;
	/*
	 * Display face (--font-display): hero titles, logo wordmark, small display labels. Eyebrows use `--font-body`.
	 * Faces with only one weight (e.g. Instrument Serif Regular + italic): set both to 400 on :root.
	 */
	--ppb-font-weight-display-strong: var(--ppb-font-weight-bold, 700);
	--ppb-font-weight-display-soft: 600;

	/* Spacing — rem (browser default root is usually 16px → 0.625rem ≈ 10px) */
	--ppb-footer-padding-bottom: 0.625rem;

	/*
	 * Global vertical rhythm — stacks (contact lines, form fields, meta lists) and
	 * space below section headings. Override in themes for site-wide consistency.
	 */
	--ppb-space-stack-xs: 0.5rem;
	--ppb-space-stack-sm: 1rem;
	--ppb-space-stack-md: 1.5rem;
	--ppb-space-stack-lg: 2rem;
	--ppb-space-stack-xl: 4rem;
	/* Default gap below h2–h4-style section titles; decouple from stack if needed */
	--ppb-space-after-heading: var(--ppb-space-stack-md);
	/* Vertical gap between top-level regions in `<main class="ppb-site-main">` — hero, sections, `.ppb-wrap`, … */
	--ppb-space-main-gap: clamp(2rem, 5vw, 4rem);

	/*
	 * Dark chrome — footer and pinned overlay header use `--ppb-color-footer-bg` (see site-shell.css).
	 * Do not set `--ppb-color-footer-bg` here: Venue branding prints it in `ppb-venue-branding-tokens` on
	 * :root before this file loads; a :root rule here would override that. When unset, site-shell falls
	 * back to `--color-secondary` (company default #1E374B).
	 */
	--ppb-color-footer-fg: #fefffc;
	--ppb-footer-icon-color: var(--ppb-color-footer-fg);

	/*
	 * Footer brand stack — space below logo / name and below placeholder action row before
	 * contact. Intentionally minimal until CTA buttons are designed; bump in the theme.
	 */
	--ppb-space-footer-brand-tight: 0.25rem;
	/* Gap between label text and external-link SVG (Careers, Get directions, etc.) */
	--ppb-space-footer-external-icon-gap: 0.35rem;

	/* Radii — rem (16px root). Buttons stay smaller; cards / tiles / images use --ppb-radius-card. */
	--ppb-radius-sm: 0.25rem;
	/* Form text fields / selects / textareas stack with `.ppb-button` — use this, not --ppb-radius-sm. */
	--ppb-radius-btn: 0.5rem;
	/* 12px — event cards, gallery slides, gift tiles, boxed panels (not buttons). */
	--ppb-radius-card: 0.75rem;
	/* One-off large corner (e.g. Eat & drink banner image) — do not replace with --ppb-radius-card */
	--ppb-radius-banner-tr: clamp(2rem, 8vw, 5rem);

	/*
	 * Buttons — one UI size everywhere (`.ppb-button`). Matches body; do not override per block.
	 * Optical vertical tweak for label/icon (em, scales with font): themes may nudge ±.
	 */
	--ppb-button-font-size: var(--ppb-text-base, 1rem);
	/* Positive = shift label/icon slightly down in the pill; negative = up. */
	--ppb-button-label-nudge: 0.08em;

	/* Button — text on filled surfaces (override per venue if contrast fails) */
	--ppb-btn-primary-text: #fff;
	--ppb-btn-secondary-text: #fff;
	/* Primary CTA on dark chrome (e.g. footer): contrasting border around filled primary */
	--ppb-btn-primary-on-dark-border: #fff;
	/* Solid light pill on dark chrome (e.g. footer secondary CTA) — warm white + body text */
	--ppb-btn-inverse-bg: var(--ppb-color-footer-fg, #fefffc);
	/* Same as fill: invisible border but keeps 1px box aligned with bordered siblings */
	--ppb-btn-inverse-border: var(--ppb-btn-inverse-bg);
	--ppb-btn-inverse-text: var(--ppb-color-text, #1a1a1a);

	/* Surfaces (fallbacks when theme does not override) */
	--ppb-color-surface-panel: #f9f9fb;
	--ppb-color-text: #1a1a1a;
	--ppb-color-text-muted: #333;
	--ppb-color-border-subtle: rgba(0, 0, 0, 0.08);

	/* Optional: themes may set --ppb-fwb-* when styling `.ppb-full-width-banner__box` (core does not require these). */
	--ppb-fwb-box-bg: var(--ppb-color-surface-page, #f7f6f2);
	/* `.ppb-eyebrow` — Venue branding primary (ACF “Primary colour”) */
	--ppb-fwb-eyebrow-accent: var(--color-primary, #917145);

	/* Dashed rules (e.g. menu rows) — slightly stronger than --ppb-color-border-subtle */
	--ppb-color-border-dashed: rgba(0, 0, 0, 0.15);

	/* Elevated tiles — event/gift cards, boxed full-width banner (matches `.ppb-event-card:hover`). */
	--ppb-shadow-lift: 0 6px 20px color-mix(in srgb, var(--ppb-color-text) 10%, transparent);
	/* Contact form fields — softer than half lift (same blur/spread, lower tint). */
	--ppb-shadow-lift-subtle: 0 6px 20px color-mix(in srgb, var(--ppb-color-text) 2.5%, transparent);
}