@font-face {
	font-family: "IRANSansWeb";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/IRANSansWeb.woff2") format("woff2");
}

@font-face {
	font-family: "IRANSansWeb";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/IRANSansWeb_Medium.woff2") format("woff2");
}

@font-face {
	font-family: "IRANSansWeb";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/IRANSansWeb_Bold.woff2") format("woff2");
}

:root {
	/* Brand colors. */
	--playpop-green: #52a447;
	--playpop-green-dark: #2f7135;
	--playpop-green-soft: #eaf6e8;
	--playpop-yellow: #ffd43b;
	--playpop-yellow-dark: #a66f00;
	--playpop-yellow-soft: #fff7d1;

	/* Playful colors. */
	--playpop-orange: #e85d04;
	--playpop-orange-soft: #fff0e5;
	--playpop-blue: #2878d0;
	--playpop-blue-soft: #eaf3fc;
	--playpop-pink: #d94f83;
	--playpop-pink-soft: #fcebf2;
	--playpop-purple: #7956b8;
	--playpop-purple-soft: #f1ecf9;
	--playpop-teal: #168f83;
	--playpop-teal-soft: #e5f6f3;

	/* Neutral colors. */
	--playpop-background: #f8faf9;
	--playpop-surface: #ffffff;
	--playpop-text: #17221c;
	--playpop-text-secondary: #526158;
	--playpop-border: #d7e0da;

	/* Semantic color aliases. */
	--playpop-color-primary: var(--playpop-green);
	--playpop-color-primary-dark: var(--playpop-green-dark);
	--playpop-color-accent: var(--playpop-orange);
	--playpop-color-background: var(--playpop-background);
	--playpop-color-surface: var(--playpop-surface);
	--playpop-color-text-primary: var(--playpop-text);
	--playpop-color-text-secondary: var(--playpop-text-secondary);
	--playpop-color-border: var(--playpop-border);
	--playpop-color-success: var(--playpop-green-dark);
	--playpop-color-warning: var(--playpop-yellow-dark);
	--playpop-color-error: #c9362b;
	--playpop-color-focus: var(--playpop-blue);

	/* Typography. */
	--playpop-font-family-base: "IRANSansWeb", Tahoma, "Segoe UI", Arial, sans-serif;
	--playpop-font-main: var(--playpop-font-family-base);
	--playpop-font-size-body: 1rem;
	--playpop-font-size-small: 0.875rem;
	--playpop-font-size-caption: 0.75rem;
	--playpop-font-size-h1: clamp(2rem, 5vw, 3rem);
	--playpop-font-size-h2: clamp(1.5rem, 4vw, 2.25rem);
	--playpop-font-size-h3: clamp(1.25rem, 3vw, 1.5rem);
	--playpop-line-height-body: 1.75;
	--playpop-line-height-heading: 1.3;

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

	/* Radius. */
	--playpop-radius-small: 0.25rem;
	--playpop-radius-medium: 0.5rem;
	--playpop-radius-large: 1rem;
	--playpop-radius-pill: 999rem;

	/* Shadows. */
	--playpop-shadow-card: 0 0.125rem 0.5rem rgb(23 34 28 / 8%);
	--playpop-shadow-elevated: 0 0.5rem 1.5rem rgb(23 34 28 / 14%);

	/* Layout. */
	--playpop-container-max-width: 75rem;
	--playpop-container-padding-mobile: 1rem;
	--playpop-container-padding-desktop: 1.5rem;
}