/**
 * REEID Shared Components
 *
 * Reusable frontend and Gutenberg component classes.
 * Author-controlled Gutenberg settings are not locked.
 */

/* Design tokens */

body.reeid-design-en,
.editor-styles-wrapper {
	--reeid-bg: #17181a;
	--reeid-bg-deep: #111214;

	--reeid-surface: #202226;
	--reeid-surface-raised: #272a2f;
	--reeid-surface-warm: #292523;

	--reeid-surface-light: #f2eee8;
	--reeid-surface-light-soft: #e9e4dd;

	--reeid-text: #f7f5f2;
	--reeid-text-muted: #c9c6c1;
	--reeid-text-dim: #96938f;

	--reeid-text-dark: #222326;
	--reeid-text-dark-muted: #626268;

	--reeid-line: rgba(255, 255, 255, 0.13);
	--reeid-line-strong: rgba(255, 255, 255, 0.23);
	--reeid-line-dark: rgba(20, 20, 22, 0.14);

	--reeid-accent: #b14046;
	--reeid-accent-hover: #c65359;
	--reeid-accent-soft: rgba(177, 64, 70, 0.13);

	--reeid-shadow-soft:
		0 18px 45px rgba(0, 0, 0, 0.16);

	--reeid-shadow-raised:
		0 24px 70px rgba(0, 0, 0, 0.24);

	--reeid-width: 1180px;
}

/* Shared surfaces */

body.reeid-design-en .reeid-surface,
.editor-styles-wrapper .reeid-surface {
	background: var(--reeid-bg);
	color: var(--reeid-text);
}

body.reeid-design-en .reeid-surface--deep,
.editor-styles-wrapper .reeid-surface--deep {
	background: var(--reeid-bg-deep);
	color: var(--reeid-text);
}

body.reeid-design-en .reeid-surface--raised,
.editor-styles-wrapper .reeid-surface--raised {
	background: var(--reeid-surface-raised);
	color: var(--reeid-text);
	box-shadow: var(--reeid-shadow-soft);
}

body.reeid-design-en .reeid-surface--warm,
.editor-styles-wrapper .reeid-surface--warm {
	background:
		linear-gradient(
			135deg,
			rgba(177, 64, 70, 0.07),
			rgba(255, 255, 255, 0.015) 48%
		),
		var(--reeid-surface-warm);
	color: var(--reeid-text);
}

body.reeid-design-en .reeid-surface--light,
.editor-styles-wrapper .reeid-surface--light {
	background:
		linear-gradient(
			145deg,
			#f7f3ed,
			var(--reeid-surface-light)
		);
	color: var(--reeid-text-dark);
}

body.reeid-design-en
.reeid-surface--light
:is(h1, h2, h3, h4, p, li),
.editor-styles-wrapper
.reeid-surface--light
:is(h1, h2, h3, h4, p, li) {
	color: inherit;
}

/* Restrained decoration */

body.reeid-design-en .reeid-decor--glow,
.editor-styles-wrapper .reeid-decor--glow {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

body.reeid-design-en .reeid-decor--glow::before,
.editor-styles-wrapper .reeid-decor--glow::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -180px;
	right: -160px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background:
		radial-gradient(
			circle,
			rgba(177, 64, 70, 0.15),
			rgba(177, 64, 70, 0) 68%
		);
	pointer-events: none;
}

body.reeid-design-en .reeid-decor--grid,
.editor-styles-wrapper .reeid-decor--grid {
	background-image:
		linear-gradient(
			rgba(255, 255, 255, 0.035) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.035) 1px,
			transparent 1px
		);
	background-size: 44px 44px;
}

/* Shared elevation */

body.reeid-design-en .reeid-elevated,
.editor-styles-wrapper .reeid-elevated {
	border: 1px solid var(--reeid-line);
	box-shadow: var(--reeid-shadow-soft);
}

body.reeid-design-en .reeid-elevated--strong,
.editor-styles-wrapper .reeid-elevated--strong {
	border: 1px solid var(--reeid-line-strong);
	box-shadow: var(--reeid-shadow-raised);
}