/**
 * Variables.
 */

:root {
	/* stylelint-disable declaration-colon-space-after */

	/* Color Schema */
	--color-gray-50: #fafafa;
	--color-gray-100: #f4f4f5;
	--color-gray-200: #e4e4e7;
	--color-gray-300: #d4d4d8;
	--color-gray-400: #a1a1aa;
	--color-gray-500: #71717a;
	--color-gray-600: #52525b;
	--color-gray-700: #3f3f46;
	--color-gray-800: #27272a;
	--color-gray-900: #18181b;
	--color-gray-950: #09090b;
	--color-white:            var(--color-gray-50);
	--color-black:            var(--color-gray-950);
	--color-background:       var(--color-gray-900);
	--color-background-hover: var(--color-gray-700);
	--color-black-70:         rgba(26, 31, 28, 0.7);
	--color-text:             var(--color-gray-50);
	--color-grey:             var(--color-gray-800);
	--color-text-muted:       var(--color-gray-400);
	--color-divider:          #1f242c;
	--color-grey-light:       #393e47;
	--color-accent:           #fed428;
	--color-red:              #f15231;
	--color-green:            #20bf75;

	/* Assigned colors
	=================================================================== */

	/* Backgrounds and buttons. alt colors are usually for hover states. */

	/* Typography */
	--color-font-base: var(--color-white);
	--color-link:      var(--color-accent);

	/* Typography
	=================================================================== */

	/* Font Families */
	--font-family: "Inter", sans-serif;
	--font-family-code: 'Source Code Pro', monospace;

	/* Sizes */
	--size-xs:   0.75rem;
	--size-s:    0.875rem;
	--size-base: 16px;
	--size-m:    1.125rem;
	--size-l:    1.25rem;
	--size-xl:   1.5rem;
	--size-xxl:  2rem;
	--size-xxxl:  2.5rem;

	/* Weights */
	--weight-light:    300;
	--weight-medium:   400;
	--weight-semibold: 600;

	/* Border radius */
	--border-radius: 5px;

	/* Spacing and sizing
	=================================================================== */

	--spacing-xxs: 0.25rem;
	--spacing-xs: 0.5rem;
	--spacing-s: 0.75rem;
	--spacing-m: 1rem;
	--spacing-l: 1.25rem;
	--spacing-xl: 1.5rem;
	--spacing-xxl: 1.75rem;
	--spacing-xxxl: 2rem;
	--spacing-giant: 2.5rem;
	--spacing-huge: 4rem;

	/* Grid values */
	--page-width:                   1300px;
	--page-width-padding:           calc(1300px + (var(--gutter) * 2));
	--element-max-width:            1500px;           /* For most custom blocks. Assumes 100px gutters. */
	--element-narrow-max-width:     calc(var(--element-max-width-no-padding) + (var(--gutter) * 2));
	--element-max-width-no-padding: 1110px;
	--narrow-width:                 780px;
	--block-spacing:                calc(2rem + 5vw); /* Default vertical space above and below a block with custom spacing controls */
	--spacing-between:              calc(2rem + 2vw); /* Variable vertical space between items (usually items inside a block). */
	--gutter:                       0.625rem;
	--gutter-double:                calc(var(--gutter) * 2);
	--gutter-half:                  calc(var(--gutter) / 2);
	--header-height:                60px;
}

@media (min-width: 52em) {

:root {
		--header-height: 100px;
		--gutter: 1.25rem;
}
	}

:root {

	/* Effects
	=================================================================== */
	--speed-fast:   0.2s;
	--speed-normal: 0.3s;
	--speed-slow:   0.7s;
	--transition-background: background-color 150ms ease-in-out;
	--transition-color: color 150ms ease-in-out;
	--transition-border: border 150ms ease-in-out;
	--transition-visibillity: visibility 150ms ease-in-out, opacity 150ms ease-in-out;
	--action-transition-duration: 0.25s;
	--action-transition-timing-function: ease;
}

/* Small screen first breakpoints */

/* 420px */

/* 560px */

/* 832px */

/* 1024px */

/* 1180px = --element-narrow-max-width */

/* 1440px - where gutters reach their maximum size. */

/* 1500px - where content doesn't grow any more, and auto margins come in to effect. */

/* Small screen only breakpoints */

/* Assumed device breakpoints */

/* IE only */

body.login{
	background-color: #18181b;
	background-color: var(--color-background);
	color: #fafafa;
	color: var(--color-text);
	font-family: "Inter", sans-serif;
	font-family: var(--font-family);
}

.login form,
#lostpasswordform {
	padding: 0.25rem;
	padding: var(--spacing-xxs);
	background-color: rgba(255, 255, 255, 0);
	border: none;
	border-radius: 5px;
	border-radius: var(--border-radius)
}

.login form input[type="text"],
	.login form input[type="password"],
	#lostpasswordform input[type="text"],
	#lostpasswordform input[type="password"] {
		background: #18181b;
		background: var(--color-background);
		border: 2px solid #393e47;
		border: 2px solid var(--color-grey-light);
		border-radius: 5px;
		border-radius: var(--border-radius);
		color: #fafafa;
		color: var(--color-text);
		font-size: 16px;
		font-size: var(--size-base);
		padding-left: 0.75rem;
		padding-right: 0.75rem;
		padding-left: var(--spacing-s);
		padding-right: var(--spacing-s)
	}

.login form input[type="text"]:focus, .login form input[type="password"]:focus, #lostpasswordform input[type="text"]:focus, #lostpasswordform input[type="password"]:focus {
			outline: 1px solid #fed428;
			outline: 1px solid var(--color-accent);
			box-shadow: none;
		}

.login form input[type="password"], #lostpasswordform input[type="password"] {
		letter-spacing: 0.15rem;
	}

.admin-email__heading {
	color: #fafafa !important;
	color: var(--color-text) !important;
	font-size: 1.25rem;
	font-size: var(--size-l);
}

.admin-email__actions-primary .button,
#wp-submit {
	background-color: #fed428;
	background-color: var(--color-accent);
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	line-height: 1 !important;
	padding: 0.75rem 1.5rem !important;
	padding: var(--spacing-s) var(--spacing-xl) !important;
	color: #09090b;
	color: var(--color-black);
	transition: background-color 150ms ease-in-out, color 150ms ease-in-out, border 150ms ease-in-out;
	transition: var(--transition-background), var(--transition-color), var(--transition-border);
	border-radius: 5px;
	border-radius: var(--border-radius);
	font-size: 0.875rem;
	font-size: var(--size-s);
	font-weight: 600;
	font-weight: var(--weight-semibold);
	font-family: "Inter", sans-serif;
	font-family: var(--font-family);
	letter-spacing: 1px;
	cursor: pointer;
	border: 1px solid #fed428;
	border: 1px solid var(--color-accent)
}

.admin-email__actions-primary .button:hover, #wp-submit:hover {
		background-color: #3f3f46;
		background-color: var(--color-background-hover);
		color: #fed428;
		color: var(--color-accent);
		border: 1px solid #09090b;
		border: 1px solid var(--color-black);
	}

.admin-email__actions-primary a.button {
	background-color: transparent;
	color: #fed428;
	color: var(--color-accent);
}

.login #backtoblog,
.login #nav {
	padding: 0.25rem;
	padding: var(--spacing-xxs);
}

.login #backtoblog a, .login #nav a, .admin-email__details a, .admin-email__actions-secondary a {
		color: #fafafa;
		color: var(--color-text);
		transition: color 150ms ease-in-out;
		transition: var(--transition-color)
	}

.login #backtoblog a:hover, .login #nav a:hover, .admin-email__details a:hover, .admin-email__actions-secondary a:hover {
			color: #fed428;
			color: var(--color-accent);
		}

.login label {
	font-weight: 300;
	font-weight: var(--weight-light);
}

.wp-hide-pw .dashicons {
	color: #fed428;
	color: var(--color-accent)
}

.wp-hide-pw .dashicons:hover {
		color: #fed428;
		color: var(--color-accent);
	}

.login #login_error {
	border-color: #f15231;
	border-color: var(--color-red);
}

.login .message {
	border-color: #fed428;
	border-color: var(--color-accent);
}

.login #login_error,
.login .message,
.login .success {
	background-color: #27272a;
	background-color: var(--color-grey);
	margin-left: 0.25rem;
	margin-right: 0.25rem;
	margin-left: var(--spacing-xxs);
	margin-right: var(--spacing-xxs);
	box-shadow: none;
	border-radius: 5px;
	border-radius: var(--border-radius);
}

.login h1 a {
	text-indent: 0;
	text-indent: initial;
	font-size: 2rem;
	font-size: var(--size-xxl);
	color: #fafafa;
	color: var(--color-text);
	font-weight: 300;
	font-weight: var(--weight-light);
	background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
	background: initial;
	height: auto;
	height: initial;
	width: auto;
}