@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Sora:wght@400;500;600;700&display=swap");

:root {
	--accent: #b496dc;
	--accent-strong: #9a78cc;
	--accent-contrast: #140c1f;
	--accent-soft: rgba(180, 150, 220, 0.13);
	--accent-line: rgba(180, 150, 220, 0.34);

	--bg: #0a0a0a;
	--bg-deep: #050505;
	--surface: #131313;
	--surface-2: #1a1a1a;
	--surface-3: #202020;
	--border: rgba(255, 255, 255, 0.07);
	--border-strong: rgba(255, 255, 255, 0.13);
	--text: #ededed;
	--text-dim: rgba(237, 237, 237, 0.62);
	--text-faint: rgba(237, 237, 237, 0.38);
	--danger: #f87171;

	--star: 226, 216, 245;
	--constellation: 160, 140, 195;

	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-script: "Caveat", "Segoe Script", cursive;
	--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	--font-ai: "Sora", var(--font-body);

	--radius: 14px;
	--radius-sm: 10px;
	--radius-xs: 7px;
	--ease: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
	--shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
	--shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55);
}

:root[data-theme="verdant"] {
	--accent: #6ee7a7;
	--accent-strong: #34d399;
	--accent-contrast: #04140c;
	--accent-soft: rgba(110, 231, 167, 0.12);
	--accent-line: rgba(110, 231, 167, 0.32);
	--star: 216, 245, 230;
	--constellation: 130, 190, 160;
}

:root[data-theme="midnight"] {
	--accent: #5b9dff;
	--accent-strong: #3b82f6;
	--accent-contrast: #04101f;
	--accent-soft: rgba(91, 157, 255, 0.13);
	--accent-line: rgba(91, 157, 255, 0.34);
	--star: 214, 228, 255;
	--constellation: 120, 150, 200;
}

:root[data-theme="dusk"] {
	--accent: #a78bfa;
	--accent-strong: #8b5cf6;
	--accent-contrast: #12081f;
	--accent-soft: rgba(167, 139, 250, 0.13);
	--accent-line: rgba(167, 139, 250, 0.34);
	--star: 228, 218, 255;
	--constellation: 150, 130, 200;
}

:root[data-theme="ember"] {
	--accent: #fb923c;
	--accent-strong: #f97316;
	--accent-contrast: #1c0c02;
	--accent-soft: rgba(251, 146, 60, 0.13);
	--accent-line: rgba(251, 146, 60, 0.34);
	--star: 255, 226, 200;
	--constellation: 200, 150, 110;
}

:root[data-theme="rose"] {
	--accent: #fb7185;
	--accent-strong: #f43f5e;
	--accent-contrast: #1c060b;
	--accent-soft: rgba(251, 113, 133, 0.13);
	--accent-line: rgba(251, 113, 133, 0.34);
	--star: 255, 214, 224;
	--constellation: 200, 130, 150;
}

:root[data-theme="nord"] {
	--accent: #7fd1de;
	--accent-strong: #56b6c2;
	--accent-contrast: #041416;
	--accent-soft: rgba(127, 209, 222, 0.13);
	--accent-line: rgba(127, 209, 222, 0.34);
	--star: 214, 240, 245;
	--constellation: 120, 170, 180;
}

:root[data-theme="sand"] {
	--accent: #e2c08d;
	--accent-strong: #cfa76a;
	--accent-contrast: #1a1207;
	--accent-soft: rgba(226, 192, 141, 0.13);
	--accent-line: rgba(226, 192, 141, 0.34);
	--star: 245, 235, 215;
	--constellation: 190, 170, 140;
}

:root[data-theme="sakura"] {
	--accent: #f7a8c4;
	--accent-strong: #ec6f9e;
	--accent-contrast: #1d0a13;
	--accent-soft: rgba(247, 168, 196, 0.13);
	--accent-line: rgba(247, 168, 196, 0.34);
	--star: 255, 224, 235;
	--constellation: 210, 150, 175;
}

:root[data-mode="light"] {
	--bg: #f7f7f5;
	--bg-deep: #ffffff;
	--surface: #ffffff;
	--surface-2: #f1f1ee;
	--surface-3: #e7e7e3;
	--border: rgba(0, 0, 0, 0.09);
	--border-strong: rgba(0, 0, 0, 0.16);
	--text: #16161a;
	--text-dim: rgba(22, 22, 26, 0.64);
	--text-faint: rgba(22, 22, 26, 0.42);
	--star: 90, 90, 110;
	--constellation: 130, 130, 150;
	--shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
	--shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.13);
}

:root[data-mode="light"] .accent-on-dark {
	color: var(--accent-strong);
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html,
body {
	height: 100%;
}

body {
	font-family: var(--font-body);
	background: var(--bg);
	color: var(--text);
	min-height: 100vh;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}


body::before {
	content: "";
	position: fixed;
	inset: -25%;
	z-index: 0;
	background:
		radial-gradient(36% 28% at 22% 26%, var(--accent-soft), transparent 70%),
		radial-gradient(30% 24% at 78% 72%, var(--accent-soft), transparent 72%);
	opacity: 0.75;
	pointer-events: none;
	animation: haze 52s ease-in-out infinite alternate;
}

@keyframes haze {
	from {
		transform: translate3d(-2%, -1%, 0) scale(1);
	}
	to {
		transform: translate3d(2%, 2%, 0) scale(1.12);
	}
}

#bg-canvas {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: 0;
	pointer-events: none;
}

body.no-stars #bg-canvas,
body.no-stars::before {
	display: none;
}

.view {
	position: relative;
	z-index: 1;
	min-height: 100vh;
}

.hidden {
	display: none !important;
}

::selection {
	background: var(--accent-soft);
	color: var(--text);
}

.script-title {
	position: relative;
	font-family: var(--font-script);
	font-weight: 700;
	font-size: clamp(2.6rem, 6vw, 3.6rem);
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--text);
}

.page-title {
	position: relative;
	display: inline-block;
	font-family: var(--font-script);
	font-weight: 700;
	font-size: 2.6rem;
	line-height: 1.05;
	color: var(--text);
}


.script-title::after,
.page-title::after {
	content: "";
	position: absolute;
	right: 6%;
	bottom: 1px;
	left: 6%;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--accent), transparent);
	border-radius: 2px;
	opacity: 0.5;
	transform: rotate(-0.8deg);
}

.scroll-thin::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.scroll-thin::-webkit-scrollbar-track {
	background: transparent;
}

.scroll-thin::-webkit-scrollbar-thumb {
	background: var(--border-strong);
	border-radius: 99px;
}

.scroll-thin::-webkit-scrollbar-thumb:hover {
	background: var(--text-faint);
}