/*
Theme Name: Moritz Schulze
Theme URI: https://moritzschulze.de
Author: Moritz Schulze
Description: Personal portfolio theme. Music x Technology.
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.3.21
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: moritzschulze
*/

/* ---------- Colour tokens: dark is the default ---------- */
:root,
:root[data-theme="dark"] {
	--ms-bg: #141312;
	--ms-surface: #1c1a18;
	--ms-text: #ece7df;
	--ms-sub: #a39e97;
	--ms-muted: #8f8a83;
	--ms-line: #3a3633;
	--ms-line-2: #2e2b28;
	--ms-accent: #e8d5bf;
	--ms-name: #e8d5bf;
	--ms-signal: #a8d5a2;
	--ms-header-rgb: 20, 19, 18;
	color-scheme: dark;
}

:root[data-theme="light"] {
	--ms-bg: #fbfbfd;
	--ms-surface: #ffffff;
	--ms-text: #1d1d1f;
	--ms-sub: #6e6e73;
	--ms-muted: #6e6e73;
	--ms-line: #d2d2d7;
	--ms-line-2: #e8e8ed;
	--ms-accent: #1d1d1f;
	--ms-name: #1d1d1f;
	--ms-signal: #3fae57;
	--ms-header-rgb: 251, 251, 253;
	color-scheme: light;
}

/* ---------- Base ---------- */
body {
	transition: background-color 300ms ease, color 300ms ease;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-stretch: 92%;
}

::selection {
	background: var(--ms-accent);
	color: var(--ms-bg);
}

:focus-visible {
	outline: 2px solid var(--ms-accent);
	outline-offset: 3px;
}

/* ---------- Utilities ---------- */
.ms-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ms-muted);
}

.ms-name {
	color: var(--ms-name);
}

/* ---------- Theme toggle (moon in dark, sun in light) ---------- */
.ms-theme-toggle {
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ms-text);
	cursor: pointer;
}

.ms-theme-toggle::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: all 300ms ease;
}

:root[data-theme="dark"] .ms-theme-toggle::before,
:root:not([data-theme]) .ms-theme-toggle::before {
	width: 18px;
	height: 18px;
	box-shadow: inset 6px -5px 0 0 currentColor;
	transform: translate(-50%, -50%) rotate(-20deg);
}

:root[data-theme="light"] .ms-theme-toggle::before {
	width: 10px;
	height: 10px;
	background: currentColor;
	box-shadow:
		0 -11px 0 -3px currentColor, 0 11px 0 -3px currentColor,
		11px 0 0 -3px currentColor, -11px 0 0 -3px currentColor,
		8px 8px 0 -3px currentColor, -8px -8px 0 -3px currentColor,
		8px -8px 0 -3px currentColor, -8px 8px 0 -3px currentColor;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}