/*
 * Client Widgets — design tokens + scoped reset
 *
 * Everything is scoped to .cw-w so the client's theme can't leak into our widgets
 * and our widgets can't leak into the theme. Token names mirror shadcn/ui (which is
 * what 21st.dev components are built on), so porting a component is mostly a matter
 * of swapping Tailwind utilities for the equivalent declarations using these vars.
 */

.cw-w {
	/* Light theme (shadcn defaults). Hex first as a fallback, oklch second. */
	--background: #ffffff;
	--foreground: #0a0a0a;
	--card: #ffffff;
	--card-foreground: #0a0a0a;
	--popover: #ffffff;
	--popover-foreground: #0a0a0a;
	--primary: #171717;
	--primary-foreground: #fafafa;
	--secondary: #f5f5f5;
	--secondary-foreground: #171717;
	--muted: #f5f5f5;
	--muted-foreground: #737373;
	--accent: #f5f5f5;
	--accent-foreground: #171717;
	--destructive: #e7000b;
	--destructive-foreground: #fafafa;
	--border: #e5e5e5;
	--input: #e5e5e5;
	--ring: #a1a1a1;

	--background: oklch(1 0 0);
	--foreground: oklch(0.145 0 0);
	--card: oklch(1 0 0);
	--card-foreground: oklch(0.145 0 0);
	--popover: oklch(1 0 0);
	--popover-foreground: oklch(0.145 0 0);
	--primary: oklch(0.205 0 0);
	--primary-foreground: oklch(0.985 0 0);
	--secondary: oklch(0.97 0 0);
	--secondary-foreground: oklch(0.205 0 0);
	--muted: oklch(0.97 0 0);
	--muted-foreground: oklch(0.556 0 0);
	--accent: oklch(0.97 0 0);
	--accent-foreground: oklch(0.205 0 0);
	--destructive: oklch(0.577 0.245 27.325);
	--destructive-foreground: oklch(0.985 0 0);
	--border: oklch(0.922 0 0);
	--input: oklch(0.922 0 0);
	--ring: oklch(0.708 0 0);

	/* Radius scale — shadcn's --radius plus the derived steps components use. */
	--radius: 0.625rem;
	--radius-sm: calc(var(--radius) - 4px);
	--radius-md: calc(var(--radius) - 2px);
	--radius-lg: var(--radius);
	--radius-xl: calc(var(--radius) + 4px);

	/* Typography. Set --cw-font-sans to `inherit` in a widget's style controls if the
	   component should adopt the client's theme font instead. */
	--cw-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
		"Segoe UI Emoji";
	--cw-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		"Liberation Mono", monospace;

	/* Tailwind's default shadow scale, used verbatim by most 21st.dev components. */
	--cw-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--cw-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--cw-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--cw-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--cw-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

	color: var(--foreground);
	font-family: var(--cw-font-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Dark theme — opt in per widget via a control that sets data-cw-theme="dark". */
.cw-w[data-cw-theme="dark"] {
	--background: oklch(0.145 0 0);
	--foreground: oklch(0.985 0 0);
	--card: oklch(0.205 0 0);
	--card-foreground: oklch(0.985 0 0);
	--popover: oklch(0.205 0 0);
	--popover-foreground: oklch(0.985 0 0);
	--primary: oklch(0.985 0 0);
	--primary-foreground: oklch(0.205 0 0);
	--secondary: oklch(0.269 0 0);
	--secondary-foreground: oklch(0.985 0 0);
	--muted: oklch(0.269 0 0);
	--muted-foreground: oklch(0.708 0 0);
	--accent: oklch(0.269 0 0);
	--accent-foreground: oklch(0.985 0 0);
	--destructive: oklch(0.704 0.191 22.216);
	--border: oklch(1 0 0 / 10%);
	--input: oklch(1 0 0 / 15%);
	--ring: oklch(0.556 0 0);
}

/* ---------------------------------------------------------------------------
 * Scoped reset. Themes (and Elementor's own kit) inject margins, line-heights,
 * button styles and list bullets that break 1:1 fidelity with the source component.
 * We neutralise those inside .cw-w only.
 * ------------------------------------------------------------------------- */

.cw-w,
.cw-w *,
.cw-w *::before,
.cw-w *::after {
	box-sizing: border-box;
	border-width: 0;
	border-style: solid;
	border-color: var(--border);
}

.cw-w h1,
.cw-w h2,
.cw-w h3,
.cw-w h4,
.cw-w h5,
.cw-w h6,
.cw-w p,
.cw-w figure,
.cw-w blockquote,
.cw-w dl,
.cw-w dd,
.cw-w ul,
.cw-w ol,
.cw-w pre {
	margin: 0;
	padding: 0;
}

.cw-w h1,
.cw-w h2,
.cw-w h3,
.cw-w h4,
.cw-w h5,
.cw-w h6 {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

.cw-w ul,
.cw-w ol {
	list-style: none;
}

.cw-w a {
	color: inherit;
	text-decoration: inherit;
}

.cw-w button,
.cw-w input,
.cw-w optgroup,
.cw-w select,
.cw-w textarea {
	font: inherit;
	color: inherit;
	margin: 0;
	padding: 0;
	background: transparent;
	border-radius: 0;
	letter-spacing: inherit;
}

.cw-w button,
.cw-w [role="button"] {
	cursor: pointer;
	-webkit-appearance: button;
	appearance: button;
	background-image: none;
	text-transform: none;
}

/* Neutralises theme button hover styling inside our widgets, but skips our own buttons
   (every one carries a cw- class). Previously this matched our buttons too: at (0,2,1) it
   stripped their background, and at (0,2,0) via :where() it stopped shielding them from
   theme rules. Excluding them entirely is what actually works — each component declares
   its own hover colours. */
.cw-w button:not([class*='cw-']):hover,
.cw-w button:not([class*='cw-']):focus {
	background: transparent;
}

/* :where() keeps this at zero added specificity, so a widget's own class can set an
   explicit height. Without it `height: auto` here silently beats `.cw-x__img { height: 100% }`
   and images fall back to their natural size inside a fixed-ratio box. */
.cw-w :where(img),
.cw-w :where(svg),
.cw-w :where(video),
.cw-w :where(canvas) {
	display: block;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

.cw-w svg {
	fill: none;
	stroke: currentColor;
}

/* Inline lucide icons. */
.cw-w .cw-icon {
	width: 1.5rem;
	height: 1.5rem;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
}

.cw-w .cw-icon--filled {
	fill: currentColor;
}

.cw-w :focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}

.cw-w [hidden] {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.cw-w *,
	.cw-w *::before,
	.cw-w *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}