@font-face {
	font-family : "Chop Suey";
	src         : local("Chop Suey"), local("ChopsUey"), url("../fonts/ChopsUey.ttf") format("truetype");
	font-style  : normal;
	font-weight : 400;
}

@font-face {
	font-family : "Wonton";
	src         : local("Wonton"), url("../fonts/Wonton.ttf") format("truetype");
	font-style  : normal;
	font-weight : 400;
}

@font-face {
	font-family : "Christmas Merryland";
	src         : local("Christmas Merryland"), url("../fonts/ChristmasMerryland.ttf") format("truetype");
	font-style  : normal;
	font-weight : 400;
}

/* ------------------------------ typography ------------------------------ */

:root {
	--font-chopsuey         : "Chop Suey", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--font-christmas        : "Christmas Merryland", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--font-wonton           : "Wonton", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--font-heading          : "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--font-body             : "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--font-ui               : "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--font-weight-heading   : 500;
	--font-size-body-lg     : 18px;
	--font-size-body-sm     : 16px;
	--font-size-body-xs     : 15px;
	--font-size-body-2xs    : 14px;
	--font-size-footer      : 13px;
	--letter-spacing-ui     : 0.08em;
}

/* ------------------------------ colors ------------------------------ */

:root {
	--color-bg-main                : #c6beb6;
	--color-bg-soft                : #e7ddd6;
	--color-bg-light               : #f7f4f1;
	--color-bg-card                : #f7f2ee;
	--color-bg-surface-muted       : #e6e2de;
	--color-bg-surface-story-video : #dcc9cf;
	--color-bg-panel               : rgba(247, 244, 241, 0.72);
	--color-bg-white-soft          : rgba(255, 255, 255, 0.34);
	--color-bg-overlay-light       : rgba(233, 230, 230, 0.42);
	--color-page-main              : #f3efeb;
	--color-brown-main             : #2f221b;
	--color-border-soft            : #d8ccc3;
	--color-border-light           : rgba(47, 34, 27, 0.08);
	--color-border-strong          : rgba(47, 34, 27, 0.12);
	--color-border-medium          : rgba(47, 34, 27, 0.18);
	--color-border-light-on-dark   : rgba(247, 244, 241, 0.18);
	--color-border-card-strong     : rgba(223, 214, 207, 0.95);
	--color-surface-placeholder    : #ddd6d0;
	--color-surface-video          : #e7d7dd;
	--color-shadow-soft            : rgba(47, 34, 27, 0.03);
	--color-shadow-soft-md         : rgba(47, 34, 27, 0.06);
	--color-shadow-inset-light     : rgba(255, 255, 255, 0.35);
	--color-gbnd                   : #8f6d3a;
}

/* ------------------------------ spacing-and-radius ------------------------------ */

:root {
	--radius-sm   : 8px;
	--radius-2xl  : 24px;
	--radius-3xl  : 26px;
	--radius-4xl  : 28px;
	--radius-pill : 999px;
}

/* ------------------------------ sizing ------------------------------ */

:root {
	--heading-color                : #514644;
	--heading-size                 : 48px;
	--heading-line                 : 0.98;
	--heading-letter               : 0.02em;
	--heading-align                : left;
	--button-min-height-lg         : 60px;
	--text-block-max-ch            : 38ch;
}