openconcho/packages/web/src/lib/constants.ts

// Semantic color tokens for inline styles.
// CSS variables (var(--text-1) etc.) handle theme-aware colors.
// These constants are for fixed semantic states that don't invert with theme.

export const COLOR = {
	// Status
	success: "#34d399",
	successDim: "rgba(52,211,153,0.08)",
	successBorder: "rgba(52,211,153,0.2)",

	warning: "#f59e0b",
	warningDim: "rgba(245,158,11,0.08)",
	warningBorder: "rgba(245,158,11,0.2)",

	destructive: "#f87171",
	destructiveDim: "rgba(239,68,68,0.08)",
	destructiveBorder: "rgba(239,68,68,0.2)",

	// Accent (indigo — matches --accent CSS var)
	accent: "#6366f1",
	accentText: "#818cf8",
	accentSoft: "#c7d2fe",
	accentDim: "rgba(99,102,241,0.08)",
	accentDimHover: "rgba(99,102,241,0.06)",
	accentSubtle: "rgba(99,102,241,0.1)",
	accentMuted: "rgba(99,102,241,0.6)",
	accentGlow: "rgba(99,102,241,0.4)",
	accentBorder: "rgba(99,102,241,0.2)",
	accentBorderStrong: "rgba(99,102,241,0.15)",
	accentSpinnerTrack: "rgba(99,102,241,0.15)",

	// Neutral dim (slate-300 at opacity)
	dimText: "rgba(148,163,184,0.5)",
	dimIcon: "rgba(148,163,184,0.3)",

	// Error detail text
	destructiveMuted: "rgba(248,113,113,0.6)",
	destructiveBorderStrong: "rgba(239,68,68,0.25)",

	// Framer-motion hover card base state (inline only — CSS vars can't be animated)
	cardBaseBg: "rgba(255,255,255,0.02)",
	cardBaseBorder: "rgba(255,255,255,0.06)",
} as const;