/**
 * Design Tokens - Compatibility Layer
 * ============================================================================
 * This file now contains ONLY tokens that are unique to this layer:
 * - Font family delegation (references brand tokens for multi-theme support)
 * - Content padding with responsive overrides
 *
 * All other design system tokens are defined in:
 * - 00-tokens-core.css: Typography scale, spacing, radii, shadows, z-index, etc.
 * - 00-tokens-brand-ssa.css: Brand colors, header dimensions, mega-menu positioning
 *
 * Load order: 00-tokens-core.css → 00-tokens-brand-*.css → 00-tokens.css
 *
 * IMPORTANT: Do NOT add duplicate tokens here. If a token exists in core or
 * brand files, use that version. This file is for composition/delegation only.
 * ============================================================================
 */

:root {
	/* ==========================================================================
	   1. Font Family Delegation
	   ============================================================================
	   These reference brand tokens to enable multi-brand support.
	   Each brand file (e.g., 00-tokens-brand-ssa.css, 00-tokens-brand-sap.css)
	   defines --brand-font-body and --brand-font-heading with brand-specific fonts.
	   ========================================================================== */

	--font-body: var(--brand-font-body);
	--font-heading: var(--brand-font-heading);

	/* ==========================================================================
	   2. Content Padding
	   ============================================================================
	   Horizontal padding for .content/.container elements.
	   Responsive overrides below reduce padding on smaller screens.
	   ========================================================================== */

	--content-padding-x: var(--space-9); /* 48px desktop */
}

/* ==========================================================================
   Responsive Content Padding Overrides
   ============================================================================
   Using max-width syntax for Safari < 16.4 compatibility.
   These reduce horizontal padding on .content/.container at mobile breakpoints.
   ========================================================================== */

@media (max-width: 768px) {
	:root {
		--content-padding-x: var(--space-7); /* 32px tablet */
	}
}

@media (max-width: 480px) {
	:root {
		--content-padding-x: var(--space-4); /* 16px mobile */
	}
}