:root {

	/* =========================
	   RED SCALE
	   ========================= */

	--red-100: #e11b14;
	--red-200: #d40000;
	--red-300: #a80000;
	--red-400: #7a0000;


	/* =========================
	   BLACK SCALE
	   ========================= */

	--black-100: #4b4f58;
	--black-200: #333333;
	--black-300: #1c1b1b;
	--black-400: #000000;


	/* =========================
	   BRAND COLORS
	   ========================= */

	--color-primary: #d40000;
	--color-primary-hover: #e11b14;
	--color-primary-active: #a80000;

	--color-secondary: #1c1b1b;
	--color-secondary-deep: #000000;


	/* =========================
	   TEXT
	   ========================= */

	--color-heading: #000000;
	--color-text: #4b4f58;
	--color-muted: #808080;


	/* =========================
	   SURFACE
	   ========================= */

	--color-white: #ffffff;

	--color-surface: #f6f6f6;
	--color-surface-alt: #efefef;

	--color-border: #cccccc;
	--color-border-soft: #eaeaea;


	/* =========================
	   BORDER RADIUS
	   ========================= */

	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 12px;


	/* =========================
	   SHADOW
	   ========================= */

	--shadow-card:
		0 4px 14px rgba(0, 0, 0, 0.08);

	--shadow-header:
		0 2px 10px rgba(0, 0, 0, 0.08);


	/* =========================
	   LAYOUT
	   ========================= */

	--container: 1180px;

	--section-space: 56px;
	--section-space-small: 40px;

	--section-space-mobile: 36px;
	--section-space-mobile-small: 28px;


	/* =========================
    TYPOGRAPHY
    ========================= */

    --font-heading:
        "Roboto Condensed",
        "Arial Narrow",
        Arial,
        sans-serif;

    --font-body:
        "Poppins",
        Arial,
        sans-serif;
}