loop-tokens.css

/* Loop Cam design tokens — isolated from upstream VDO.Ninja refresh variables */

:root {
	--loop-accent: #64c04d;
	--loop-accent-hover: #72cc58;
	--loop-accent-active: #58a843;
	--loop-accent-ink: #111;

	--loop-ui-bg: #171717;
	--loop-ui-surface: var(--discord-grey-7, #404249);
	--loop-ui-surface-raised: var(--discord-grey-5, #313338);
	--loop-ui-border: #4a4d55;
	--loop-ui-text: var(--discord-text, #e8eaed);
	--loop-ui-muted: #a8b0bd;
	--loop-ui-accent: var(--loop-accent);

	--loop-ui-radius-sm: 8px;
	--loop-ui-radius-md: 12px;
	--loop-ui-radius-lg: 16px;
	--loop-ui-radius-pill: 999px;
	--loop-ui-panel-width: min(480px, calc(100vw - 32px));
	--loop-ui-expanded-max: 560px;
	--loop-ui-close-size: 44px;
	--loop-ui-transition: 160ms cubic-bezier(0.22, 1, 0.36, 1);

	--loop-toolbar-cell: 45px;
	--loop-toolbar-gap: 5px;

	--loop-z-dropdown: 10;
	--loop-z-sticky: 20;
	--loop-z-modal-backdrop: 40;
	--loop-z-modal: 50;
	--loop-z-toast: 60;
}

/*
 * Dark-theme surface pin. DESIGN.md canonicalizes the Loop dark theme's
 * Surface (#404249, --discord-grey-7) and Surface Raised (#313338,
 * --discord-grey-5). Under prefers-color-scheme:dark, main.css softens those
 * shared greys to #3a3d45/#2f3237 ("soften Discord greys slightly"). The home
 * cards style their dark background as `.darktheme .card { background:
 * var(--discord-grey-7) }`, and the --loop-ui-* surface tokens fall back through
 * the same greys, so that softening drags every dark Loop surface off-spec.
 * Re-pin the two greys to canonical in the dark scheme so the cards and the
 * --loop-ui-* tokens resolve to the documented Surface values. This file loads
 * after main.css, so the override wins. Scope is the dark theme only: the
 * upstream light theme (.card -> --lighttheme-3) and main.css's other dark
 * softening (text, link, accent colors) are left untouched.
 */
@media (prefers-color-scheme: dark) {
	:root {
		--discord-grey-5: #313338;
		--discord-grey-7: #404249;
	}
}