/* ==========================================================================
   Velanta Design Tokens — generated from DESIGN.md front matter.
   Do not hand-edit values here without updating DESIGN.md; keep them in sync.
   ========================================================================== */

:root {
	/* Colors */
	--color-primary: #111111;
	--color-on-primary: #ffffff;
	--color-canvas: #ffffff;
	--color-soft-cloud: #f5f5f5;
	--color-ink: #111111;
	--color-charcoal: #39393b;
	--color-ash: #4b4b4d;
	--color-mute: #707072;
	--color-stone: #9e9ea0;
	--color-hairline: #cacacb;
	--color-hairline-soft: #e5e5e5;
	--color-sale: #d30005;
	--color-sale-deep: #780700;
	--color-success: #007d48;
	--color-success-bright: #1eaa52;
	--color-info: #1151ff;
	--color-info-deep: #0034e3;
	--color-accent-pink: #ed1aa0;
	--color-accent-pink-soft: #ffb0dd;
	--color-accent-purple-soft: #beaffd;
	--color-accent-purple-pale: #d6d1ff;
	--color-accent-teal: #0a7281;
	--color-accent-pink-deep: #4c012d;

	/* Sample swatch colors (fallbacks referenced by product color attributes) */
	--swatch-black: #111111;
	--swatch-white: #ffffff;
	--swatch-grey: #9e9ea0;
	--swatch-gray: #9e9ea0;
	--swatch-red: #d30005;
	--swatch-blue: #1151ff;
	--swatch-pink: #ed1aa0;
	--swatch-purple: #beaffd;
	--swatch-teal: #0a7281;

	/* Radius */
	--radius-none: 0px;
	--radius-sm: 18px;
	--radius-md: 24px;
	--radius-lg: 30px;
	--radius-full: 9999px;

	/* Spacing (8px base grid) */
	--space-xxs: 2px;
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 12px;
	--space-lg: 18px;
	--space-xl: 24px;
	--space-xxl: 30px;
	--space-section: 48px;

	/* Font families (with system fallbacks; see DESIGN.md Note on Font Substitutes) */
	--font-display: 'Bebas Neue', 'Anton', 'Nike Futura ND', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
	--font-heading: 'Inter', 'Helvetica Now Display Medium', Helvetica, Arial, sans-serif;
	--font-text: 'Inter', 'Helvetica Now Text', Helvetica, Arial, sans-serif;
	--font-text-medium: 'Inter', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif;
	--font-utility: 'Helvetica Neue', Helvetica, Arial, sans-serif;

	/* Layout */
	--container-max: 1440px;
	--gutter: 24px;
	--gutter-wide: 80px;
}

/* ==========================================================================
   Typography tokens — use these classes instead of ad-hoc font-size rules.
   ========================================================================== */

.t-display-campaign {
	font-family: var(--font-display);
	font-size: 96px;
	font-weight: 500;
	line-height: 0.9;
	letter-spacing: 0;
	text-transform: uppercase;
}
.t-heading-xl {
	font-family: var(--font-heading);
	font-size: 32px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
}
.t-heading-lg {
	font-family: var(--font-heading);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
}
.t-heading-md {
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.75;
	letter-spacing: 0;
}
.t-body-md {
	font-family: var(--font-text);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
}
.t-body-strong {
	font-family: var(--font-text-medium);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0;
}
.t-button-lg {
	font-family: var(--font-heading);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
}
.t-button-md {
	font-family: var(--font-text-medium);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0;
}
.t-button-sm {
	font-family: var(--font-text-medium);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0;
}
.t-link-md {
	font-family: var(--font-text);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.75;
	letter-spacing: 0;
	text-decoration: underline;
}
.t-caption-md {
	font-family: var(--font-text-medium);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0;
}
.t-caption-sm {
	font-family: var(--font-text-medium);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0;
}
.t-utility-xs {
	font-family: var(--font-utility);
	font-size: 9px;
	font-weight: 500;
	line-height: 1.75;
	letter-spacing: 0;
}