@use '../../shared/styles/utils';
@use '../../shared/styles/shoelace/vscode-theme';

:root {
	--font-family: var(--vscode-font-family);
	--font-size: var(--vscode-font-size);
	--font-weight: var(--vscode-font-weight);

	--editor-font-family: var(--vscode-editor-font-family);
	--editor-font-size: var(--vscode-editor-font-size);
	--editor-font-weight: var(--vscode-editor-font-weight);

	// Brand accent gradient (GitKraken purple → blue) — Pro feature gates, promos, etc.
	--gl-gradient-brand: linear-gradient(to right, #7900c9, #196fff);

	// Subtle brand wash (magenta → blue @ ~10%) — low-emphasis feature-region backgrounds
	// (auto-compose container, MCP/hooks buttons, matching promo banner). Static + decorative;
	// drops out under forced-colors, where these surfaces carry their own border.
	--gl-gradient-brand-subtle: linear-gradient(135deg, #a100ff1a 0%, #255ed11a 100%);

	// AI accent gradient stops (violet → sky → cyan) — high-emphasis AI affordances
	// (active-input shimmer borders, AI action buttons). Static + decorative; drop out under forced-colors.
	--gl-ai-accent-1: #7c3aed;
	--gl-ai-accent-2: #0ea5e9;
	--gl-ai-accent-3: #06b6d4;

	--color-background: var(--vscode-editor-background);

	// Computed variants in code
	--color-background--lighten-05: color-mix(in srgb, #fff 5%, var(--color-background));
	--color-background--darken-05: color-mix(in srgb, #000 5%, var(--color-background));
	--color-background--lighten-075: color-mix(in srgb, #fff 7.5%, var(--color-background));
	--color-background--darken-075: color-mix(in srgb, #000 7.5%, var(--color-background));
	--color-background--lighten-10: color-mix(in srgb, #fff 10%, var(--color-background));
	--color-background--darken-10: color-mix(in srgb, #000 10%, var(--color-background));
	--color-background--lighten-15: color-mix(in srgb, #fff 15%, var(--color-background));
	--color-background--darken-15: color-mix(in srgb, #000 15%, var(--color-background));
	--color-background--lighten-30: color-mix(in srgb, #fff 30%, var(--color-background));
	--color-background--darken-30: color-mix(in srgb, #000 30%, var(--color-background));
	--color-background--lighten-50: color-mix(in srgb, #fff 50%, var(--color-background));
	--color-background--darken-50: color-mix(in srgb, #000 50%, var(--color-background));

	--color-foreground: var(--vscode-editor-foreground, var(--vscode-foreground));

	// Computed variants in code
	--color-foreground--85: color-mix(in srgb, transparent 15%, var(--color-foreground));
	--color-foreground--75: color-mix(in srgb, transparent 25%, var(--color-foreground));
	--color-foreground--65: color-mix(in srgb, transparent 35%, var(--color-foreground));
	--color-foreground--50: color-mix(in srgb, transparent 50%, var(--color-foreground));
	--color-foreground--25: color-mix(in srgb, transparent 75%, var(--color-foreground));

	--color-button-background: var(--vscode-button-background, transparent);

	// Computed variants in code
	--color-button-background--darken-30: color-mix(in srgb, #000 30%, var(--color-button-background));
	--color-button-foreground: var(--vscode-button-foreground, var(--color-foreground));

	--color-button-secondary-background: var(--vscode-button-secondaryBackground, transparent);

	// Computed variants in code
	--color-button-secondary-background--darken-30: color-mix(
		in srgb,
		#000 30%,
		var(--color-button-secondary-background)
	);

	--color-highlight: var(--vscode-button-background, var(--vscode-button-border));

	// Computed variants in code
	--color-highlight--75: color-mix(in srgb, transparent 25%, var(--color-highlight));
	--color-highlight--50: color-mix(in srgb, transparent 50%, var(--color-highlight));
	--color-highlight--25: color-mix(in srgb, transparent 75%, var(--color-highlight));

	--color-focus-border: var(--vscode-focusBorder);

	--color-link-foreground: var(--vscode-textLink-foreground);

	// Computed variants in code
	--color-link-foreground--darken-20: color-mix(in srgb, #000 20%, var(--color-link-foreground));
	--color-link-foreground--lighten-20: color-mix(in srgb, #fff 20%, var(--color-link-foreground));

	--color-view-background: var(--vscode-sideBar-background, var(--color-background));
	--color-view-foreground: var(--vscode-sideBar-foreground, var(--color-foreground));
	--color-view-foreground--65: color-mix(in srgb, transparent 35%, var(--color-view-foreground));
	--color-view-foreground--50: color-mix(in srgb, transparent 50%, var(--color-view-foreground));
	--color-view-header-foreground: var(--vscode-sideBarSectionHeader-foreground, var(--color-foreground));

	--color-hover-background: var(--vscode-editorHoverWidget-background);
	--color-hover-border: var(--vscode-editorHoverWidget-border);
	--color-hover-foreground: var(--vscode-editorHoverWidget-foreground);
	--color-hover-statusBarBackground: var(--vscode-editorHoverWidget-statusBarBackground);

	--color-alert-infoBackground: var(--vscode-inputValidation-infoBackground);
	--color-alert-infoBorder: var(--vscode-inputValidation-infoBorder);
	--color-alert-infoForeground: var(--vscode-inputValidation-infoForeground, var(--color-alert-foreground));

	--color-alert-warningBackground: var(--vscode-inputValidation-warningBackground);
	--color-alert-warningBorder: var(--vscode-inputValidation-warningBorder);
	--color-alert-warningForeground: var(--vscode-inputValidation-warningForeground, var(--color-alert-foreground));

	--color-alert-errorBackground: var(--vscode-inputValidation-errorBackground);
	--color-alert-errorBorder: var(--vscode-inputValidation-errorBorder);
	--color-alert-errorForeground: var(--vscode-inputValidation-errorForeground, var(--color-alert-foreground));

	--color-alert-neutralBorder: var(--vscode-input-foreground);

	--color-alert-foreground: var(--vscode-input-foreground);

	--gl-indicator-color: var(--vscode-activityBarBadge-background);
	--gl-indicator-pulse-color: var(--vscode-activityBarBadge-background);

	--gl-tracking-ahead: var(--vscode-gitlens-decorations\.branchAheadForegroundColor);
	--gl-tracking-behind: var(--vscode-gitlens-decorations\.branchBehindForegroundColor);
	--gl-tracking-working: var(--vscode-activityBarBadge-background);
	--gl-tracking-missing: var(--vscode-gitlens-decorations\.branchMissingUpstreamForegroundColor);
	--gl-overlay-color: var(--vscode-widget-shadow);

	/* Unified stat colors — used by commit-stats, gl-commit-row, wip-stats-pill, compare-stats, etc. */
	--gl-stat-added: var(--vscode-gitDecoration-addedResourceForeground, var(--vscode-charts-green, #2da44e));
	--gl-stat-modified: var(--vscode-gitDecoration-modifiedResourceForeground, var(--vscode-charts-yellow, #bf8700));
	--gl-stat-removed: var(--vscode-gitDecoration-deletedResourceForeground, var(--vscode-charts-red, #cf222e));

	/* Agent phase colors — own palette (NOT SCM/gitDecoration tokens, which semantically belong
	   to file change states). Phase names match the AgentSessionPhase enum so every agent surface
	   (sidebar leaf, tooltip, pill, details panel card, WIP file decoration) dereferences one set
	   of variables. `working` uses a hand-picked slate-purple — reads as "AI / in motion" on both
	   light and dark backgrounds without colliding with chip-filtered blue (`#0099ff`) or the
	   waiting yellow. Avoids `--vscode-progressBar-background` (often chrome-grey/white per
	   theme) and `--vscode-button-background` (varies dramatically across themes — some are
	   near-foreground, defeating the "this stands out" signal). */
	--gl-agent-working-color: #7b68ee;
	--gl-agent-waiting-color: var(--vscode-editorWarning-foreground, var(--vscode-charts-yellow, #bf8700));
	--gl-agent-idle-color: var(--vscode-descriptionForeground);

	/* Unified scope/filter chip indicator colors — bg/border use the *-color (translucent via
	   color-mix); text uses *-text-color so light themes can pair a vibrant tint with much
	   darker readable text. By default both resolve to the same color. */
	--gl-chip-filtered-color: var(--vscode-statusBarItem-prominentBackground, var(--vscode-charts-blue, #0969da));
	--gl-chip-filtered-text-color: var(--gl-chip-filtered-color);
	--gl-chip-scoped-color: var(--vscode-statusBarItem-warningBackground, var(--vscode-charts-yellow, #bf8700));
	--gl-chip-scoped-text-color: var(--gl-chip-scoped-color);

	/* Mix percentages used by chip bg / border / hover bg. Defaults are tuned for dark themes;
	   light themes override below to balance the white-dilution effect. */
	--gl-chip-tint-bg: 22%;
	--gl-chip-tint-border: 50%;
	--gl-chip-tint-hover: 32%;

	--gitlens-gutter-width: 20px;
}

body[data-placement='view'] {
	--color-background: var(--vscode-sideBar-background, var(--vscode-editor-background));
}

body[data-placement='panel'] {
	--color-background: var(--vscode-panel-background, var(--vscode-editor-background));
}

@include utils.dark-theme($selectorPrefix: ':root:has(', $selectorPostfix: ')') {
	--color-alert-infoHoverBackground: color-mix(in srgb, #fff 5%, var(--color-alert-infoBackground));
	--color-alert-warningHoverBackground: color-mix(in srgb, #fff 5%, var(--color-alert-warningBackground));
	--color-alert-errorHoverBackground: color-mix(in srgb, #fff 5%, var(--color-alert-errorBackground));
	--color-alert-neutralBackground: color-mix(in srgb, #fff 5%, var(--color-background));
	--color-alert-neutralHoverBackground: color-mix(in srgb, #fff 5%, var(--color-alert-neutralBackground));

	/* Card surface defaults — shared by every card-rendering app. Component-scoped overrides
	   (grouping items, branch work-items, graph cards) set these deeper in the tree and still win. */
	--gl-card-background: color-mix(in lab, var(--vscode-sideBar-background) 100%, #fff 6%);
	--gl-card-hover-background: color-mix(in lab, var(--vscode-sideBar-background) 100%, #fff 8%);

	/* Force bright, vivid chip indicator colors on dark themes — themes vary widely on
	   statusBarItem-* tokens (some are teal/cyan instead of blue/yellow). The bg uses the
	   saturated hue (it's already translucent); text uses a lighter/brighter shade so it
	   contrasts against the tinted bg. Same base hues as light theme for visual consistency. */
	--gl-chip-filtered-color: #09f;
	--gl-chip-filtered-text-color: #79c0ff;
	--gl-chip-scoped-color: #f2cc60;
	--gl-chip-scoped-text-color: #f2cc60;
}

@include utils.light-theme($selectorPrefix: ':root:has(', $selectorPostfix: ')') {
	--color-alert-infoHoverBackground: color-mix(in srgb, #000 5%, var(--color-alert-infoBackground));
	--color-alert-warningHoverBackground: color-mix(in srgb, #000 5%, var(--color-alert-warningBackground));
	--color-alert-errorHoverBackground: color-mix(in srgb, #000 5%, var(--color-alert-errorBackground));
	--color-alert-neutralBackground: color-mix(in srgb, #000 5%, var(--color-background));
	--color-alert-neutralHoverBackground: color-mix(in srgb, #000 5%, var(--color-alert-neutralBackground));

	/* Card surface defaults — light-theme variant of the dark-theme block above. */
	--gl-card-background: color-mix(in lab, var(--vscode-sideBar-background) 100%, #000 4%);
	--gl-card-hover-background: color-mix(in lab, var(--vscode-sideBar-background) 100%, #000 6%);

	/* Force saturated, high-contrast stat colors on light backgrounds — many themes' gitDecoration
	   colors are too pale to read against white surfaces (esp. inside chip backgrounds). */
	--gl-stat-added: #2da44e;
	--gl-stat-modified: #bf8700;
	--gl-stat-removed: #cf222e;

	/* Light themes: pair a vibrant bg tint with a much darker text color for readability on white.
	   Bump tint percentages so chips/rows pop with the same vibrance as dark themes — mixing 18%
	   of any color into white just produces a pale wash. */
	--gl-chip-filtered-color: #09f;
	--gl-chip-filtered-text-color: #0550ae;
	--gl-chip-scoped-color: #e89500;
	--gl-chip-scoped-text-color: #4d3300;

	--gl-chip-tint-bg: 22%;
	--gl-chip-tint-border: 55%;
	--gl-chip-tint-hover: 32%;
}
