/**
 * Mahis Commerce design tokens.
 *
 * Breakpoints are mobile below 48rem, tablet from 48rem through 64rem,
 * and desktop above 64rem. Custom properties are not used for media-query
 * conditions because CSS does not resolve them there consistently.
 */

:root {
	/* Colors. */
	--mc-color-primary: #f82568;
	--mc-color-primary-hover: #f94c83;
	--mc-color-secondary: #95d2b3;
	--mc-color-button-text: #ffffff;
	--mc-color-text-primary: #111827;
	--mc-color-text-secondary: #4b5563;
	--mc-color-text: var(--mc-color-text-primary);
	--mc-color-background: #f8fafc;
	--mc-color-surface: #ffffff;
	--mc-color-border: #e5e7eb;
	--mc-color-success: #15803d;
	--mc-color-warning: #b45309;
	--mc-color-danger: #b91c1c;
	--mc-rating-color: #d9a514;

	/* Typography. */
	--mc-font-family: "IRANSansWebFaNum", Tahoma, Arial, sans-serif;
	--mc-font-family-base: var(--mc-font-family);
	--mc-font-size-xs: 0.75rem;
	--mc-font-size-sm: 0.875rem;
	--mc-font-size-md: 1rem;
	--mc-font-size-lg: 1.125rem;
	--mc-font-size-xl: 1.375rem;
	--mc-font-size-2xl: 1.625rem;
	--mc-font-size-3xl: 2rem;
	--mc-font-weight-regular: 400;
	--mc-font-weight-medium: 400;
	--mc-font-weight-semibold: 700;
	--mc-font-weight-bold: 700;
	--mc-font-weight-extrabold: 800;
	--mc-line-height-tight: 1.45;
	--mc-line-height-normal: 1.75;
	--mc-line-height-relaxed: 2;
	--mc-line-height-control: 1.5;

	/* Spacing. */
	--mc-space-xs: 0.25rem;
	--mc-space-sm: 0.5rem;
	--mc-space-md: 1rem;
	--mc-space-lg: 1.5rem;
	--mc-space-xl: 2rem;
	--mc-space-2xl: 3rem;

	/* Layout. */
	--mc-container-width: 90rem;
	--mc-container-padding-mobile: 1rem;
	--mc-container-padding-desktop: 2rem;

	/* Shape. */
	--mc-radius-small: 0.25rem;
	--mc-radius-medium: 0.5rem;
	--mc-radius-large: 0.75rem;
	--mc-radius-full: 9999px;
	--mc-radius-card: var(--mc-radius-large);
	--mc-radius-button: var(--mc-radius-medium);
	--mc-button-padding-block: 0.625rem;
	--mc-button-padding-inline: 1.25rem;
	--mc-button-font-weight: var(--mc-font-weight-bold);
	--mc-shadow-small: 0 1px 2px rgb(15 23 42 / 0.08);
	--mc-shadow-medium: 0 4px 12px rgb(15 23 42 / 0.1);
	--mc-shadow-large: 0 12px 28px rgb(15 23 42 / 0.14);
}

@media (max-width: 47.999rem) {
	:root {
		--mc-mobile-font-size-xs: 0.6875rem;
		--mc-mobile-font-size-sm: 0.75rem;
		--mc-mobile-font-size-card-title: 0.8125rem;
		--mc-mobile-font-size-body: 0.875rem;
		--mc-mobile-font-size-secondary-heading: 1rem;
		--mc-mobile-font-size-section-title: 1.125rem;
		--mc-mobile-font-size-product-title: 1.25rem;
		--mc-mobile-line-height-control: 1.5;
		--mc-mobile-line-height-heading: 1.5;
		--mc-mobile-line-height-card: 1.6;
		--mc-mobile-line-height-body: 1.9;
	}
}