@import url("https://assets.losno.co/fonts/inter/stylesheet.css");
@import url("https://assets.losno.co/fonts/IosevkaLoSnoCoNoLig/IosevkaLoSnoCoNoLig.css");

/*
	LoSnoCo — custom theme for GoToSocial (losnoco.net)
	====================================================
	Paste the entire contents of this file into:
	  Instance Settings → Appearance → Custom CSS

	GoToSocial injects this stylesheet AFTER its own sheets
	(_colors.css → base.css → page.css → about.css → index.css),
	so overriding the :root custom properties re-skins every
	public page. GTS derives its semantic colors from a raw
	palette (--gray1..8, --white1/2, --blue1..3, --orange1/2);
	CSS variables resolve live, so redefining the raw palette
	cascades into --bg, --fg, --link-fg, panels, borders, etc.

	Brand tokens (from the losnoco-design system):
	  orange       #F25E0D  action / primary button (always)
	  teal         #0DF2C9  accent + links — DARK surfaces only
	  teal-light   #00967F  accent + links — LIGHT surfaces
	  purple       #7B41B9  tags / annotations
	  page dark    #111C1A  · page light #F4F3F0
	  Inter LoSnoCo (UI) · Iosevka LoSnoCo (code / hostnames)
	Code surfaces stay dark in BOTH themes, by brand rule.
*/

/* ─────────────────────────────────────────────────────────────
   1. LoSnoCo helper tokens (fonts, radius, motion)
   ───────────────────────────────────────────────────────────── */
:root {
	--ls-sans: 'Inter LoSnoCo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ls-mono: 'Iosevka LoSnoCo NoLig', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

	/* LoSnoCo code palette — always dark */
	--ls-code-bg: #111C1A;
	--ls-code-inline-bg: #182926;
	--ls-code-border: #2F524B;
	--ls-code-text: #E5EFED;

	/* Motion */
	--dur-fast: 100ms;
	--dur-quick: 160ms;
	--dur-slow: 420ms;
	--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

	/* Rounding — GTS uses --br for panels/buttons */
	--br: 8px;
	--br-inner: 6px;
}

/* ─────────────────────────────────────────────────────────────
   2. Dark theme (GTS default) — cool teal-tinted near-black
   ───────────────────────────────────────────────────────────── */
:root {
	/* Text */
	--white1: #E5EFED;   /* --fg */
	--white2: #7A9E98;   /* --fg-reduced */
	--white:  #E5EFED;

	/* Surface ramp (gray1 darkest → gray8 lightest) */
	--gray1: #111C1A;    /* --bg / page */
	--gray2: #16211F;    /* code/quote bg in stock (code overridden below) */
	--gray3: #182926;    /* --status-bg */
	--gray4: #1E332F;    /* --input-bg, --profile-bg */
	--gray5: #243D38;    /* --bg-accent — card panels */
	--gray6: #2F524B;
	--gray7: #3A635B;
	--gray8: #46756B;

	/* Accent — teal (dark surfaces only) */
	--blue1: #0AA98C;    /* borders, input-border */
	--blue2: #0AC9A8;    /* all-round accent, role-mod */
	--blue3: #0DF2C9;    /* --fg-accent / --link-fg */

	/* Action — orange */
	--orange1: #F25E0D;  /* non-text accent, scrollbar, no-img-desc */
	--orange2: #FF7A33;  /* hover/selected accent, --border-accent, role-admin */

	--green1: #2ED9B8;   /* positive / confirmation */

	/* Errors, retinted to LoSnoCo */
	--error1: #3A1512;
	--error2: #E07060;
	--error3: #C0392B;

	/* Primary button = orange, white text (brand: at most once per view) */
	--button-bg: #F25E0D;
	--button-fg: #FFFFFF;
	--button-hover-bg: #D94E08;
	--button-focus-border: #FF7A33;

	/* Panels: real hairline border instead of stock bg-colored one */
	--boxshadow-border: 1px solid #243D38;
	--boxshadow: 0 0.4rem 1rem -0.2rem rgba(0, 0, 0, 0.35);

	/* Don't ring/recolor the header badge (it's the LoSnoCo mark) */
	--avatar-border: transparent;
}

/* ─────────────────────────────────────────────────────────────
   3. Light theme — warm off-white, teal-light accents
   ───────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
	:root {
		/* Text */
		--white1: #1A1917;   /* ink */
		--white2: #6B6A64;   /* reduced */
		--white:  #1A1917;

		/* Surface ramp (gray1 = page, gray5 = card panel, darker = visible) */
		--gray1: #F4F3F0;    /* --bg / page */
		--gray2: #EFEDE9;
		--gray3: #EAE8E2;
		--gray4: #E4E2DC;    /* --input-bg */
		--gray5: #ECEAE5;    /* --bg-accent — card panels */
		--gray6: #DEDBD4;
		--gray7: #CFCCC4;
		--gray8: #B8B5AE;

		/* Accent — teal-light (never full teal on light) */
		--blue1: #00967F;    /* borders, input-border */
		--blue2: #00806C;    /* all-round accent */
		--blue3: #00967F;    /* --fg-accent / --link-fg */

		/* Action — orange holds on light */
		--orange1: #F25E0D;
		--orange2: #D94E08;

		--green1: #22AA99;

		--error1: #FDF0EE;
		--error2: #C0392B;
		--error3: #C0392B;

		--button-bg: #F25E0D;
		--button-fg: #FFFFFF;
		--button-hover-bg: #D94E08;
		--button-focus-border: #D94E08;

		--boxshadow-border: 1px solid #D8D5CE;
		--boxshadow: 0 0.4rem 1rem -0.3rem rgba(26, 25, 23, 0.12);

		--avatar-border: transparent;
	}
}

/* ─────────────────────────────────────────────────────────────
   4. Typography — Inter LoSnoCo everywhere GTS hardcoded Noto Sans
   ───────────────────────────────────────────────────────────── */
html, body,
.button, button,
input, select, textarea, .input {
	font-family: var(--ls-sans);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ls-sans);
	letter-spacing: -0.01em;
}

.page-header > a h1,
.page-header > a > h1 {
	font-weight: 800;
	letter-spacing: -0.02em;
}

/* ─────────────────────────────────────────────────────────────
   5. Code surfaces — always dark, in BOTH themes (brand rule)
   ───────────────────────────────────────────────────────────── */
code, kbd, .monospace, .hostname,
.page-header .trusted-proxies-rec code {
	font-family: var(--ls-mono);
	background: var(--ls-code-inline-bg);
	color: var(--ls-code-text);
	border-radius: 3px;
	padding: 0.1em 0.4em;
}

pre {
	font-family: var(--ls-mono);
	background: var(--ls-code-bg);
	color: var(--ls-code-text);
	border: 1px solid var(--ls-code-border);
	border-radius: var(--br);
	padding: 1rem;
	overflow-x: auto;
}
pre code {
	background: none;
	padding: 0;
	border-radius: 0;
}

/* Keep Prism-highlighted blocks dark on light pages too */
code[class*="language-"],
pre[class*="language-"] {
	background: var(--ls-code-bg);
	color: var(--ls-code-text);
	text-shadow: none;
}
pre[class*="language-"] {
	border: 1px solid var(--ls-code-border);
	border-radius: var(--br);
}

/* ─────────────────────────────────────────────────────────────
   6. Structural refinements
   ───────────────────────────────────────────────────────────── */

/* Header badge: present the instance avatar cleanly, never recolour it */
.page-header > a img,
.page-header > a picture {
	border-radius: var(--br);
}

/* Instance user/post/peer counts pop in the accent colour (default GTS) */
.page-header aside .count {
	font-weight: 700;
}

/* Primary "Log in" button — the single orange action on the landing */
.login .button {
	box-shadow: var(--boxshadow);
}

/* Footer nav links */
.page-footer nav ul li a {
	font-weight: 700;
}

/* Links: subtle brand hover */
a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────
   7. Motion — applied, and opt-out honoured (brand rule 10)
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
	a,
	.button, button,
	input, select, textarea {
		transition:
			color var(--dur-quick) var(--ease-out),
			background-color var(--dur-quick) var(--ease-out),
			border-color var(--dur-quick) var(--ease-out),
			box-shadow var(--dur-quick) var(--ease-out),
			transform var(--dur-quick) var(--ease-out);
	}

	.button:active, button:active {
		transform: translateY(1px);
	}

	/* Section cards rise in on load, lightly staggered */
	@keyframes ls-rise-in {
		from { opacity: 0; transform: translateY(6px); }
		to   { opacity: 1; transform: translateY(0); }
	}
	.about .about-section {
		animation: ls-rise-in var(--dur-slow) var(--ease-out) both;
	}
	.about .about-section:nth-child(2) { animation-delay: 60ms; }
	.about .about-section:nth-child(3) { animation-delay: 120ms; }
	.about .about-section:nth-child(4) { animation-delay: 180ms; }
}