/*
 * Foundation — OLED black base + InboxWizards brand palette.
 * Brand (InBoxWizards Branding Guidelines): Raleway Medium;
 * #6DC3C9 teal light, #48B9B7 teal, #003F7B navy, #180E34 indigo,
 * #FF5662 coral, #93278F purple.
 */
:root {
	/* Brand */
	--iwz-brand-teal-light: #6DC3C9;
	--iwz-brand-teal: #48B9B7;
	--iwz-brand-navy: #003F7B;
	--iwz-brand-indigo: #180E34;
	--iwz-brand-coral: #FF5662;
	--iwz-brand-purple: #93278F;

	/* Roles */
	--iwz-bg: #000000;
	--iwz-surface: rgba(9, 12, 22, 0.72);
	--iwz-surface-strong: #090C16;
	--iwz-surface-soft: rgba(14, 20, 36, 0.66);
	--iwz-surface-border: rgba(109, 195, 201, 0.14);
	--iwz-text: #FFFFFF;
	--iwz-text-soft: #B9C4D6;
	--iwz-text-faint: #7D8AA3;
	--iwz-teal: var(--iwz-brand-teal);
	--iwz-teal-soft: var(--iwz-brand-teal-light);
	--iwz-purple: var(--iwz-brand-purple);
	--iwz-navy: var(--iwz-brand-navy);
	--iwz-coral: var(--iwz-brand-coral);

	/* Light-weight versions of brand hues for glows on black */
	--iwz-glow-teal: rgba(109, 195, 201, 0.35);
	--iwz-glow-purple: rgba(147, 39, 143, 0.38);
	--iwz-glow-coral: rgba(255, 86, 98, 0.38);
	--iwz-glow-navy: rgba(0, 63, 123, 0.5);

	--iwz-gradient: linear-gradient(120deg, #6DC3C9 0%, #48B9B7 45%, #6DC3C9 100%);
	--iwz-swoosh: linear-gradient(120deg, #6DC3C9 0%, #48B9B7 30%, #003F7B 68%, #93278F 100%);
	--iwz-spell: linear-gradient(135deg, #FF5662 0%, #93278F 100%);
	--iwz-shadow: 0 26px 70px rgba(0, 0, 0, 0.6);
	--iwz-glow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 32px 72px rgba(0, 0, 0, 0.6);
	--iwz-radius: 20px;
	--iwz-font: Raleway, "Helvetica Neue", Arial, sans-serif;
}

html {
	scroll-behavior: smooth;
	background: var(--iwz-bg);
	color-scheme: dark;
}

body,
.editor-styles-wrapper {
	background: var(--iwz-bg);
	color: var(--iwz-text-soft);
	font-family: var(--iwz-font);
	font-weight: 500;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-variant-numeric: lining-nums;
}

body {
	overflow-x: clip;
}

body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body .wp-block-group.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: 1240px;
}

p {
	color: var(--iwz-text-soft);
}

a {
	transition: color 180ms ease, opacity 180ms ease;
}

a:hover {
	color: var(--iwz-text);
}

.wp-site-blocks {
	overflow: visible;
}

.wp-block-button__link,
button,
input,
select,
textarea {
	font-family: var(--iwz-font);
}

::selection {
	background: rgba(109, 195, 201, 0.35);
	color: #FFFFFF;
}

:focus-visible {
	outline: 2px solid var(--iwz-teal-soft);
	outline-offset: 3px;
}