/* file: assets/css/theme.css */

:root {
	--spesen-primary: #2563eb;
	--spesen-primary-hover: #1d4ed8;
	--spesen-accent: #f97316;
	--spesen-success: #16a34a;
	--spesen-danger: #dc2626;
	--spesen-bg: #f8fafc;
	--spesen-surface: #ffffff;
	--spesen-text: #0f172a;
	--spesen-muted: #64748b;
	--spesen-border: #e2e8f0;
	--spesen-radius: 12px;
	--spesen-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
	--spesen-font: "Segoe UI", system-ui, -apple-system, sans-serif;
}

.dark {
	--spesen-bg: #0b1220;
	--spesen-surface: #111827;
	--spesen-text: #f8fafc;
	--spesen-muted: #94a3b8;
	--spesen-border: #1f2937;
	--spesen-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--spesen-font);
	background: var(--spesen-bg);
	color: var(--spesen-text);
	line-height: 1.6;
}

a { color: var(--spesen-primary); }

.spesen-container {
	width: min(1120px, calc(100% - 32px));
	margin: 0 auto;
}

.spesen-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.spesen-btn:hover { transform: translateY(-1px); }

.spesen-btn-primary {
	background: var(--spesen-primary);
	color: #fff;
}

.spesen-btn-primary:hover {
	background: var(--spesen-primary-hover);
	color: #fff;
}

.spesen-btn-secondary {
	background: transparent;
	border-color: var(--spesen-border);
	color: var(--spesen-text);
}

.spesen-btn-ghost {
	background: transparent;
	color: var(--spesen-text);
}

.spesen-badge {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(37, 99, 235, 0.12);
	color: var(--spesen-primary);
	font-size: 0.875rem;
	font-weight: 600;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.spesen-honeypot {
	position: absolute;
	left: -9999px;
	opacity: 0;
	height: 0;
	width: 0;
}

.spesen-notice {
	padding: 12px 16px;
	border-radius: var(--spesen-radius);
	margin-bottom: 16px;
}

.spesen-notice-success {
	background: rgba(22, 163, 74, 0.12);
	color: var(--spesen-success);
}

.spesen-prose h1,
.spesen-prose h2 { margin-top: 1.5em; }