/*
 * Mero11 layout tokens: spacing, radius, type, component and shell sizes.
 * Companion to tokens.css (colour). The scale values live in bin/scales.json, which the
 * layout audit, bin/snap-scales.mjs and the stylelint rules also read, so change them there
 * first and mirror them here. Documented in AGENTS.md.
 *
 * Rules: every margin, padding and gap is one of the spacing steps; every radius is one of
 * the radius steps; every font size is one of the type sizes and is always paired with its
 * whole-pixel line height (never a unitless multiplier, which produces fractional heights);
 * every dimension is an integer.
 */

:root {
	/* Spacing: 4px base. 2 is for hairline adjustments, 10 for pill padding only. */
	--space-2: 2px;
	--space-4: 4px;
	--space-8: 8px;
	--space-10: 10px;
	--space-12: 12px;
	--space-16: 16px;
	--space-20: 20px;
	--space-24: 24px;
	--space-32: 32px;
	--space-40: 40px;
	--space-48: 48px;
	--space-64: 64px;
	--space-80: 80px;

	/* Radius */
	--radius-badge: 5px; /* captain / vice-captain badge */
	--radius-sm: 4px; /* buttons, inputs, chips, tabs */
	--radius-card: 4px; /* cards */
	--radius-md: 4px; /* cards, list containers */
	--radius-lg: 4px; /* hero card */
	--radius-pill: 4px; /* chips, tabs and bars: square-ish, never round */
	--dur-fast: 150ms; /* hover, focus and press transitions */
	--ease-out: cubic-bezier(0.2, 0, 0, 1);
	--radius-full: 999px;

	/* Type: size / line height pairs, line heights on the 4px grid */
	--fs-12: 12px; --lh-12: 16px; /* caption, pill, badge, table header */
	--fs-13: 13px; --lh-13: 20px; /* secondary, helper, empty state (nothing user-facing is smaller) */
	--fs-14: 14px; --lh-14: 20px; /* body, numeric rows, button label */
	--fs-16: 16px; --lh-16: 24px; /* card title, row primary */
	--fs-18: 18px; --lh-18: 24px; /* section heading */
	--fs-24: 24px; --lh-24: 32px; /* stat value, h1 on phones */
	--fs-28: 28px; --lh-28: 36px; /* page title */
	--fs-40: 40px; --lh-40: 48px; /* display numeral */

	/* The older names, mapped onto the scale so existing components follow it */
	--font-size-xs: var(--fs-12);
	--font-size-sm: var(--fs-14);
	--font-size-base: var(--fs-16);
	--font-size-md: var(--fs-18);
	--font-size-lg: var(--fs-24);
	--font-size-xl: var(--fs-28);
	--font-size-2xl: var(--fs-28);
	--font-size-3xl: var(--fs-40);
	--font-size-4xl: var(--fs-40);
	--font-size-5xl: var(--fs-40);

	/* Weights: Inter 500 / 600 / 700 */
	--font-weight-body: 500;
	--font-weight-label: 600;
	--font-weight-subheading: 600;
	--font-weight-heading: 700;

	/* Component dimensions */
	--control-height: 44px; /* buttons, inputs, selects, segmented control, tabs; also the minimum hit area */
	--control-padding-x: 20px; /* buttons */
	--input-padding-x: 16px;
	--row-min-height: 52px; /* list and leaderboard rows */
	--table-row-height: 48px;
	--table-row-height-compact: 40px; /* admin density */
	--pill-height: 24px;
	--pill-padding-x: 10px;
	--badge-size: 20px;
	--avatar-sm: 24px;
	--avatar-md: 32px;
	--avatar-lg: 40px;
	--avatar-xl: 56px;
	--icon-16: 16px;
	--icon-20: 20px;
	--icon-24: 24px;
	--icon-stroke: 1.8;

	/* Shell */
	--header-height: 56px;
	--topbar-height: var(--header-height);
	--tabbar-height: 56px; /* plus the bottom safe-area inset where it is used */
	--sidebar-width: 248px;
	--gutter: 16px;
	--section-gap: 24px;
	--card-padding: 16px;
	--container-laptop: 1120px;
	--container-desktop: 1280px;
}

@media ( min-width: 768px ) {
	:root {
		--header-height: 64px; /* the top bar sits beside the sidebar from 768 */
		--gutter: 24px;
	}
}

@media ( min-width: 1024px ) {
	:root {
		--gutter: 32px;
		--section-gap: 32px;
		--card-padding: 20px;
	}
}