/**
 * CoreBox design system.
 *
 * Tokens + light/dark, scoped under #corebox-app and .corebox-admin so the
 * system neither leaks into the host theme nor gets overridden by it.
 *
 * Palette is deliberately distinct from techBox (which owns navy-black):
 * a neutral graphite dark with no blue cast, a light slate counterpart, and a
 * single emerald signal accent for money / health / status.
 */

#corebox-app,
.corebox-admin {
	/* Accent — the one signal colour. */
	--cbx-accent: #0e9f6e;
	--cbx-accent-strong: #0b7d57;
	--cbx-accent-soft: rgba(14, 159, 110, 0.12);

	/* Status. */
	--cbx-success: #0e9f6e;
	--cbx-warning: #c77700;
	--cbx-danger: #d64545;
	--cbx-info: #3f6ad8;

	/* Radii + elevation. */
	--cbx-radius-sm: 7px;
	--cbx-radius: 10px;
	--cbx-radius-lg: 14px;
	--cbx-shadow: 0 1px 2px rgba(16, 18, 20, 0.06), 0 6px 18px rgba(16, 18, 20, 0.06);
	--cbx-shadow-sm: 0 1px 2px rgba(16, 18, 20, 0.08);

	/* Type. */
	--cbx-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--cbx-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Spacing scale. */
	--cbx-gap: 16px;
	--cbx-gap-lg: 24px;
}

/* ---- Light (default) ---- */
#corebox-app[data-theme="light"],
.corebox-admin {
	--cbx-bg: #f5f6f8;
	--cbx-surface: #ffffff;
	--cbx-surface-2: #fafbfc;
	--cbx-text: #1b1e22;
	--cbx-muted: #5c646e;
	--cbx-faint: #8a929c;
	--cbx-border: #e4e7ec;
	--cbx-border-strong: #d3d8de;
}

/* ---- Dark: neutral graphite grey, no navy ---- */
#corebox-app[data-theme="dark"] {
	--cbx-bg: #1b1d1f;
	--cbx-surface: #242729;
	--cbx-surface-2: #2b2e31;
	--cbx-text: #e8eaec;
	--cbx-muted: #a2a8ae;
	--cbx-faint: #757b81;
	--cbx-border: #34383c;
	--cbx-border-strong: #41464b;
	--cbx-accent: #16b57e;
	--cbx-accent-strong: #34c793;
	--cbx-accent-soft: rgba(22, 181, 126, 0.16);
	--cbx-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 22px rgba(0, 0, 0, 0.35);
	--cbx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Honour OS preference when the operator picked "dark" as default is handled
   in JS; this keeps an unset app readable if JS is blocked. */
@media (prefers-color-scheme: dark) {
	#corebox-app:not([data-theme]) {
		--cbx-bg: #1b1d1f;
		--cbx-surface: #242729;
		--cbx-surface-2: #2b2e31;
		--cbx-text: #e8eaec;
		--cbx-muted: #a2a8ae;
		--cbx-faint: #757b81;
		--cbx-border: #34383c;
		--cbx-border-strong: #41464b;
	}
}

/* ---- Shared primitives ---- */
.corebox-mono {
	font-family: var(--cbx-mono);
	font-variant-numeric: tabular-nums;
}

.corebox-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: 999px;
	vertical-align: middle;
}
.corebox-badge--free {
	background: var(--cbx-surface-2);
	color: var(--cbx-muted);
	border: 1px solid var(--cbx-border);
}
.corebox-badge--pro {
	background: var(--cbx-accent-soft);
	color: var(--cbx-accent-strong);
	border: 1px solid transparent;
}

.corebox-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font: inherit;
	font-weight: 600;
	line-height: 1;
	padding: 10px 18px;
	border-radius: var(--cbx-radius-sm);
	border: 1px solid var(--cbx-border-strong);
	background: var(--cbx-surface);
	color: var(--cbx-text);
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.corebox-btn:hover { background: var(--cbx-surface-2); }
.corebox-btn:active { transform: translateY(1px); }
.corebox-btn--primary {
	background: var(--cbx-accent);
	border-color: var(--cbx-accent);
	color: #fff;
}
.corebox-btn--primary:hover { background: var(--cbx-accent-strong); border-color: var(--cbx-accent-strong); }

.corebox-btn:focus-visible,
.corebox-nav__item:focus-visible,
.corebox-app__theme:focus-visible {
	outline: 2px solid var(--cbx-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.corebox-btn,
	.corebox-nav__item,
	.corebox-app__side { transition: none; }
}