/** Base Styles */
:root {
	/**
 * Colors
 * --------------------------------------------------------------------- */
	--c-bg: #fff;
	--c-bg-semi: rgba(255, 255, 255, 0.8);
	--c-bg-secondary: hsla(0, 0%, 0%, 0.05);

	--c-scrollbar: theme("colors.gray.200");
	--c-scrollbar-bg: theme("colors.gray.100");

	--c-white: #ffffff;
	--c-black: #000000;

	--c-divider-light: rgba(60, 60, 67, 0.12);
	--c-divider-dark: rgba(84, 84, 88, 0.48);

	--c-text-light-1: #2c3e50;
	--c-text-light-2: #476582;
	--c-text-light-3: #90a4b7;

	--c-link: hsla(300, 10%, 24%, 1);
	--c-link-hover: hsla(300, 20%, 34%, 1);

	--c-brand: hsl(300, 30%, 40%);
	--c-brand-active: hsl(300, 30%, 20%);
	--c-brand-dark: hsl(300, 30%, 30%);
	--c-brand-light: hsl(300, 40%, 65%);

	--c-disabled-bg: #e5e5e5;
	--c-disabled-fg: #666;

	--code-bg-color: #f8f8f8;
	--code-inline-bg-color: rgba(27, 31, 35, 0.04);
	--code-highlight: rgba(0, 0, 0, 0.04);

	/**
 * Typography
 * --------------------------------------------------------------------- */

	--font-family-base: "Commissioner", -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
		"Helvetica Neue", sans-serif;
	--font-family-mono: "Fira Code", source-code-pro, Menlo, Monaco, Consolas,
		"Courier New", monospace;

	/**
 * Z Indexes
 *
 * Algolia SearchBox has a z-index of 200, so make sure not to go above
 * that value.
 * --------------------------------------------------------------------- */

	--z-index-navbar: 100;
	--z-index-sidebar: 60;

	/**
 * Shadows
 * --------------------------------------------------------------------- */

	--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
	--shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
	--shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
	--shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
	--shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);

	/**
 * Sizes
 * --------------------------------------------------------------------- */

	--header-height: 3.8rem;
	--sidebar-width: 17.5rem;
}

html.dark {
	--c-bg: hsla(30, 2%, 15%, 1);
	--c-bg-semi: rgba(17, 17, 17, 0.8);
	--c-bg-secondary: hsla(0, 0%, 100%, 0.05);

	--c-scrollbar: #333;
	--c-scrollbar-bg: #212121;

	--c-text: #ddd;
	--c-text-light: #ffffff;
	--c-text-lighter: theme("colors.gray.300");

	--c-divider-light: rgba(200, 200, 200, 0.12);
	--c-divider-dark: rgba(200, 200, 200, 0.48);
	--code-bg-color: #191919;
	--code-inline-bg-color: rgba(255, 255, 255, 0.04);
	--code-highlight: rgba(0, 0, 0, 0.66);

	--c-disabled-bg: #333;
	--c-disabled-fg: #aaa;

	--c-link: hsla(10, 20%, 90%, 1);
	--c-link-hover: hsla(300, 20%, 80%, 1);

	--c-brand: hsl(300, 30%, 50%);
	--c-brand-active: hsl(300, 30%, 60%);
	--c-brand-dark: hsl(300, 30%, 30%);
	--c-brand-light: hsl(300, 30%, 65%);
}

/** Fallback Styles */
:root {
	--c-divider: var(--c-divider-light);

	--c-text: var(--c-text-light-1);
	--c-text-light: var(--c-text-light-2);
	--c-text-lighter: var(--c-text-light-3);

	--c-bg: var(--c-white);

	--code-line-height: 24px;
	--code-font-family: var(--font-family-mono);
	--code-font-size: 14px;
}

/* commissioner-regular - latin_cyrillic-ext_cyrillic */
@font-face {
	font-family: "Commissioner";
	font-style: normal;
	font-weight: 400;
	src: local(""),
		url("/fonts/commissioner-v3-latin_cyrillic-ext_cyrillic-regular.woff2")
			format("woff2"),
		/* Chrome 26+, Opera 23+, Firefox 39+ */
			url("/fonts/commissioner-v3-latin_cyrillic-ext_cyrillic-regular.woff")
			format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* commissioner-700 - latin_cyrillic-ext_cyrillic */
@font-face {
	font-family: "Commissioner";
	font-style: normal;
	font-weight: 700;
	src: local(""),
		url("/fonts/commissioner-v3-latin_cyrillic-ext_cyrillic-700.woff2")
			format("woff2"),
		/* Chrome 26+, Opera 23+, Firefox 39+ */
			url("/fonts/commissioner-v3-latin_cyrillic-ext_cyrillic-700.woff")
			format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
