/* =========================================================
   Roxy Proxy Homepage – Dark Material Style
   Reuses dashboard color tokens for seamless design parity
   ========================================================= */

/* ======= COLOR SYSTEM ======= */
:root {
	--color-surface0: #0b0f14;
	--color-surface1: #11161d;
	--color-surface2: #151b23;
	--color-surface3: #1a212b;
	--color-primary: #7cc4ff;
	--color-primary-strong: #9bd3ff;
	--color-on-primary: #03131f;
	--color-text: #d9e2ee;
	--color-text-dim: #a8b3c2;
	--color-text-muted: #7a8797;
	--color-outline: #26313f;
	--color-outline-strong: #334357;
	--color-hover: rgba(124, 196, 255, 0.12);
	--color-press: rgba(124, 196, 255, 0.18);
	--shadow-color: 0, 0, 0;

	--radius-sm: 10px;
	--radius-md: 16px;
	--radius-lg: 20px;
	--pad-1: 8px;
	--pad-2: 12px;
	--pad-3: 16px;
	--pad-4: 24px;
	--pad-5: 32px;

	--fs-sm: 13px;
	--fs-md: 15px;
	--fs-lg: 18px;
	--fs-xl: 22px;
	--fs-xxl: 30px;
	--font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";

	--dur-fast: 120ms;
	--dur-med: 200ms;
	--easing: cubic-bezier(0.2, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
	}
}

/* ======= BASE ======= */
* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	background: var(--color-surface0);
	color: var(--color-text);
	line-height: 1.55;
	overflow-x: hidden;
}

a {
	color: var(--color-primary-strong);
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

/* ======= APP BAR ======= */
.app-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--pad-4);
	background: linear-gradient(180deg, var(--color-surface2), var(--color-surface1));
	border-bottom: 1px solid var(--color-outline);
	box-shadow: 0 2px 14px rgba(var(--shadow-color), 0.4);
	position: sticky;
	top: 0;
	z-index: 10;
}
.app-title {
	margin: 0;
	font-size: var(--fs-xxl);
	font-weight: 700;
	color: var(--color-primary);
	letter-spacing: 0.3px;
}

/* ======= LAYOUT ======= */
.main {
	max-width: 900px;
	margin: 0 auto;
	padding: var(--pad-5) var(--pad-4) 120px;
	display: grid;
	gap: var(--pad-5);
}
.section {
	display: grid;
	gap: var(--pad-3);
	background: var(--color-surface1);
	border-radius: var(--radius-lg);
	padding: var(--pad-4);
	border: 1px solid var(--color-outline);
	box-shadow: 0 8px 28px rgba(var(--shadow-color), 0.35);
}
.section__title {
	margin: 0;
	font-size: var(--fs-xl);
	font-weight: 600;
	color: var(--color-primary-strong);
}
.section__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--pad-2);
}
.lead {
	font-size: var(--fs-lg);
	color: var(--color-text-dim);
	margin-bottom: var(--pad-3);
}

/* ======= CODE BLOCKS ======= */
pre,
code {
	font-family: "JetBrains Mono", Consolas, monospace;
	background: var(--color-surface3);
	color: var(--color-primary-strong);
}
pre {
	padding: var(--pad-3);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-outline);
	overflow-x: auto;
	font-size: var(--fs-sm);
	line-height: 1.5;
}
pre.example {
	background: #0f141b;
}
pre.output {
	background: #111a22;
	color: var(--color-text);
}
code {
	padding: 2px 4px;
	border-radius: 6px;
}

/* ======= COLLAPSIBLE SECTIONS ======= */
.collapsible {
	overflow: hidden;
	max-height: 2000px;
	opacity: 1;
	transition: max-height var(--dur-med) var(--easing), opacity var(--dur-med) var(--easing);
}
.collapsible:not(.is-open) {
	max-height: 0;
	opacity: 0;
	pointer-events: none;
}
.collapsible-toggle {
	min-width: 100px;
}

/* ======= BUTTONS ======= */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	border-radius: 999px;
	border: 1px solid var(--color-outline);
	color: var(--color-text);
	background: transparent;
	cursor: pointer;
	font-size: var(--fs-md);
	transition: background var(--dur-med) var(--easing), transform var(--dur-fast) var(--easing);
}
.btn:hover {
	background: var(--color-hover);
}
.btn--tonal {
	background: rgba(154, 169, 190, 0.18);
	border-color: var(--color-outline-strong);
}
.btn--filled {
	background: var(--color-primary);
	color: var(--color-on-primary);
	border: none;
}
.btn--filled:hover {
	background: color-mix(in oklab, var(--color-primary) 88%, white 12%);
}

/* ======= SAFETY / WARNING BLOCKS ======= */
.warning {
	border-left: 4px solid var(--color-danger, #ff6b6b);
	padding-left: var(--pad-3);
	color: var(--color-text-dim);
	font-size: var(--fs-md);
}

/* ======= SAFETY / WARNING BLOCKS ======= */
.light--warning {
	border-left: 4px solid var(--color-danger, #f5ff6b);
	padding-left: var(--pad-3);
	color: var(--color-text-dim);
	font-size: var(--fs-md);
}

/* ======= FOOTER ======= */
.footer {
	text-align: center;
	padding: var(--pad-4);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	border-top: 1px solid var(--color-outline);
	background: var(--color-surface1);
	box-shadow: 0 -2px 14px rgba(var(--shadow-color), 0.4);
}

/* ======= UTILITIES ======= */
hr {
	border: none;
	border-top: 1px solid var(--color-outline);
	margin: var(--pad-3) 0;
}