/* Hashtag Media Group — package design tokens.
 *
 * These MUST stay in sync with the host theme's assets/css/theme.css :root block.
 * The theme styles the chrome; this styles the sections; both read the same
 * variables. If a colour or a type step changes in one and not the other, builder
 * pages and theme-templated pages drift apart — the classic "headings changed
 * everywhere except the pages in the editor" symptom.
 *
 * Also declared here: the --hmg-* scales the builder's own Style-tab token
 * controls resolve against (container / pad_token / gap_token / radius_token /
 * type_token). Without these, choosing "Container: narrow" in the editor resolves
 * to nothing.
 */

:root {
	/* ── Brand surfaces ── */
	--hm-bg: #0B0C10;
	--hm-bg-2: #14151B;
	--hm-menu-hover: #21232C;
	--hm-sage: #052926;
	--hm-teal-surface: #0a514b;
	--hm-teal-mid: #073b39;
	--hm-ocean: #0b2a3a;
	--hm-ink: #1A1717;

	/* ── Brand ink ── */
	--hm-white: #FFFFFF;
	--hm-cyan: #66FCF1;
	--hm-cyan-deep: #4EBFB7;
	--hm-yellow: #FFD638;
	--hm-text: rgba(255, 255, 255, 0.86);
	--hm-text-dim: rgba(255, 255, 255, 0.62);
	--hm-text-faint: rgba(255, 255, 255, 0.40);
	--hm-border: rgba(255, 255, 255, 0.18);
	--hm-border-soft: rgba(255, 255, 255, 0.10);

	/* ── Glass ── */
	--hm-glass-fill: rgba(255, 255, 255, 0.065);
	--hm-glass-fill-strong: rgba(255, 255, 255, 0.10);
	--hm-glass-border: rgba(255, 255, 255, 0.14);
	--hm-glass-shadow: 0 24px 48px rgba(0, 0, 0, 0.38);

	/* ── Type ── */
	--hm-font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--hm-font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--hm-t-h1: clamp(2.625rem, 1.55rem + 4.8vw, 5rem);
	--hm-t-h2: clamp(2rem, 1.35rem + 2.9vw, 3.5rem);
	--hm-t-h3: clamp(1.25rem, 1.13rem + 0.55vw, 1.5rem);
	--hm-t-h3-big: clamp(1.5rem, 1.2rem + 1.3vw, 2rem);
	--hm-t-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
	--hm-t-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
	--hm-t-body: 1rem;
	--hm-t-small: 0.875rem;
	--hm-t-eyebrow: 0.75rem;

	/* ── Space ── */
	--hm-s-xs: 0.5rem;
	--hm-s-sm: 1rem;
	--hm-s-md: 1.75rem;
	--hm-s-lg: 3rem;
	--hm-s-xl: 5rem;
	--hm-s-2xl: 7.5rem;
	--hm-sec-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);

	/* ── Shape ── */
	--hm-r-sm: 8px;
	--hm-r-md: 14px;
	--hm-r-lg: 22px;
	--hm-r-xl: 32px;
	--hm-r-pill: 999px;

	/* ── Layout ── */
	--hm-wrap: 1180px;
	--hm-wrap-narrow: 780px;
	--hm-wrap-wide: 1440px;
	--hm-gutter: clamp(1.125rem, 0.7rem + 1.8vw, 2rem);

	/* ── Motion ── */
	--hm-ease: cubic-bezier(.22, .61, .36, 1);
	--hm-dur: 0.45s;

	/* ── Builder token scales ──────────────────────────────────
	   What the Style tab's Container / Padding / Gap / Radius /
	   Type token dropdowns resolve to. */
	--hmg-container-narrow: 780px;
	--hmg-container-normal: 1180px;
	--hmg-container-wide: 1440px;

	--hmg-space-xs: 0.5rem;
	--hmg-space-sm: 1rem;
	--hmg-space-md: 1.75rem;
	--hmg-space-lg: 3rem;
	--hmg-space-xl: 5rem;
	--hmg-space-2xl: 7.5rem;

	--hmg-radius-sm: 8px;
	--hmg-radius-md: 14px;
	--hmg-radius-lg: 22px;
	--hmg-radius-xl: 32px;
	--hmg-radius-pill: 999px;

	--hmg-type-xs: 0.75rem;
	--hmg-type-sm: 0.875rem;
	--hmg-type-base: 1rem;
	--hmg-type-lg: var(--hm-t-lead);
	--hmg-type-xl: var(--hm-t-h3-big);
	--hmg-type-2xl: var(--hm-t-h2);
	--hmg-type-3xl: var(--hm-t-h1);
	--hmg-type-display: var(--hm-t-h1);

	/* Font tokens declared in manifest.json fonts[] resolve to these. */
	--hmg-font-display: var(--hm-font-display);
	--hmg-font-body: var(--hm-font-body);
}