/*
  Susgee Design System — shared tokens + seasonal themes
  Hosted at: https://susgee.dev/susgee-theme.css
  Script:    https://susgee.dev/susgee-theme.js
  Design docs: https://susgee.dev/design

  Used by: susgee-dash, susgee-emotes, susgee-history,
           susgee-logs, susgee-paste-next, susgee-uploader

  Load via:
    <link rel="stylesheet" href="https://susgee.dev/susgee-theme.css" />
    <script src="https://susgee.dev/susgee-theme.js"></script>
*/

:root {
	/* Surfaces */
	--surface-canvas: #0b0714;
	--surface-overlay: #0d0916;
	--surface-inset: #130f1d;
	--surface-panel: #1a1426;
	--surface-raised: #241d33;
	--accent: #2a2238;

	/* Ink */
	--ink-bright: #f2eff7;
	--ink: #cfcfcf;
	--ink-muted: #9a949f;
	--ink-faint: #7f7987;

	/* Lines */
	--line: #2d2540;
	--line-soft: #221b30;
	--line-strong: #3d3453;

	/* Color */
	--primary: #b87fed;
	--primary-60: #78549d;
	--primary-30: #493462;
	--primary-dark: #601e9e;
	--primary-20: color-mix(in srgb, var(--primary) 20%, transparent);
	--primary-10: color-mix(in srgb, var(--primary) 10%, transparent);
	--twitch: #6441a5;
	--twitch-dark: #5a3a94;
	--ring: #b87fed;
	--danger: #e0555b;
	--danger-surface: #3a1f26;
	--danger-border: #6b2f38;
	--destructive: #c73a44;
	--destructive-foreground: #ffffff;
	--success: #3fb27f;
	--success-surface: #16321f;
	--warning: #ffc107;

	/* Radius */
	--radius-panel: 1rem;
	--radius-control: 0.75rem;
	--radius-chip: 0.5rem;
	--radius-full: 9999px;

	/* Motion */
	--motion-duration: 400ms;
	--motion-duration-out: 200ms;
	--motion-ease: cubic-bezier(0, 0, 0.2, 1);
	--motion-stagger: 100ms;

	/* Gradients */
	--gradient-text: linear-gradient(145deg, #b87fed 0%, #601e9e 100%);
	--gradient-bg: linear-gradient(145deg, #06040c 0%, #100a1c 100%);

	/* RGB channels for Tailwind: rgb(var(--sg-rgb-primary) / <alpha>) */
	--sg-rgb-primary: 184 127 237;
	--sg-rgb-primary-30: 73 52 98;
	--sg-rgb-primary-60: 120 84 157;
	--sg-rgb-primary-dark: 96 30 158;
	--sg-rgb-ink-bright: 242 239 247;
	--sg-rgb-ink: 207 207 207;
	--sg-rgb-ink-muted: 154 148 159;
	--sg-rgb-ink-faint: 127 121 135;
	--sg-rgb-surface-canvas: 11 7 20;
	--sg-rgb-surface-inset: 19 15 29;
	--sg-rgb-surface-panel: 26 20 38;
	--sg-rgb-surface-raised: 36 29 51;
	--sg-rgb-surface-overlay: 13 9 22;
	--sg-rgb-line-soft: 34 27 48;
	--sg-rgb-line: 45 37 64;
	--sg-rgb-line-strong: 61 52 83;
	--sg-rgb-twitch: 100 65 165;
	--sg-rgb-twitch-dark: 90 58 148;
	--sg-rgb-ring: 184 127 237;
	--sg-rgb-input: 45 37 64;
	--sg-rgb-accent: 42 34 56;
	--sg-rgb-accent-foreground: 242 239 247;
	--sg-rgb-danger: 224 85 91;
	--sg-rgb-danger-surface: 58 31 38;
	--sg-rgb-danger-border: 107 47 56;
	--sg-rgb-destructive: 199 58 68;
	--sg-rgb-destructive-foreground: 255 255 255;
	--sg-rgb-success: 63 178 127;
	--sg-rgb-success-surface: 22 50 31;
}

/* —— Seasonal: Halloween (October) —— */
html[data-theme='halloween'] {
	--primary: #f08a2e;
	--primary-60: #a85a28;
	--primary-30: #4a2a1c;
	--primary-dark: #c45a12;
	--ring: #f08a2e;

	--ink-bright: #f7f0e8;
	--ink: #cfc8be;
	--ink-muted: #9e948a;
	--ink-faint: #7f766c;

	--surface-canvas: #0a0608;
	--surface-inset: #140c0e;
	--surface-panel: #1c1012;
	--surface-raised: #261614;
	--surface-overlay: #0c080a;
	--accent: #2a1816;

	--line-soft: #281816;
	--line: #382420;
	--line-strong: #4a3028;

	--gradient-text: linear-gradient(145deg, #f08a2e 0%, #6b2d8a 100%);
	--gradient-bg: linear-gradient(145deg, #080406 0%, #1a0c14 100%);

	--sg-rgb-primary: 240 138 46;
	--sg-rgb-primary-30: 74 42 28;
	--sg-rgb-primary-60: 168 90 40;
	--sg-rgb-primary-dark: 196 90 18;
	--sg-rgb-ink-bright: 247 240 232;
	--sg-rgb-ink: 207 200 190;
	--sg-rgb-ink-muted: 158 148 138;
	--sg-rgb-ink-faint: 127 118 108;
	--sg-rgb-surface-canvas: 10 6 8;
	--sg-rgb-surface-inset: 20 12 14;
	--sg-rgb-surface-panel: 28 16 18;
	--sg-rgb-surface-raised: 38 22 20;
	--sg-rgb-surface-overlay: 12 8 10;
	--sg-rgb-line-soft: 40 24 22;
	--sg-rgb-line: 56 36 32;
	--sg-rgb-line-strong: 74 48 40;
	--sg-rgb-ring: 240 138 46;
	--sg-rgb-input: 56 36 32;
	--sg-rgb-accent: 42 24 22;
	--sg-rgb-accent-foreground: 247 240 232;
}

/* —— Seasonal: Christmas (December) —— */
html[data-theme='christmas'] {
	--primary: #c23a3a;
	--primary-60: #963438;
	--primary-30: #481c20;
	--primary-dark: #94242a;
	--ring: #c23a3a;

	--ink-bright: #f4f2ec;
	--ink: #ced0cc;
	--ink-muted: #949c98;
	--ink-faint: #76807c;

	--surface-canvas: #060c0e;
	--surface-inset: #0a1214;
	--surface-panel: #0e181c;
	--surface-raised: #142226;
	--surface-overlay: #080e10;
	--accent: #182824;

	--line-soft: #182428;
	--line: #243438;
	--line-strong: #34484c;

	--gradient-text: linear-gradient(145deg, #e8c547 0%, #c23a3a 55%, #2f8f5b 100%);
	--gradient-bg: linear-gradient(145deg, #040a0c 0%, #0c1a16 100%);

	--sg-rgb-primary: 194 58 58;
	--sg-rgb-primary-30: 72 28 32;
	--sg-rgb-primary-60: 150 52 56;
	--sg-rgb-primary-dark: 148 36 42;
	--sg-rgb-ink-bright: 244 242 236;
	--sg-rgb-ink: 206 208 204;
	--sg-rgb-ink-muted: 148 156 152;
	--sg-rgb-ink-faint: 118 128 124;
	--sg-rgb-surface-canvas: 6 12 14;
	--sg-rgb-surface-inset: 10 18 20;
	--sg-rgb-surface-panel: 14 24 28;
	--sg-rgb-surface-raised: 20 34 38;
	--sg-rgb-surface-overlay: 8 14 16;
	--sg-rgb-line-soft: 24 36 40;
	--sg-rgb-line: 36 52 56;
	--sg-rgb-line-strong: 52 72 76;
	--sg-rgb-ring: 194 58 58;
	--sg-rgb-input: 36 52 56;
	--sg-rgb-accent: 24 40 36;
	--sg-rgb-accent-foreground: 244 242 236;
}

/* Shared faces helpers */
.gradient-text {
	color: transparent;
	background-image: var(--gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
}

.data {
	font-family: var(--font-jetbrains-mono, var(--font-mono, var(--font-data))),
		ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.875em;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	font-weight: inherit;
}

.eyebrow {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.halloween-only,
.christmas-only {
	display: none;
}

html[data-theme='halloween'] .halloween-only,
html[data-theme='christmas'] .christmas-only {
	display: block;
}

html[data-theme='halloween'] .halloween-only--flex,
html[data-theme='christmas'] .christmas-only--flex {
	display: flex;
}

html[data-theme='halloween'] .bg-surface-panel,
html[data-theme='halloween'] .bg-surface-raised {
	animation: halloween-panel-glow 5.5s ease-in-out infinite;
}

/* Seasonal atmosphere shell */
.seasonal-atmosphere {
	pointer-events: none;
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	display: none;
}

html[data-theme='halloween'] .seasonal-atmosphere--halloween,
html[data-theme='christmas'] .seasonal-atmosphere--christmas {
	display: block;
}

.seasonal-atmosphere__fog {
	position: absolute;
	inset: auto 0 0;
	height: 42%;
}

.seasonal-atmosphere__fog--halloween {
	background: linear-gradient(
		to top,
		rgb(240 138 46 / 0.08) 0%,
		rgb(107 45 138 / 0.04) 40%,
		transparent 100%
	);
}

.seasonal-atmosphere__fog--christmas {
	background: linear-gradient(
		to top,
		rgb(160 48 42 / 0.14) 0%,
		rgb(194 90 40 / 0.08) 28%,
		rgb(47 143 91 / 0.04) 55%,
		transparent 100%
	);
}

.seasonal-atmosphere__glow--christmas {
	position: absolute;
	inset: auto 0 0;
	height: 28%;
	background: radial-gradient(
		ellipse 90% 100% at 50% 100%,
		rgb(194 58 58 / 0.18) 0%,
		rgb(212 140 40 / 0.08) 42%,
		transparent 72%
	);
	animation: christmas-warmth 7s ease-in-out infinite alternate;
}

.seasonal-atmosphere__orb {
	position: absolute;
	border-radius: 9999px;
	filter: blur(48px);
	opacity: 0.35;
	animation: seasonal-drift 22s ease-in-out infinite alternate;
}

.seasonal-atmosphere__orb--halloween-a {
	top: 12%;
	left: -6%;
	width: 18rem;
	height: 18rem;
	background: rgb(240 138 46 / 0.18);
}

.seasonal-atmosphere__orb--halloween-b {
	top: 48%;
	right: -8%;
	width: 22rem;
	height: 22rem;
	background: rgb(107 45 138 / 0.16);
	animation-duration: 28s;
	animation-delay: -6s;
}

.seasonal-atmosphere__orb--halloween-c {
	bottom: 8%;
	left: 35%;
	width: 14rem;
	height: 14rem;
	background: rgb(196 90 18 / 0.12);
	animation-duration: 26s;
	animation-delay: -12s;
}

.seasonal-atmosphere__orb--christmas-a {
	top: 10%;
	left: -6%;
	width: 18rem;
	height: 18rem;
	background: rgb(194 58 58 / 0.16);
}

.seasonal-atmosphere__orb--christmas-b {
	top: 46%;
	right: -8%;
	width: 22rem;
	height: 22rem;
	background: rgb(47 143 91 / 0.14);
	animation-duration: 28s;
	animation-delay: -6s;
}

.seasonal-atmosphere__orb--christmas-c {
	bottom: 8%;
	left: 35%;
	width: 14rem;
	height: 14rem;
	background: rgb(232 197 71 / 0.1);
	animation-duration: 26s;
	animation-delay: -12s;
}

.seasonal-atmosphere__bat {
	position: absolute;
	width: 1.25rem;
	height: 0.55rem;
	background: rgb(20 12 14 / 0.55);
	border-radius: 50% 50% 40% 40%;
	opacity: 0.45;
	animation: seasonal-bat 18s linear infinite;
}

.seasonal-atmosphere__bat::before,
.seasonal-atmosphere__bat::after {
	content: '';
	position: absolute;
	top: 0;
	width: 0.7rem;
	height: 0.55rem;
	background: inherit;
	border-radius: 50% 10% 50% 50%;
}

.seasonal-atmosphere__bat::before {
	left: -0.45rem;
	transform: rotate(-18deg);
}

.seasonal-atmosphere__bat::after {
	right: -0.45rem;
	transform: scaleX(-1) rotate(-18deg);
}

.seasonal-atmosphere__bat--1 {
	top: 18%;
	left: 10%;
	animation-duration: 20s;
}

.seasonal-atmosphere__bat--2 {
	top: 32%;
	left: 55%;
	animation-duration: 24s;
	animation-delay: -8s;
	transform: scale(0.85);
}

.seasonal-atmosphere__bat--3 {
	top: 22%;
	left: 78%;
	animation-duration: 22s;
	animation-delay: -14s;
	transform: scale(0.7);
}

.seasonal-atmosphere__pumpkin {
	position: absolute;
	opacity: 0.55;
	filter: drop-shadow(0 0 12px rgb(240 138 46 / 0.25));
}

.seasonal-atmosphere__pumpkin--left {
	bottom: 6%;
	left: 4%;
	width: 3.5rem;
	animation: seasonal-bob 5s ease-in-out infinite;
}

.seasonal-atmosphere__pumpkin--right {
	bottom: 10%;
	right: 6%;
	width: 2.75rem;
	opacity: 0.4;
	animation: seasonal-bob-flip 6s ease-in-out infinite;
	animation-delay: -2s;
}

.seasonal-atmosphere__tree {
	position: absolute;
	opacity: 0.5;
	filter: drop-shadow(0 0 12px rgb(47 143 91 / 0.25));
}

.seasonal-atmosphere__tree--left {
	bottom: 5%;
	left: 3%;
	width: 3.75rem;
	animation: seasonal-bob 5s ease-in-out infinite;
}

.seasonal-atmosphere__tree--right {
	bottom: 8%;
	right: 4%;
	width: 3rem;
	opacity: 0.4;
	animation: seasonal-bob-flip 6s ease-in-out infinite;
	animation-delay: -2s;
}

.seasonal-atmosphere__snow {
	position: absolute;
	inset: 0;
}

.seasonal-atmosphere__flake {
	position: absolute;
	top: -10%;
	border-radius: 9999px;
	background: rgb(244 242 236 / 0.85);
	box-shadow: 0 0 4px rgb(244 242 236 / 0.35);
	animation-name: seasonal-snow;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes seasonal-drift {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(2.5rem, -1.5rem, 0);
	}
}

@keyframes seasonal-bat {
	0% {
		transform: translate3d(0, 0, 0);
		opacity: 0;
	}
	10% {
		opacity: 0.45;
	}
	50% {
		transform: translate3d(12vw, -3vh, 0);
	}
	90% {
		opacity: 0.35;
	}
	100% {
		transform: translate3d(28vw, 1vh, 0);
		opacity: 0;
	}
}

@keyframes seasonal-bob {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-0.35rem);
	}
}

@keyframes seasonal-bob-flip {
	0%,
	100% {
		transform: scaleX(-1) translateY(0);
	}
	50% {
		transform: scaleX(-1) translateY(-0.35rem);
	}
}

@keyframes seasonal-snow {
	0% {
		transform: translate3d(0, -5vh, 0);
		opacity: 0;
	}
	8% {
		opacity: 1;
	}
	100% {
		transform: translate3d(var(--snow-drift, 2vw), 115vh, 0);
		opacity: 0.2;
	}
}

@keyframes halloween-panel-glow {
	0%,
	100% {
		box-shadow: inset 0 0 0 0 transparent;
	}
	50% {
		box-shadow: inset 0 0 28px rgb(240 138 46 / 0.045);
	}
}

@keyframes christmas-warmth {
	from {
		opacity: 0.75;
	}
	to {
		opacity: 1;
	}
}

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

	.seasonal-atmosphere__orb,
	.seasonal-atmosphere__bat,
	.seasonal-atmosphere__pumpkin,
	.seasonal-atmosphere__tree,
	.seasonal-atmosphere__flake,
	.seasonal-atmosphere__glow--christmas {
		animation: none;
	}

	html[data-theme='halloween'] .bg-surface-panel,
	html[data-theme='halloween'] .bg-surface-raised {
		animation: none;
	}
}


/* Foreground props above page shells (content is often z-10) */
.seasonal-props {
	pointer-events: none;
	position: fixed;
	inset: 0;
	z-index: 6;
	overflow: hidden;
}

/* —— Cosmetics: webs, snowflakes, interactive effects —— */
.seasonal-atmosphere__web {
	position: absolute;
	top: 0;
	width: 7rem;
	height: 7rem;
	color: var(--ink-faint);
	opacity: 0.35;
	pointer-events: none;
}

@media (min-width: 768px) {
	.seasonal-atmosphere__web {
		width: 10rem;
		height: 10rem;
	}
}

.seasonal-atmosphere__web--left {
	left: 0;
}

.seasonal-atmosphere__web--right {
	right: 0;
	transform: scaleX(-1);
	opacity: 0.25;
}

.seasonal-atmosphere__pumpkin svg,
.seasonal-atmosphere__tree svg {
	display: block;
	width: 100%;
	height: auto;
}

.seasonal-atmosphere__snowflake-deco {
	position: absolute;
	color: var(--ink-faint);
	pointer-events: none;
}

.seasonal-atmosphere__snowflake-deco svg {
	display: block;
	width: 100%;
	height: 100%;
}

.seasonal-atmosphere__snowflake-deco--1 {
	top: 12%;
	left: 6%;
	width: 1.25rem;
	opacity: 0.4;
}

.seasonal-atmosphere__snowflake-deco--2 {
	top: 24%;
	right: 10%;
	width: 1rem;
	opacity: 0.3;
}

.seasonal-atmosphere__snowflake-deco--3 {
	top: 38%;
	left: 14%;
	width: 0.75rem;
	opacity: 0.25;
}

.halloween-eyes {
	position: fixed;
	z-index: 7;
	display: flex;
	gap: 0.55rem;
	pointer-events: none;
	animation: halloween-eyes-blink 1.5s ease-in-out both;
}

.halloween-eyes span {
	width: 0.42rem;
	height: 0.28rem;
	border-radius: 9999px;
	background: #f0c14a;
	box-shadow:
		0 0 6px #f08a2e,
		0 0 14px rgb(240 138 46 / 0.7);
}

.halloween-trail {
	position: fixed;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	overflow: hidden;
}

.halloween-trail__dot {
	position: fixed;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 9999px;
	background: radial-gradient(circle, rgb(240 138 46 / 0.55) 0%, rgb(107 45 138 / 0.2) 55%, transparent 72%);
	filter: blur(1px);
	transition: opacity 0.4s ease;
}

.christmas-shooting-star {
	position: fixed;
	z-index: 7;
	width: 7rem;
	height: 2px;
	pointer-events: none;
	border-radius: 9999px;
	background: linear-gradient(90deg, transparent, #e8c547 35%, #fff6c8 70%, transparent);
	box-shadow: 0 0 10px rgb(232 197 71 / 0.65);
	transform: rotate(-18deg);
	animation: christmas-shooting-star 1.15s ease-out both;
}

@keyframes halloween-eyes-blink {
	0% {
		opacity: 0;
		transform: scale(0.7);
	}
	18% {
		opacity: 1;
		transform: scale(1);
	}
	70% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: scale(0.85);
	}
}

@keyframes christmas-shooting-star {
	0% {
		opacity: 0;
		transform: rotate(-18deg) translate3d(0, 0, 0) scaleX(0.4);
	}
	15% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: rotate(-18deg) translate3d(28vw, 10vh, 0) scaleX(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.halloween-eyes,
	.christmas-shooting-star {
		animation: none;
	}
}