/* pierre's -override properties must land on the diffs-container element
   itself, its :host stylesheet beats inheriting from a wrapper. these rules
   must stay UNLAYERED: pierre injects its :host stylesheet unlayered, which
   beats anything in @layer. the doubled class lifts specificity above it
   regardless of order */

diffs-container.diffs-container {
	--diffs-font-family: var(--font-mono);
	--diffs-font-size: 0.875rem;
	--diffs-line-height: 1.5;
	/* the "tangled" theme (pierre.ts) binds --diffs-bg/--diffs-fg to these and
	   forces color-scheme: dark. without them the bg chain goes
	   guaranteed-invalid and light-dark() is stuck on the dark branch */
	--diffs-background: var(--color-background-default);
	--diffs-foreground: #4c4f69;
	color-scheme: light dark;
	--diffs-light-bg: var(--color-background-default);
	--diffs-dark-bg: var(--color-background-default);
	--diffs-bg-separator-override: var(--color-background-inset);
	--diffs-fg-number-override: var(--color-foreground-placeholder);

	/* pierre blends line backgrounds 88/12 (light) toward these, so they must
	   be the saturated tokens. the *-color overrides drive the indicators and
	   number gutter */
	--diffs-bg-addition-override: var(--color-foreground-success);
	--diffs-bg-deletion-override: var(--color-foreground-danger);
	--diffs-addition-color-override: var(--color-foreground-success-strong);
	--diffs-deletion-color-override: var(--color-foreground-danger-strong);

	/* syntax palette — catppuccin latte */
	--diffs-token-comment: #7c7f93; /* overlay2 */
	--diffs-token-string: #40a02b; /* green */
	--diffs-token-string-expression: #40a02b; /* green */
	--diffs-token-keyword: #8839ef; /* mauve */
	--diffs-token-function: #1e66f5; /* blue */
	--diffs-token-constant: #fe640b; /* peach */
	--diffs-token-parameter: #e64553; /* maroon */
	--diffs-token-punctuation: #7c7f93; /* overlay2 */
	--diffs-token-link: #1e66f5; /* blue */
	--diffs-token-inserted: #40a02b; /* green */
	--diffs-token-deleted: #d20f39; /* red */
	--diffs-token-changed: #df8e1d; /* yellow */
}

@media (prefers-color-scheme: dark) {
	diffs-container.diffs-container {
		--diffs-fg-number-override: var(--color-foreground-subtle);

		/* the dark blend is 80/20, hence the subtle backgrounds */
		--diffs-bg-addition-override: var(--color-background-success-subtle);
		--diffs-bg-deletion-override: var(--color-background-danger-subtle);
		--diffs-addition-color-override: var(--color-foreground-success);
		--diffs-deletion-color-override: var(--color-foreground-danger);

		/* catppuccin mocha text (background stays on the app token) */
		--diffs-foreground: #cdd6f4;

		/* syntax palette — catppuccin mocha */
		--diffs-token-comment: #9399b2; /* overlay2 */
		--diffs-token-string: #a6e3a1; /* green */
		--diffs-token-string-expression: #a6e3a1; /* green */
		--diffs-token-keyword: #cba6f7; /* mauve */
		--diffs-token-function: #89b4fa; /* blue */
		--diffs-token-constant: #fab387; /* peach */
		--diffs-token-parameter: #eba0ac; /* maroon */
		--diffs-token-punctuation: #9399b2; /* overlay2 */
		--diffs-token-link: #89b4fa; /* blue */
		--diffs-token-inserted: #a6e3a1; /* green */
		--diffs-token-deleted: #f38ba8; /* red */
		--diffs-token-changed: #f9e2af; /* yellow */
	}
}