@layer reset, base, themes, utilities, components;

/* --------------------------------
   Base & Defaults
-------------------------------- */

@layer base {
	/* Default (no attributes) for body and canvas: neutral + default */
	body,
	[data-container='canvas'] {
		--bg: var(--color-neutral-canvas-default-bg);
		--fg: var(--color-neutral-canvas-default-fg-default);
		--fg-subtle: var(--color-neutral-canvas-default-fg-subtle);

		--stroke-minimal: var(--color-neutral-canvas-default-stroke-minimal);
		--stroke-subtle: var(--color-neutral-canvas-default-stroke-subtle);
		--stroke-default: var(--color-neutral-canvas-default-stroke-default);
		--stroke-strong: var(--color-neutral-canvas-default-stroke-strong);

		--accent-color: var(--color-neutral-base);

		background: var(--bg);
		color: var(--fg);
	}

		body *, [data-container='canvas'] * {
			--shadow-color: var(--color-neutral-base);
		}

	/* Default (no attributes) for surface: neutral + default (idle) */
	[data-container='surface'] {
		--bg: var(--color-neutral-surface-default-bg);
		--fg: var(--color-neutral-surface-default-fg-default);
		--fg-subtle: var(--color-neutral-surface-default-fg-subtle);

		--stroke-minimal: var(--color-neutral-surface-default-stroke-minimal);
		--stroke-subtle: var(--color-neutral-surface-default-stroke-subtle);
		--stroke-default: var(--color-neutral-surface-default-stroke-default);
		--stroke-strong: var(--color-neutral-surface-default-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}

	[data-interactive] {
		cursor: pointer;
	}

	/* Surface states (hover) */
	[data-container='surface'][data-interactive]:hover {
		--bg: var(--color-neutral-surface-default-hover-bg);
		--fg: var(--color-neutral-surface-default-hover-fg-default);
		--fg-subtle: var(--color-neutral-surface-default-hover-fg-subtle);

		background: var(--bg);
		color: var(--fg);
	}

	/* Surface states (active) via :active or .active */
	[data-container='surface'][data-interactive]:active,
	[data-container='surface'].active {
		--bg: var(--color-neutral-surface-default-active-bg);
		--fg: var(--color-neutral-surface-default-active-fg-default);
		--fg-subtle: var(--color-neutral-surface-default-active-fg-subtle);

		background: var(--bg);
		color: var(--fg);
	}
}

/* --------------------------------
   Attribute-based Appearance & Emphasis
-------------------------------- */

/* Canvas variations */

@layer themes {
	[data-appearance='neutral'] {
		--accent-color: var(--color-neutral-base);
	}

		[data-appearance='neutral'] * {
			--shadow-color: var(--color-neutral-base);
		}
	[data-container='canvas'][data-appearance='neutral'][data-emphasis='default'] {
		--bg: var(--color-neutral-canvas-default-bg);
		--fg: var(--color-neutral-canvas-default-fg-default);
		--fg-subtle: var(--color-neutral-canvas-default-fg-subtle);

		--stroke-minimal: var(--color-neutral-canvas-default-stroke-minimal);
		--stroke-subtle: var(--color-neutral-canvas-default-stroke-subtle);
		--stroke-default: var(--color-neutral-canvas-default-stroke-default);
		--stroke-strong: var(--color-neutral-canvas-default-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='canvas'][data-appearance='neutral'][data-emphasis='minimal'] {
		--bg: var(--color-neutral-canvas-minimal-bg);
		--fg: var(--color-neutral-canvas-minimal-fg-default);
		--fg-subtle: var(--color-neutral-canvas-minimal-fg-subtle);

		--stroke-minimal: var(--color-neutral-canvas-minimal-stroke-minimal);
		--stroke-subtle: var(--color-neutral-canvas-minimal-stroke-subtle);
		--stroke-default: var(--color-neutral-canvas-minimal-stroke-default);
		--stroke-strong: var(--color-neutral-canvas-minimal-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='canvas'][data-appearance='neutral'][data-emphasis='subtle'] {
		--bg: var(--color-neutral-canvas-subtle-bg);
		--fg: var(--color-neutral-canvas-subtle-fg-default);
		--fg-subtle: var(--color-neutral-canvas-subtle-fg-subtle);

		--stroke-minimal: var(--color-neutral-canvas-subtle-stroke-minimal);
		--stroke-subtle: var(--color-neutral-canvas-subtle-stroke-subtle);
		--stroke-default: var(--color-neutral-canvas-subtle-stroke-default);
		--stroke-strong: var(--color-neutral-canvas-subtle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='canvas'][data-appearance='neutral'][data-emphasis='moderate'] {
		--bg: var(--color-neutral-canvas-moderate-bg);
		--fg: var(--color-neutral-canvas-moderate-fg-default);
		--fg-subtle: var(--color-neutral-canvas-moderate-fg-subtle);

		--stroke-minimal: var(--color-neutral-canvas-moderate-stroke-minimal);
		--stroke-subtle: var(--color-neutral-canvas-moderate-stroke-subtle);
		--stroke-default: var(--color-neutral-canvas-moderate-stroke-default);
		--stroke-strong: var(--color-neutral-canvas-moderate-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='neutral'][data-emphasis='default'] {
		--bg: var(--color-neutral-surface-default-idle-bg);
		--fg: var(--color-neutral-surface-default-idle-fg-default);
		--fg-subtle: var(--color-neutral-surface-default-idle-fg-subtle);

		--stroke-minimal: var(--color-neutral-surface-default-idle-stroke-minimal);
		--stroke-subtle: var(--color-neutral-surface-default-idle-stroke-subtle);
		--stroke-default: var(--color-neutral-surface-default-idle-stroke-default);
		--stroke-strong: var(--color-neutral-surface-default-idle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='neutral'][data-emphasis='default'][data-interactive]:hover {
		--bg: var(--color-neutral-surface-default-hover-bg);
		--fg: var(--color-neutral-surface-default-hover-fg-default);
		--fg-subtle: var(--color-neutral-surface-default-hover-fg-subtle);

		--stroke-minimal: var(--color-neutral-surface-default-hover-stroke-minimal);
		--stroke-subtle: var(--color-neutral-surface-default-hover-stroke-subtle);
		--stroke-default: var(--color-neutral-surface-default-hover-stroke-default);
		--stroke-strong: var(--color-neutral-surface-default-hover-stroke-strong);
	}
	[data-container='surface'][data-appearance='neutral'][data-emphasis='default'][data-interactive]:active,
	[data-container='surface'][data-appearance='neutral'][data-emphasis='default'].active {
		--bg: var(--color-neutral-surface-default-active-bg);
		--fg: var(--color-neutral-surface-default-active-fg-default);
		--fg-subtle: var(--color-neutral-surface-default-active-fg-subtle);

		--stroke-minimal: var(--color-neutral-surface-default-active-stroke-minimal);
		--stroke-subtle: var(--color-neutral-surface-default-active-stroke-subtle);
		--stroke-default: var(--color-neutral-surface-default-active-stroke-default);
		--stroke-strong: var(--color-neutral-surface-default-active-stroke-strong);
	}
	[data-container='surface'][data-appearance='neutral'][data-emphasis='ghost'] {
		--bg: var(--color-neutral-surface-ghost-idle-bg);
		--fg: var(--color-neutral-surface-ghost-idle-fg-default);
		--fg-subtle: var(--color-neutral-surface-ghost-idle-fg-subtle);

		--stroke-minimal: var(--color-neutral-surface-ghost-idle-stroke-minimal);
		--stroke-subtle: var(--color-neutral-surface-ghost-idle-stroke-subtle);
		--stroke-default: var(--color-neutral-surface-ghost-idle-stroke-default);
		--stroke-strong: var(--color-neutral-surface-ghost-idle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='neutral'][data-emphasis='ghost'][data-interactive]:hover {
		--bg: var(--color-neutral-surface-ghost-hover-bg);
		--fg: var(--color-neutral-surface-ghost-hover-fg-default);
		--fg-subtle: var(--color-neutral-surface-ghost-hover-fg-subtle);

		--stroke-minimal: var(--color-neutral-surface-ghost-hover-stroke-minimal);
		--stroke-subtle: var(--color-neutral-surface-ghost-hover-stroke-subtle);
		--stroke-default: var(--color-neutral-surface-ghost-hover-stroke-default);
		--stroke-strong: var(--color-neutral-surface-ghost-hover-stroke-strong);
	}
	[data-container='surface'][data-appearance='neutral'][data-emphasis='ghost'][data-interactive]:active,
	[data-container='surface'][data-appearance='neutral'][data-emphasis='ghost'].active {
		--bg: var(--color-neutral-surface-ghost-active-bg);
		--fg: var(--color-neutral-surface-ghost-active-fg-default);
		--fg-subtle: var(--color-neutral-surface-ghost-active-fg-subtle);

		--stroke-minimal: var(--color-neutral-surface-ghost-active-stroke-minimal);
		--stroke-subtle: var(--color-neutral-surface-ghost-active-stroke-subtle);
		--stroke-default: var(--color-neutral-surface-ghost-active-stroke-default);
		--stroke-strong: var(--color-neutral-surface-ghost-active-stroke-strong);
	}
	[data-container='surface'][data-appearance='neutral'][data-emphasis='minimal'] {
		--bg: var(--color-neutral-surface-minimal-idle-bg);
		--fg: var(--color-neutral-surface-minimal-idle-fg-default);
		--fg-subtle: var(--color-neutral-surface-minimal-idle-fg-subtle);

		--stroke-minimal: var(--color-neutral-surface-minimal-idle-stroke-minimal);
		--stroke-subtle: var(--color-neutral-surface-minimal-idle-stroke-subtle);
		--stroke-default: var(--color-neutral-surface-minimal-idle-stroke-default);
		--stroke-strong: var(--color-neutral-surface-minimal-idle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='neutral'][data-emphasis='minimal'][data-interactive]:hover {
		--bg: var(--color-neutral-surface-minimal-hover-bg);
		--fg: var(--color-neutral-surface-minimal-hover-fg-default);
		--fg-subtle: var(--color-neutral-surface-minimal-hover-fg-subtle);

		--stroke-minimal: var(--color-neutral-surface-minimal-hover-stroke-minimal);
		--stroke-subtle: var(--color-neutral-surface-minimal-hover-stroke-subtle);
		--stroke-default: var(--color-neutral-surface-minimal-hover-stroke-default);
		--stroke-strong: var(--color-neutral-surface-minimal-hover-stroke-strong);
	}
	[data-container='surface'][data-appearance='neutral'][data-emphasis='minimal'][data-interactive]:active,
	[data-container='surface'][data-appearance='neutral'][data-emphasis='minimal'].active {
		--bg: var(--color-neutral-surface-minimal-active-bg);
		--fg: var(--color-neutral-surface-minimal-active-fg-default);
		--fg-subtle: var(--color-neutral-surface-minimal-active-fg-subtle);

		--stroke-minimal: var(--color-neutral-surface-minimal-active-stroke-minimal);
		--stroke-subtle: var(--color-neutral-surface-minimal-active-stroke-subtle);
		--stroke-default: var(--color-neutral-surface-minimal-active-stroke-default);
		--stroke-strong: var(--color-neutral-surface-minimal-active-stroke-strong);
	}
	[data-container='surface'][data-appearance='neutral'][data-emphasis='subtle'] {
		--bg: var(--color-neutral-surface-subtle-idle-bg);
		--fg: var(--color-neutral-surface-subtle-idle-fg-default);
		--fg-subtle: var(--color-neutral-surface-subtle-idle-fg-subtle);

		--stroke-minimal: var(--color-neutral-surface-subtle-idle-stroke-minimal);
		--stroke-subtle: var(--color-neutral-surface-subtle-idle-stroke-subtle);
		--stroke-default: var(--color-neutral-surface-subtle-idle-stroke-default);
		--stroke-strong: var(--color-neutral-surface-subtle-idle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='neutral'][data-emphasis='subtle'][data-interactive]:hover {
		--bg: var(--color-neutral-surface-subtle-hover-bg);
		--fg: var(--color-neutral-surface-subtle-hover-fg-default);
		--fg-subtle: var(--color-neutral-surface-subtle-hover-fg-subtle);

		--stroke-minimal: var(--color-neutral-surface-subtle-hover-stroke-minimal);
		--stroke-subtle: var(--color-neutral-surface-subtle-hover-stroke-subtle);
		--stroke-default: var(--color-neutral-surface-subtle-hover-stroke-default);
		--stroke-strong: var(--color-neutral-surface-subtle-hover-stroke-strong);
	}
	[data-container='surface'][data-appearance='neutral'][data-emphasis='subtle'][data-interactive]:active,
	[data-container='surface'][data-appearance='neutral'][data-emphasis='subtle'].active {
		--bg: var(--color-neutral-surface-subtle-active-bg);
		--fg: var(--color-neutral-surface-subtle-active-fg-default);
		--fg-subtle: var(--color-neutral-surface-subtle-active-fg-subtle);

		--stroke-minimal: var(--color-neutral-surface-subtle-active-stroke-minimal);
		--stroke-subtle: var(--color-neutral-surface-subtle-active-stroke-subtle);
		--stroke-default: var(--color-neutral-surface-subtle-active-stroke-default);
		--stroke-strong: var(--color-neutral-surface-subtle-active-stroke-strong);
	}
	[data-container='surface'][data-appearance='neutral'][data-emphasis='heavy'] {
		--bg: var(--color-neutral-surface-heavy-idle-bg);
		--fg: var(--color-neutral-surface-heavy-idle-fg-default);
		--fg-subtle: var(--color-neutral-surface-heavy-idle-fg-subtle);

		--stroke-minimal: var(--color-neutral-surface-heavy-idle-stroke-minimal);
		--stroke-subtle: var(--color-neutral-surface-heavy-idle-stroke-subtle);
		--stroke-default: var(--color-neutral-surface-heavy-idle-stroke-default);
		--stroke-strong: var(--color-neutral-surface-heavy-idle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='neutral'][data-emphasis='heavy'][data-interactive]:hover {
		--bg: var(--color-neutral-surface-heavy-hover-bg);
		--fg: var(--color-neutral-surface-heavy-hover-fg-default);
		--fg-subtle: var(--color-neutral-surface-heavy-hover-fg-subtle);

		--stroke-minimal: var(--color-neutral-surface-heavy-hover-stroke-minimal);
		--stroke-subtle: var(--color-neutral-surface-heavy-hover-stroke-subtle);
		--stroke-default: var(--color-neutral-surface-heavy-hover-stroke-default);
		--stroke-strong: var(--color-neutral-surface-heavy-hover-stroke-strong);
	}
	[data-container='surface'][data-appearance='neutral'][data-emphasis='heavy'][data-interactive]:active,
	[data-container='surface'][data-appearance='neutral'][data-emphasis='heavy'].active {
		--bg: var(--color-neutral-surface-heavy-active-bg);
		--fg: var(--color-neutral-surface-heavy-active-fg-default);
		--fg-subtle: var(--color-neutral-surface-heavy-active-fg-subtle);

		--stroke-minimal: var(--color-neutral-surface-heavy-active-stroke-minimal);
		--stroke-subtle: var(--color-neutral-surface-heavy-active-stroke-subtle);
		--stroke-default: var(--color-neutral-surface-heavy-active-stroke-default);
		--stroke-strong: var(--color-neutral-surface-heavy-active-stroke-strong);
	}
	[data-container='surface'][data-appearance='neutral'][data-emphasis='default']
		> [data-container='surface'][data-appearance='neutral'][data-emphasis='default'] {
		--bg: var(--color-neutral-surface-ghost-bg);
		--fg: var(--color-neutral-surface-ghost-fg-default);
		--fg-subtle: var(--color-neutral-surface-ghost-fg-subtle);

		--stroke-minimal: var(--color-neutral-surface-ghost-stroke-minimal);
		--stroke-subtle: var(--color-neutral-surface-ghost-stroke-subtle);
		--stroke-default: var(--color-neutral-surface-ghost-stroke-default);
		--stroke-strong: var(--color-neutral-surface-ghost-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='neutral'][data-emphasis='minimal']
		> [data-container='surface'][data-appearance='neutral'][data-emphasis='minimal'] {
		--bg: var(--color-neutral-surface-subtle-bg);
		--fg: var(--color-neutral-surface-subtle-fg-default);
		--fg-subtle: var(--color-neutral-surface-subtle-fg-subtle);

		--stroke-minimal: var(--color-neutral-surface-subtle-stroke-minimal);
		--stroke-subtle: var(--color-neutral-surface-subtle-stroke-subtle);
		--stroke-default: var(--color-neutral-surface-subtle-stroke-default);
		--stroke-strong: var(--color-neutral-surface-subtle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-appearance='accent'] {
		--accent-color: var(--color-accent-base);
	}

		[data-appearance='accent'] * {
			--shadow-color: var(--color-accent-base);
		}
	[data-container='canvas'][data-appearance='accent'][data-emphasis='default'] {
		--bg: var(--color-accent-canvas-default-bg);
		--fg: var(--color-accent-canvas-default-fg-default);
		--fg-subtle: var(--color-accent-canvas-default-fg-subtle);

		--stroke-minimal: var(--color-accent-canvas-default-stroke-minimal);
		--stroke-subtle: var(--color-accent-canvas-default-stroke-subtle);
		--stroke-default: var(--color-accent-canvas-default-stroke-default);
		--stroke-strong: var(--color-accent-canvas-default-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='canvas'][data-appearance='accent'][data-emphasis='minimal'] {
		--bg: var(--color-accent-canvas-minimal-bg);
		--fg: var(--color-accent-canvas-minimal-fg-default);
		--fg-subtle: var(--color-accent-canvas-minimal-fg-subtle);

		--stroke-minimal: var(--color-accent-canvas-minimal-stroke-minimal);
		--stroke-subtle: var(--color-accent-canvas-minimal-stroke-subtle);
		--stroke-default: var(--color-accent-canvas-minimal-stroke-default);
		--stroke-strong: var(--color-accent-canvas-minimal-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='canvas'][data-appearance='accent'][data-emphasis='subtle'] {
		--bg: var(--color-accent-canvas-subtle-bg);
		--fg: var(--color-accent-canvas-subtle-fg-default);
		--fg-subtle: var(--color-accent-canvas-subtle-fg-subtle);

		--stroke-minimal: var(--color-accent-canvas-subtle-stroke-minimal);
		--stroke-subtle: var(--color-accent-canvas-subtle-stroke-subtle);
		--stroke-default: var(--color-accent-canvas-subtle-stroke-default);
		--stroke-strong: var(--color-accent-canvas-subtle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='canvas'][data-appearance='accent'][data-emphasis='moderate'] {
		--bg: var(--color-accent-canvas-moderate-bg);
		--fg: var(--color-accent-canvas-moderate-fg-default);
		--fg-subtle: var(--color-accent-canvas-moderate-fg-subtle);

		--stroke-minimal: var(--color-accent-canvas-moderate-stroke-minimal);
		--stroke-subtle: var(--color-accent-canvas-moderate-stroke-subtle);
		--stroke-default: var(--color-accent-canvas-moderate-stroke-default);
		--stroke-strong: var(--color-accent-canvas-moderate-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='accent'][data-emphasis='default'] {
		--bg: var(--color-accent-surface-default-idle-bg);
		--fg: var(--color-accent-surface-default-idle-fg-default);
		--fg-subtle: var(--color-accent-surface-default-idle-fg-subtle);

		--stroke-minimal: var(--color-accent-surface-default-idle-stroke-minimal);
		--stroke-subtle: var(--color-accent-surface-default-idle-stroke-subtle);
		--stroke-default: var(--color-accent-surface-default-idle-stroke-default);
		--stroke-strong: var(--color-accent-surface-default-idle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='accent'][data-emphasis='default'][data-interactive]:hover {
		--bg: var(--color-accent-surface-default-hover-bg);
		--fg: var(--color-accent-surface-default-hover-fg-default);
		--fg-subtle: var(--color-accent-surface-default-hover-fg-subtle);

		--stroke-minimal: var(--color-accent-surface-default-hover-stroke-minimal);
		--stroke-subtle: var(--color-accent-surface-default-hover-stroke-subtle);
		--stroke-default: var(--color-accent-surface-default-hover-stroke-default);
		--stroke-strong: var(--color-accent-surface-default-hover-stroke-strong);
	}
	[data-container='surface'][data-appearance='accent'][data-emphasis='default'][data-interactive]:active,
	[data-container='surface'][data-appearance='accent'][data-emphasis='default'].active {
		--bg: var(--color-accent-surface-default-active-bg);
		--fg: var(--color-accent-surface-default-active-fg-default);
		--fg-subtle: var(--color-accent-surface-default-active-fg-subtle);

		--stroke-minimal: var(--color-accent-surface-default-active-stroke-minimal);
		--stroke-subtle: var(--color-accent-surface-default-active-stroke-subtle);
		--stroke-default: var(--color-accent-surface-default-active-stroke-default);
		--stroke-strong: var(--color-accent-surface-default-active-stroke-strong);
	}
	[data-container='surface'][data-appearance='accent'][data-emphasis='ghost'] {
		--bg: var(--color-accent-surface-ghost-idle-bg);
		--fg: var(--color-accent-surface-ghost-idle-fg-default);
		--fg-subtle: var(--color-accent-surface-ghost-idle-fg-subtle);

		--stroke-minimal: var(--color-accent-surface-ghost-idle-stroke-minimal);
		--stroke-subtle: var(--color-accent-surface-ghost-idle-stroke-subtle);
		--stroke-default: var(--color-accent-surface-ghost-idle-stroke-default);
		--stroke-strong: var(--color-accent-surface-ghost-idle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='accent'][data-emphasis='ghost'][data-interactive]:hover {
		--bg: var(--color-accent-surface-ghost-hover-bg);
		--fg: var(--color-accent-surface-ghost-hover-fg-default);
		--fg-subtle: var(--color-accent-surface-ghost-hover-fg-subtle);

		--stroke-minimal: var(--color-accent-surface-ghost-hover-stroke-minimal);
		--stroke-subtle: var(--color-accent-surface-ghost-hover-stroke-subtle);
		--stroke-default: var(--color-accent-surface-ghost-hover-stroke-default);
		--stroke-strong: var(--color-accent-surface-ghost-hover-stroke-strong);
	}
	[data-container='surface'][data-appearance='accent'][data-emphasis='ghost'][data-interactive]:active,
	[data-container='surface'][data-appearance='accent'][data-emphasis='ghost'].active {
		--bg: var(--color-accent-surface-ghost-active-bg);
		--fg: var(--color-accent-surface-ghost-active-fg-default);
		--fg-subtle: var(--color-accent-surface-ghost-active-fg-subtle);

		--stroke-minimal: var(--color-accent-surface-ghost-active-stroke-minimal);
		--stroke-subtle: var(--color-accent-surface-ghost-active-stroke-subtle);
		--stroke-default: var(--color-accent-surface-ghost-active-stroke-default);
		--stroke-strong: var(--color-accent-surface-ghost-active-stroke-strong);
	}
	[data-container='surface'][data-appearance='accent'][data-emphasis='minimal'] {
		--bg: var(--color-accent-surface-minimal-idle-bg);
		--fg: var(--color-accent-surface-minimal-idle-fg-default);
		--fg-subtle: var(--color-accent-surface-minimal-idle-fg-subtle);

		--stroke-minimal: var(--color-accent-surface-minimal-idle-stroke-minimal);
		--stroke-subtle: var(--color-accent-surface-minimal-idle-stroke-subtle);
		--stroke-default: var(--color-accent-surface-minimal-idle-stroke-default);
		--stroke-strong: var(--color-accent-surface-minimal-idle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='accent'][data-emphasis='minimal'][data-interactive]:hover {
		--bg: var(--color-accent-surface-minimal-hover-bg);
		--fg: var(--color-accent-surface-minimal-hover-fg-default);
		--fg-subtle: var(--color-accent-surface-minimal-hover-fg-subtle);

		--stroke-minimal: var(--color-accent-surface-minimal-hover-stroke-minimal);
		--stroke-subtle: var(--color-accent-surface-minimal-hover-stroke-subtle);
		--stroke-default: var(--color-accent-surface-minimal-hover-stroke-default);
		--stroke-strong: var(--color-accent-surface-minimal-hover-stroke-strong);
	}
	[data-container='surface'][data-appearance='accent'][data-emphasis='minimal'][data-interactive]:active,
	[data-container='surface'][data-appearance='accent'][data-emphasis='minimal'].active {
		--bg: var(--color-accent-surface-minimal-active-bg);
		--fg: var(--color-accent-surface-minimal-active-fg-default);
		--fg-subtle: var(--color-accent-surface-minimal-active-fg-subtle);

		--stroke-minimal: var(--color-accent-surface-minimal-active-stroke-minimal);
		--stroke-subtle: var(--color-accent-surface-minimal-active-stroke-subtle);
		--stroke-default: var(--color-accent-surface-minimal-active-stroke-default);
		--stroke-strong: var(--color-accent-surface-minimal-active-stroke-strong);
	}
	[data-container='surface'][data-appearance='accent'][data-emphasis='subtle'] {
		--bg: var(--color-accent-surface-subtle-idle-bg);
		--fg: var(--color-accent-surface-subtle-idle-fg-default);
		--fg-subtle: var(--color-accent-surface-subtle-idle-fg-subtle);

		--stroke-minimal: var(--color-accent-surface-subtle-idle-stroke-minimal);
		--stroke-subtle: var(--color-accent-surface-subtle-idle-stroke-subtle);
		--stroke-default: var(--color-accent-surface-subtle-idle-stroke-default);
		--stroke-strong: var(--color-accent-surface-subtle-idle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='accent'][data-emphasis='subtle'][data-interactive]:hover {
		--bg: var(--color-accent-surface-subtle-hover-bg);
		--fg: var(--color-accent-surface-subtle-hover-fg-default);
		--fg-subtle: var(--color-accent-surface-subtle-hover-fg-subtle);

		--stroke-minimal: var(--color-accent-surface-subtle-hover-stroke-minimal);
		--stroke-subtle: var(--color-accent-surface-subtle-hover-stroke-subtle);
		--stroke-default: var(--color-accent-surface-subtle-hover-stroke-default);
		--stroke-strong: var(--color-accent-surface-subtle-hover-stroke-strong);
	}
	[data-container='surface'][data-appearance='accent'][data-emphasis='subtle'][data-interactive]:active,
	[data-container='surface'][data-appearance='accent'][data-emphasis='subtle'].active {
		--bg: var(--color-accent-surface-subtle-active-bg);
		--fg: var(--color-accent-surface-subtle-active-fg-default);
		--fg-subtle: var(--color-accent-surface-subtle-active-fg-subtle);

		--stroke-minimal: var(--color-accent-surface-subtle-active-stroke-minimal);
		--stroke-subtle: var(--color-accent-surface-subtle-active-stroke-subtle);
		--stroke-default: var(--color-accent-surface-subtle-active-stroke-default);
		--stroke-strong: var(--color-accent-surface-subtle-active-stroke-strong);
	}
	[data-container='surface'][data-appearance='accent'][data-emphasis='heavy'] {
		--bg: var(--color-accent-surface-heavy-idle-bg);
		--fg: var(--color-accent-surface-heavy-idle-fg-default);
		--fg-subtle: var(--color-accent-surface-heavy-idle-fg-subtle);

		--stroke-minimal: var(--color-accent-surface-heavy-idle-stroke-minimal);
		--stroke-subtle: var(--color-accent-surface-heavy-idle-stroke-subtle);
		--stroke-default: var(--color-accent-surface-heavy-idle-stroke-default);
		--stroke-strong: var(--color-accent-surface-heavy-idle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='accent'][data-emphasis='heavy'][data-interactive]:hover {
		--bg: var(--color-accent-surface-heavy-hover-bg);
		--fg: var(--color-accent-surface-heavy-hover-fg-default);
		--fg-subtle: var(--color-accent-surface-heavy-hover-fg-subtle);

		--stroke-minimal: var(--color-accent-surface-heavy-hover-stroke-minimal);
		--stroke-subtle: var(--color-accent-surface-heavy-hover-stroke-subtle);
		--stroke-default: var(--color-accent-surface-heavy-hover-stroke-default);
		--stroke-strong: var(--color-accent-surface-heavy-hover-stroke-strong);
	}
	[data-container='surface'][data-appearance='accent'][data-emphasis='heavy'][data-interactive]:active,
	[data-container='surface'][data-appearance='accent'][data-emphasis='heavy'].active {
		--bg: var(--color-accent-surface-heavy-active-bg);
		--fg: var(--color-accent-surface-heavy-active-fg-default);
		--fg-subtle: var(--color-accent-surface-heavy-active-fg-subtle);

		--stroke-minimal: var(--color-accent-surface-heavy-active-stroke-minimal);
		--stroke-subtle: var(--color-accent-surface-heavy-active-stroke-subtle);
		--stroke-default: var(--color-accent-surface-heavy-active-stroke-default);
		--stroke-strong: var(--color-accent-surface-heavy-active-stroke-strong);
	}
	[data-container='surface'][data-appearance='accent'][data-emphasis='default']
		> [data-container='surface'][data-appearance='accent'][data-emphasis='default'] {
		--bg: var(--color-accent-surface-ghost-bg);
		--fg: var(--color-accent-surface-ghost-fg-default);
		--fg-subtle: var(--color-accent-surface-ghost-fg-subtle);

		--stroke-minimal: var(--color-accent-surface-ghost-stroke-minimal);
		--stroke-subtle: var(--color-accent-surface-ghost-stroke-subtle);
		--stroke-default: var(--color-accent-surface-ghost-stroke-default);
		--stroke-strong: var(--color-accent-surface-ghost-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='accent'][data-emphasis='minimal']
		> [data-container='surface'][data-appearance='accent'][data-emphasis='minimal'] {
		--bg: var(--color-accent-surface-subtle-bg);
		--fg: var(--color-accent-surface-subtle-fg-default);
		--fg-subtle: var(--color-accent-surface-subtle-fg-subtle);

		--stroke-minimal: var(--color-accent-surface-subtle-stroke-minimal);
		--stroke-subtle: var(--color-accent-surface-subtle-stroke-subtle);
		--stroke-default: var(--color-accent-surface-subtle-stroke-default);
		--stroke-strong: var(--color-accent-surface-subtle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-appearance='info'] {
		--accent-color: var(--color-info-base);
	}

		[data-appearance='info'] * {
			--shadow-color: var(--color-info-base);
		}
	[data-container='canvas'][data-appearance='info'][data-emphasis='default'] {
		--bg: var(--color-info-canvas-default-bg);
		--fg: var(--color-info-canvas-default-fg-default);
		--fg-subtle: var(--color-info-canvas-default-fg-subtle);

		--stroke-minimal: var(--color-info-canvas-default-stroke-minimal);
		--stroke-subtle: var(--color-info-canvas-default-stroke-subtle);
		--stroke-default: var(--color-info-canvas-default-stroke-default);
		--stroke-strong: var(--color-info-canvas-default-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='canvas'][data-appearance='info'][data-emphasis='minimal'] {
		--bg: var(--color-info-canvas-minimal-bg);
		--fg: var(--color-info-canvas-minimal-fg-default);
		--fg-subtle: var(--color-info-canvas-minimal-fg-subtle);

		--stroke-minimal: var(--color-info-canvas-minimal-stroke-minimal);
		--stroke-subtle: var(--color-info-canvas-minimal-stroke-subtle);
		--stroke-default: var(--color-info-canvas-minimal-stroke-default);
		--stroke-strong: var(--color-info-canvas-minimal-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='canvas'][data-appearance='info'][data-emphasis='subtle'] {
		--bg: var(--color-info-canvas-subtle-bg);
		--fg: var(--color-info-canvas-subtle-fg-default);
		--fg-subtle: var(--color-info-canvas-subtle-fg-subtle);

		--stroke-minimal: var(--color-info-canvas-subtle-stroke-minimal);
		--stroke-subtle: var(--color-info-canvas-subtle-stroke-subtle);
		--stroke-default: var(--color-info-canvas-subtle-stroke-default);
		--stroke-strong: var(--color-info-canvas-subtle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='canvas'][data-appearance='info'][data-emphasis='moderate'] {
		--bg: var(--color-info-canvas-moderate-bg);
		--fg: var(--color-info-canvas-moderate-fg-default);
		--fg-subtle: var(--color-info-canvas-moderate-fg-subtle);

		--stroke-minimal: var(--color-info-canvas-moderate-stroke-minimal);
		--stroke-subtle: var(--color-info-canvas-moderate-stroke-subtle);
		--stroke-default: var(--color-info-canvas-moderate-stroke-default);
		--stroke-strong: var(--color-info-canvas-moderate-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='info'][data-emphasis='default'] {
		--bg: var(--color-info-surface-default-idle-bg);
		--fg: var(--color-info-surface-default-idle-fg-default);
		--fg-subtle: var(--color-info-surface-default-idle-fg-subtle);

		--stroke-minimal: var(--color-info-surface-default-idle-stroke-minimal);
		--stroke-subtle: var(--color-info-surface-default-idle-stroke-subtle);
		--stroke-default: var(--color-info-surface-default-idle-stroke-default);
		--stroke-strong: var(--color-info-surface-default-idle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='info'][data-emphasis='default'][data-interactive]:hover {
		--bg: var(--color-info-surface-default-hover-bg);
		--fg: var(--color-info-surface-default-hover-fg-default);
		--fg-subtle: var(--color-info-surface-default-hover-fg-subtle);

		--stroke-minimal: var(--color-info-surface-default-hover-stroke-minimal);
		--stroke-subtle: var(--color-info-surface-default-hover-stroke-subtle);
		--stroke-default: var(--color-info-surface-default-hover-stroke-default);
		--stroke-strong: var(--color-info-surface-default-hover-stroke-strong);
	}
	[data-container='surface'][data-appearance='info'][data-emphasis='default'][data-interactive]:active,
	[data-container='surface'][data-appearance='info'][data-emphasis='default'].active {
		--bg: var(--color-info-surface-default-active-bg);
		--fg: var(--color-info-surface-default-active-fg-default);
		--fg-subtle: var(--color-info-surface-default-active-fg-subtle);

		--stroke-minimal: var(--color-info-surface-default-active-stroke-minimal);
		--stroke-subtle: var(--color-info-surface-default-active-stroke-subtle);
		--stroke-default: var(--color-info-surface-default-active-stroke-default);
		--stroke-strong: var(--color-info-surface-default-active-stroke-strong);
	}
	[data-container='surface'][data-appearance='info'][data-emphasis='ghost'] {
		--bg: var(--color-info-surface-ghost-idle-bg);
		--fg: var(--color-info-surface-ghost-idle-fg-default);
		--fg-subtle: var(--color-info-surface-ghost-idle-fg-subtle);

		--stroke-minimal: var(--color-info-surface-ghost-idle-stroke-minimal);
		--stroke-subtle: var(--color-info-surface-ghost-idle-stroke-subtle);
		--stroke-default: var(--color-info-surface-ghost-idle-stroke-default);
		--stroke-strong: var(--color-info-surface-ghost-idle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='info'][data-emphasis='ghost'][data-interactive]:hover {
		--bg: var(--color-info-surface-ghost-hover-bg);
		--fg: var(--color-info-surface-ghost-hover-fg-default);
		--fg-subtle: var(--color-info-surface-ghost-hover-fg-subtle);

		--stroke-minimal: var(--color-info-surface-ghost-hover-stroke-minimal);
		--stroke-subtle: var(--color-info-surface-ghost-hover-stroke-subtle);
		--stroke-default: var(--color-info-surface-ghost-hover-stroke-default);
		--stroke-strong: var(--color-info-surface-ghost-hover-stroke-strong);
	}
	[data-container='surface'][data-appearance='info'][data-emphasis='ghost'][data-interactive]:active,
	[data-container='surface'][data-appearance='info'][data-emphasis='ghost'].active {
		--bg: var(--color-info-surface-ghost-active-bg);
		--fg: var(--color-info-surface-ghost-active-fg-default);
		--fg-subtle: var(--color-info-surface-ghost-active-fg-subtle);

		--stroke-minimal: var(--color-info-surface-ghost-active-stroke-minimal);
		--stroke-subtle: var(--color-info-surface-ghost-active-stroke-subtle);
		--stroke-default: var(--color-info-surface-ghost-active-stroke-default);
		--stroke-strong: var(--color-info-surface-ghost-active-stroke-strong);
	}
	[data-container='surface'][data-appearance='info'][data-emphasis='minimal'] {
		--bg: var(--color-info-surface-minimal-idle-bg);
		--fg: var(--color-info-surface-minimal-idle-fg-default);
		--fg-subtle: var(--color-info-surface-minimal-idle-fg-subtle);

		--stroke-minimal: var(--color-info-surface-minimal-idle-stroke-minimal);
		--stroke-subtle: var(--color-info-surface-minimal-idle-stroke-subtle);
		--stroke-default: var(--color-info-surface-minimal-idle-stroke-default);
		--stroke-strong: var(--color-info-surface-minimal-idle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='info'][data-emphasis='minimal'][data-interactive]:hover {
		--bg: var(--color-info-surface-minimal-hover-bg);
		--fg: var(--color-info-surface-minimal-hover-fg-default);
		--fg-subtle: var(--color-info-surface-minimal-hover-fg-subtle);

		--stroke-minimal: var(--color-info-surface-minimal-hover-stroke-minimal);
		--stroke-subtle: var(--color-info-surface-minimal-hover-stroke-subtle);
		--stroke-default: var(--color-info-surface-minimal-hover-stroke-default);
		--stroke-strong: var(--color-info-surface-minimal-hover-stroke-strong);
	}
	[data-container='surface'][data-appearance='info'][data-emphasis='minimal'][data-interactive]:active,
	[data-container='surface'][data-appearance='info'][data-emphasis='minimal'].active {
		--bg: var(--color-info-surface-minimal-active-bg);
		--fg: var(--color-info-surface-minimal-active-fg-default);
		--fg-subtle: var(--color-info-surface-minimal-active-fg-subtle);

		--stroke-minimal: var(--color-info-surface-minimal-active-stroke-minimal);
		--stroke-subtle: var(--color-info-surface-minimal-active-stroke-subtle);
		--stroke-default: var(--color-info-surface-minimal-active-stroke-default);
		--stroke-strong: var(--color-info-surface-minimal-active-stroke-strong);
	}
	[data-container='surface'][data-appearance='info'][data-emphasis='subtle'] {
		--bg: var(--color-info-surface-subtle-idle-bg);
		--fg: var(--color-info-surface-subtle-idle-fg-default);
		--fg-subtle: var(--color-info-surface-subtle-idle-fg-subtle);

		--stroke-minimal: var(--color-info-surface-subtle-idle-stroke-minimal);
		--stroke-subtle: var(--color-info-surface-subtle-idle-stroke-subtle);
		--stroke-default: var(--color-info-surface-subtle-idle-stroke-default);
		--stroke-strong: var(--color-info-surface-subtle-idle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='info'][data-emphasis='subtle'][data-interactive]:hover {
		--bg: var(--color-info-surface-subtle-hover-bg);
		--fg: var(--color-info-surface-subtle-hover-fg-default);
		--fg-subtle: var(--color-info-surface-subtle-hover-fg-subtle);

		--stroke-minimal: var(--color-info-surface-subtle-hover-stroke-minimal);
		--stroke-subtle: var(--color-info-surface-subtle-hover-stroke-subtle);
		--stroke-default: var(--color-info-surface-subtle-hover-stroke-default);
		--stroke-strong: var(--color-info-surface-subtle-hover-stroke-strong);
	}
	[data-container='surface'][data-appearance='info'][data-emphasis='subtle'][data-interactive]:active,
	[data-container='surface'][data-appearance='info'][data-emphasis='subtle'].active {
		--bg: var(--color-info-surface-subtle-active-bg);
		--fg: var(--color-info-surface-subtle-active-fg-default);
		--fg-subtle: var(--color-info-surface-subtle-active-fg-subtle);

		--stroke-minimal: var(--color-info-surface-subtle-active-stroke-minimal);
		--stroke-subtle: var(--color-info-surface-subtle-active-stroke-subtle);
		--stroke-default: var(--color-info-surface-subtle-active-stroke-default);
		--stroke-strong: var(--color-info-surface-subtle-active-stroke-strong);
	}
	[data-container='surface'][data-appearance='info'][data-emphasis='heavy'] {
		--bg: var(--color-info-surface-heavy-idle-bg);
		--fg: var(--color-info-surface-heavy-idle-fg-default);
		--fg-subtle: var(--color-info-surface-heavy-idle-fg-subtle);

		--stroke-minimal: var(--color-info-surface-heavy-idle-stroke-minimal);
		--stroke-subtle: var(--color-info-surface-heavy-idle-stroke-subtle);
		--stroke-default: var(--color-info-surface-heavy-idle-stroke-default);
		--stroke-strong: var(--color-info-surface-heavy-idle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='info'][data-emphasis='heavy'][data-interactive]:hover {
		--bg: var(--color-info-surface-heavy-hover-bg);
		--fg: var(--color-info-surface-heavy-hover-fg-default);
		--fg-subtle: var(--color-info-surface-heavy-hover-fg-subtle);

		--stroke-minimal: var(--color-info-surface-heavy-hover-stroke-minimal);
		--stroke-subtle: var(--color-info-surface-heavy-hover-stroke-subtle);
		--stroke-default: var(--color-info-surface-heavy-hover-stroke-default);
		--stroke-strong: var(--color-info-surface-heavy-hover-stroke-strong);
	}
	[data-container='surface'][data-appearance='info'][data-emphasis='heavy'][data-interactive]:active,
	[data-container='surface'][data-appearance='info'][data-emphasis='heavy'].active {
		--bg: var(--color-info-surface-heavy-active-bg);
		--fg: var(--color-info-surface-heavy-active-fg-default);
		--fg-subtle: var(--color-info-surface-heavy-active-fg-subtle);

		--stroke-minimal: var(--color-info-surface-heavy-active-stroke-minimal);
		--stroke-subtle: var(--color-info-surface-heavy-active-stroke-subtle);
		--stroke-default: var(--color-info-surface-heavy-active-stroke-default);
		--stroke-strong: var(--color-info-surface-heavy-active-stroke-strong);
	}
	[data-container='surface'][data-appearance='info'][data-emphasis='default']
		> [data-container='surface'][data-appearance='info'][data-emphasis='default'] {
		--bg: var(--color-info-surface-ghost-bg);
		--fg: var(--color-info-surface-ghost-fg-default);
		--fg-subtle: var(--color-info-surface-ghost-fg-subtle);

		--stroke-minimal: var(--color-info-surface-ghost-stroke-minimal);
		--stroke-subtle: var(--color-info-surface-ghost-stroke-subtle);
		--stroke-default: var(--color-info-surface-ghost-stroke-default);
		--stroke-strong: var(--color-info-surface-ghost-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='info'][data-emphasis='minimal']
		> [data-container='surface'][data-appearance='info'][data-emphasis='minimal'] {
		--bg: var(--color-info-surface-subtle-bg);
		--fg: var(--color-info-surface-subtle-fg-default);
		--fg-subtle: var(--color-info-surface-subtle-fg-subtle);

		--stroke-minimal: var(--color-info-surface-subtle-stroke-minimal);
		--stroke-subtle: var(--color-info-surface-subtle-stroke-subtle);
		--stroke-default: var(--color-info-surface-subtle-stroke-default);
		--stroke-strong: var(--color-info-surface-subtle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-appearance='success'] {
		--accent-color: var(--color-success-base);
	}

		[data-appearance='success'] * {
			--shadow-color: var(--color-success-base);
		}
	[data-container='canvas'][data-appearance='success'][data-emphasis='default'] {
		--bg: var(--color-success-canvas-default-bg);
		--fg: var(--color-success-canvas-default-fg-default);
		--fg-subtle: var(--color-success-canvas-default-fg-subtle);

		--stroke-minimal: var(--color-success-canvas-default-stroke-minimal);
		--stroke-subtle: var(--color-success-canvas-default-stroke-subtle);
		--stroke-default: var(--color-success-canvas-default-stroke-default);
		--stroke-strong: var(--color-success-canvas-default-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='canvas'][data-appearance='success'][data-emphasis='minimal'] {
		--bg: var(--color-success-canvas-minimal-bg);
		--fg: var(--color-success-canvas-minimal-fg-default);
		--fg-subtle: var(--color-success-canvas-minimal-fg-subtle);

		--stroke-minimal: var(--color-success-canvas-minimal-stroke-minimal);
		--stroke-subtle: var(--color-success-canvas-minimal-stroke-subtle);
		--stroke-default: var(--color-success-canvas-minimal-stroke-default);
		--stroke-strong: var(--color-success-canvas-minimal-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='canvas'][data-appearance='success'][data-emphasis='subtle'] {
		--bg: var(--color-success-canvas-subtle-bg);
		--fg: var(--color-success-canvas-subtle-fg-default);
		--fg-subtle: var(--color-success-canvas-subtle-fg-subtle);

		--stroke-minimal: var(--color-success-canvas-subtle-stroke-minimal);
		--stroke-subtle: var(--color-success-canvas-subtle-stroke-subtle);
		--stroke-default: var(--color-success-canvas-subtle-stroke-default);
		--stroke-strong: var(--color-success-canvas-subtle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='canvas'][data-appearance='success'][data-emphasis='moderate'] {
		--bg: var(--color-success-canvas-moderate-bg);
		--fg: var(--color-success-canvas-moderate-fg-default);
		--fg-subtle: var(--color-success-canvas-moderate-fg-subtle);

		--stroke-minimal: var(--color-success-canvas-moderate-stroke-minimal);
		--stroke-subtle: var(--color-success-canvas-moderate-stroke-subtle);
		--stroke-default: var(--color-success-canvas-moderate-stroke-default);
		--stroke-strong: var(--color-success-canvas-moderate-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='success'][data-emphasis='default'] {
		--bg: var(--color-success-surface-default-idle-bg);
		--fg: var(--color-success-surface-default-idle-fg-default);
		--fg-subtle: var(--color-success-surface-default-idle-fg-subtle);

		--stroke-minimal: var(--color-success-surface-default-idle-stroke-minimal);
		--stroke-subtle: var(--color-success-surface-default-idle-stroke-subtle);
		--stroke-default: var(--color-success-surface-default-idle-stroke-default);
		--stroke-strong: var(--color-success-surface-default-idle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='success'][data-emphasis='default'][data-interactive]:hover {
		--bg: var(--color-success-surface-default-hover-bg);
		--fg: var(--color-success-surface-default-hover-fg-default);
		--fg-subtle: var(--color-success-surface-default-hover-fg-subtle);

		--stroke-minimal: var(--color-success-surface-default-hover-stroke-minimal);
		--stroke-subtle: var(--color-success-surface-default-hover-stroke-subtle);
		--stroke-default: var(--color-success-surface-default-hover-stroke-default);
		--stroke-strong: var(--color-success-surface-default-hover-stroke-strong);
	}
	[data-container='surface'][data-appearance='success'][data-emphasis='default'][data-interactive]:active,
	[data-container='surface'][data-appearance='success'][data-emphasis='default'].active {
		--bg: var(--color-success-surface-default-active-bg);
		--fg: var(--color-success-surface-default-active-fg-default);
		--fg-subtle: var(--color-success-surface-default-active-fg-subtle);

		--stroke-minimal: var(--color-success-surface-default-active-stroke-minimal);
		--stroke-subtle: var(--color-success-surface-default-active-stroke-subtle);
		--stroke-default: var(--color-success-surface-default-active-stroke-default);
		--stroke-strong: var(--color-success-surface-default-active-stroke-strong);
	}
	[data-container='surface'][data-appearance='success'][data-emphasis='ghost'] {
		--bg: var(--color-success-surface-ghost-idle-bg);
		--fg: var(--color-success-surface-ghost-idle-fg-default);
		--fg-subtle: var(--color-success-surface-ghost-idle-fg-subtle);

		--stroke-minimal: var(--color-success-surface-ghost-idle-stroke-minimal);
		--stroke-subtle: var(--color-success-surface-ghost-idle-stroke-subtle);
		--stroke-default: var(--color-success-surface-ghost-idle-stroke-default);
		--stroke-strong: var(--color-success-surface-ghost-idle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='success'][data-emphasis='ghost'][data-interactive]:hover {
		--bg: var(--color-success-surface-ghost-hover-bg);
		--fg: var(--color-success-surface-ghost-hover-fg-default);
		--fg-subtle: var(--color-success-surface-ghost-hover-fg-subtle);

		--stroke-minimal: var(--color-success-surface-ghost-hover-stroke-minimal);
		--stroke-subtle: var(--color-success-surface-ghost-hover-stroke-subtle);
		--stroke-default: var(--color-success-surface-ghost-hover-stroke-default);
		--stroke-strong: var(--color-success-surface-ghost-hover-stroke-strong);
	}
	[data-container='surface'][data-appearance='success'][data-emphasis='ghost'][data-interactive]:active,
	[data-container='surface'][data-appearance='success'][data-emphasis='ghost'].active {
		--bg: var(--color-success-surface-ghost-active-bg);
		--fg: var(--color-success-surface-ghost-active-fg-default);
		--fg-subtle: var(--color-success-surface-ghost-active-fg-subtle);

		--stroke-minimal: var(--color-success-surface-ghost-active-stroke-minimal);
		--stroke-subtle: var(--color-success-surface-ghost-active-stroke-subtle);
		--stroke-default: var(--color-success-surface-ghost-active-stroke-default);
		--stroke-strong: var(--color-success-surface-ghost-active-stroke-strong);
	}
	[data-container='surface'][data-appearance='success'][data-emphasis='minimal'] {
		--bg: var(--color-success-surface-minimal-idle-bg);
		--fg: var(--color-success-surface-minimal-idle-fg-default);
		--fg-subtle: var(--color-success-surface-minimal-idle-fg-subtle);

		--stroke-minimal: var(--color-success-surface-minimal-idle-stroke-minimal);
		--stroke-subtle: var(--color-success-surface-minimal-idle-stroke-subtle);
		--stroke-default: var(--color-success-surface-minimal-idle-stroke-default);
		--stroke-strong: var(--color-success-surface-minimal-idle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='success'][data-emphasis='minimal'][data-interactive]:hover {
		--bg: var(--color-success-surface-minimal-hover-bg);
		--fg: var(--color-success-surface-minimal-hover-fg-default);
		--fg-subtle: var(--color-success-surface-minimal-hover-fg-subtle);

		--stroke-minimal: var(--color-success-surface-minimal-hover-stroke-minimal);
		--stroke-subtle: var(--color-success-surface-minimal-hover-stroke-subtle);
		--stroke-default: var(--color-success-surface-minimal-hover-stroke-default);
		--stroke-strong: var(--color-success-surface-minimal-hover-stroke-strong);
	}
	[data-container='surface'][data-appearance='success'][data-emphasis='minimal'][data-interactive]:active,
	[data-container='surface'][data-appearance='success'][data-emphasis='minimal'].active {
		--bg: var(--color-success-surface-minimal-active-bg);
		--fg: var(--color-success-surface-minimal-active-fg-default);
		--fg-subtle: var(--color-success-surface-minimal-active-fg-subtle);

		--stroke-minimal: var(--color-success-surface-minimal-active-stroke-minimal);
		--stroke-subtle: var(--color-success-surface-minimal-active-stroke-subtle);
		--stroke-default: var(--color-success-surface-minimal-active-stroke-default);
		--stroke-strong: var(--color-success-surface-minimal-active-stroke-strong);
	}
	[data-container='surface'][data-appearance='success'][data-emphasis='subtle'] {
		--bg: var(--color-success-surface-subtle-idle-bg);
		--fg: var(--color-success-surface-subtle-idle-fg-default);
		--fg-subtle: var(--color-success-surface-subtle-idle-fg-subtle);

		--stroke-minimal: var(--color-success-surface-subtle-idle-stroke-minimal);
		--stroke-subtle: var(--color-success-surface-subtle-idle-stroke-subtle);
		--stroke-default: var(--color-success-surface-subtle-idle-stroke-default);
		--stroke-strong: var(--color-success-surface-subtle-idle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='success'][data-emphasis='subtle'][data-interactive]:hover {
		--bg: var(--color-success-surface-subtle-hover-bg);
		--fg: var(--color-success-surface-subtle-hover-fg-default);
		--fg-subtle: var(--color-success-surface-subtle-hover-fg-subtle);

		--stroke-minimal: var(--color-success-surface-subtle-hover-stroke-minimal);
		--stroke-subtle: var(--color-success-surface-subtle-hover-stroke-subtle);
		--stroke-default: var(--color-success-surface-subtle-hover-stroke-default);
		--stroke-strong: var(--color-success-surface-subtle-hover-stroke-strong);
	}
	[data-container='surface'][data-appearance='success'][data-emphasis='subtle'][data-interactive]:active,
	[data-container='surface'][data-appearance='success'][data-emphasis='subtle'].active {
		--bg: var(--color-success-surface-subtle-active-bg);
		--fg: var(--color-success-surface-subtle-active-fg-default);
		--fg-subtle: var(--color-success-surface-subtle-active-fg-subtle);

		--stroke-minimal: var(--color-success-surface-subtle-active-stroke-minimal);
		--stroke-subtle: var(--color-success-surface-subtle-active-stroke-subtle);
		--stroke-default: var(--color-success-surface-subtle-active-stroke-default);
		--stroke-strong: var(--color-success-surface-subtle-active-stroke-strong);
	}
	[data-container='surface'][data-appearance='success'][data-emphasis='heavy'] {
		--bg: var(--color-success-surface-heavy-idle-bg);
		--fg: var(--color-success-surface-heavy-idle-fg-default);
		--fg-subtle: var(--color-success-surface-heavy-idle-fg-subtle);

		--stroke-minimal: var(--color-success-surface-heavy-idle-stroke-minimal);
		--stroke-subtle: var(--color-success-surface-heavy-idle-stroke-subtle);
		--stroke-default: var(--color-success-surface-heavy-idle-stroke-default);
		--stroke-strong: var(--color-success-surface-heavy-idle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='success'][data-emphasis='heavy'][data-interactive]:hover {
		--bg: var(--color-success-surface-heavy-hover-bg);
		--fg: var(--color-success-surface-heavy-hover-fg-default);
		--fg-subtle: var(--color-success-surface-heavy-hover-fg-subtle);

		--stroke-minimal: var(--color-success-surface-heavy-hover-stroke-minimal);
		--stroke-subtle: var(--color-success-surface-heavy-hover-stroke-subtle);
		--stroke-default: var(--color-success-surface-heavy-hover-stroke-default);
		--stroke-strong: var(--color-success-surface-heavy-hover-stroke-strong);
	}
	[data-container='surface'][data-appearance='success'][data-emphasis='heavy'][data-interactive]:active,
	[data-container='surface'][data-appearance='success'][data-emphasis='heavy'].active {
		--bg: var(--color-success-surface-heavy-active-bg);
		--fg: var(--color-success-surface-heavy-active-fg-default);
		--fg-subtle: var(--color-success-surface-heavy-active-fg-subtle);

		--stroke-minimal: var(--color-success-surface-heavy-active-stroke-minimal);
		--stroke-subtle: var(--color-success-surface-heavy-active-stroke-subtle);
		--stroke-default: var(--color-success-surface-heavy-active-stroke-default);
		--stroke-strong: var(--color-success-surface-heavy-active-stroke-strong);
	}
	[data-container='surface'][data-appearance='success'][data-emphasis='default']
		> [data-container='surface'][data-appearance='success'][data-emphasis='default'] {
		--bg: var(--color-success-surface-ghost-bg);
		--fg: var(--color-success-surface-ghost-fg-default);
		--fg-subtle: var(--color-success-surface-ghost-fg-subtle);

		--stroke-minimal: var(--color-success-surface-ghost-stroke-minimal);
		--stroke-subtle: var(--color-success-surface-ghost-stroke-subtle);
		--stroke-default: var(--color-success-surface-ghost-stroke-default);
		--stroke-strong: var(--color-success-surface-ghost-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='success'][data-emphasis='minimal']
		> [data-container='surface'][data-appearance='success'][data-emphasis='minimal'] {
		--bg: var(--color-success-surface-subtle-bg);
		--fg: var(--color-success-surface-subtle-fg-default);
		--fg-subtle: var(--color-success-surface-subtle-fg-subtle);

		--stroke-minimal: var(--color-success-surface-subtle-stroke-minimal);
		--stroke-subtle: var(--color-success-surface-subtle-stroke-subtle);
		--stroke-default: var(--color-success-surface-subtle-stroke-default);
		--stroke-strong: var(--color-success-surface-subtle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-appearance='warning'] {
		--accent-color: var(--color-warning-base);
	}

		[data-appearance='warning'] * {
			--shadow-color: var(--color-warning-base);
		}
	[data-container='canvas'][data-appearance='warning'][data-emphasis='default'] {
		--bg: var(--color-warning-canvas-default-bg);
		--fg: var(--color-warning-canvas-default-fg-default);
		--fg-subtle: var(--color-warning-canvas-default-fg-subtle);

		--stroke-minimal: var(--color-warning-canvas-default-stroke-minimal);
		--stroke-subtle: var(--color-warning-canvas-default-stroke-subtle);
		--stroke-default: var(--color-warning-canvas-default-stroke-default);
		--stroke-strong: var(--color-warning-canvas-default-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='canvas'][data-appearance='warning'][data-emphasis='minimal'] {
		--bg: var(--color-warning-canvas-minimal-bg);
		--fg: var(--color-warning-canvas-minimal-fg-default);
		--fg-subtle: var(--color-warning-canvas-minimal-fg-subtle);

		--stroke-minimal: var(--color-warning-canvas-minimal-stroke-minimal);
		--stroke-subtle: var(--color-warning-canvas-minimal-stroke-subtle);
		--stroke-default: var(--color-warning-canvas-minimal-stroke-default);
		--stroke-strong: var(--color-warning-canvas-minimal-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='canvas'][data-appearance='warning'][data-emphasis='subtle'] {
		--bg: var(--color-warning-canvas-subtle-bg);
		--fg: var(--color-warning-canvas-subtle-fg-default);
		--fg-subtle: var(--color-warning-canvas-subtle-fg-subtle);

		--stroke-minimal: var(--color-warning-canvas-subtle-stroke-minimal);
		--stroke-subtle: var(--color-warning-canvas-subtle-stroke-subtle);
		--stroke-default: var(--color-warning-canvas-subtle-stroke-default);
		--stroke-strong: var(--color-warning-canvas-subtle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='canvas'][data-appearance='warning'][data-emphasis='moderate'] {
		--bg: var(--color-warning-canvas-moderate-bg);
		--fg: var(--color-warning-canvas-moderate-fg-default);
		--fg-subtle: var(--color-warning-canvas-moderate-fg-subtle);

		--stroke-minimal: var(--color-warning-canvas-moderate-stroke-minimal);
		--stroke-subtle: var(--color-warning-canvas-moderate-stroke-subtle);
		--stroke-default: var(--color-warning-canvas-moderate-stroke-default);
		--stroke-strong: var(--color-warning-canvas-moderate-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='warning'][data-emphasis='default'] {
		--bg: var(--color-warning-surface-default-idle-bg);
		--fg: var(--color-warning-surface-default-idle-fg-default);
		--fg-subtle: var(--color-warning-surface-default-idle-fg-subtle);

		--stroke-minimal: var(--color-warning-surface-default-idle-stroke-minimal);
		--stroke-subtle: var(--color-warning-surface-default-idle-stroke-subtle);
		--stroke-default: var(--color-warning-surface-default-idle-stroke-default);
		--stroke-strong: var(--color-warning-surface-default-idle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='warning'][data-emphasis='default'][data-interactive]:hover {
		--bg: var(--color-warning-surface-default-hover-bg);
		--fg: var(--color-warning-surface-default-hover-fg-default);
		--fg-subtle: var(--color-warning-surface-default-hover-fg-subtle);

		--stroke-minimal: var(--color-warning-surface-default-hover-stroke-minimal);
		--stroke-subtle: var(--color-warning-surface-default-hover-stroke-subtle);
		--stroke-default: var(--color-warning-surface-default-hover-stroke-default);
		--stroke-strong: var(--color-warning-surface-default-hover-stroke-strong);
	}
	[data-container='surface'][data-appearance='warning'][data-emphasis='default'][data-interactive]:active,
	[data-container='surface'][data-appearance='warning'][data-emphasis='default'].active {
		--bg: var(--color-warning-surface-default-active-bg);
		--fg: var(--color-warning-surface-default-active-fg-default);
		--fg-subtle: var(--color-warning-surface-default-active-fg-subtle);

		--stroke-minimal: var(--color-warning-surface-default-active-stroke-minimal);
		--stroke-subtle: var(--color-warning-surface-default-active-stroke-subtle);
		--stroke-default: var(--color-warning-surface-default-active-stroke-default);
		--stroke-strong: var(--color-warning-surface-default-active-stroke-strong);
	}
	[data-container='surface'][data-appearance='warning'][data-emphasis='ghost'] {
		--bg: var(--color-warning-surface-ghost-idle-bg);
		--fg: var(--color-warning-surface-ghost-idle-fg-default);
		--fg-subtle: var(--color-warning-surface-ghost-idle-fg-subtle);

		--stroke-minimal: var(--color-warning-surface-ghost-idle-stroke-minimal);
		--stroke-subtle: var(--color-warning-surface-ghost-idle-stroke-subtle);
		--stroke-default: var(--color-warning-surface-ghost-idle-stroke-default);
		--stroke-strong: var(--color-warning-surface-ghost-idle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='warning'][data-emphasis='ghost'][data-interactive]:hover {
		--bg: var(--color-warning-surface-ghost-hover-bg);
		--fg: var(--color-warning-surface-ghost-hover-fg-default);
		--fg-subtle: var(--color-warning-surface-ghost-hover-fg-subtle);

		--stroke-minimal: var(--color-warning-surface-ghost-hover-stroke-minimal);
		--stroke-subtle: var(--color-warning-surface-ghost-hover-stroke-subtle);
		--stroke-default: var(--color-warning-surface-ghost-hover-stroke-default);
		--stroke-strong: var(--color-warning-surface-ghost-hover-stroke-strong);
	}
	[data-container='surface'][data-appearance='warning'][data-emphasis='ghost'][data-interactive]:active,
	[data-container='surface'][data-appearance='warning'][data-emphasis='ghost'].active {
		--bg: var(--color-warning-surface-ghost-active-bg);
		--fg: var(--color-warning-surface-ghost-active-fg-default);
		--fg-subtle: var(--color-warning-surface-ghost-active-fg-subtle);

		--stroke-minimal: var(--color-warning-surface-ghost-active-stroke-minimal);
		--stroke-subtle: var(--color-warning-surface-ghost-active-stroke-subtle);
		--stroke-default: var(--color-warning-surface-ghost-active-stroke-default);
		--stroke-strong: var(--color-warning-surface-ghost-active-stroke-strong);
	}
	[data-container='surface'][data-appearance='warning'][data-emphasis='minimal'] {
		--bg: var(--color-warning-surface-minimal-idle-bg);
		--fg: var(--color-warning-surface-minimal-idle-fg-default);
		--fg-subtle: var(--color-warning-surface-minimal-idle-fg-subtle);

		--stroke-minimal: var(--color-warning-surface-minimal-idle-stroke-minimal);
		--stroke-subtle: var(--color-warning-surface-minimal-idle-stroke-subtle);
		--stroke-default: var(--color-warning-surface-minimal-idle-stroke-default);
		--stroke-strong: var(--color-warning-surface-minimal-idle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='warning'][data-emphasis='minimal'][data-interactive]:hover {
		--bg: var(--color-warning-surface-minimal-hover-bg);
		--fg: var(--color-warning-surface-minimal-hover-fg-default);
		--fg-subtle: var(--color-warning-surface-minimal-hover-fg-subtle);

		--stroke-minimal: var(--color-warning-surface-minimal-hover-stroke-minimal);
		--stroke-subtle: var(--color-warning-surface-minimal-hover-stroke-subtle);
		--stroke-default: var(--color-warning-surface-minimal-hover-stroke-default);
		--stroke-strong: var(--color-warning-surface-minimal-hover-stroke-strong);
	}
	[data-container='surface'][data-appearance='warning'][data-emphasis='minimal'][data-interactive]:active,
	[data-container='surface'][data-appearance='warning'][data-emphasis='minimal'].active {
		--bg: var(--color-warning-surface-minimal-active-bg);
		--fg: var(--color-warning-surface-minimal-active-fg-default);
		--fg-subtle: var(--color-warning-surface-minimal-active-fg-subtle);

		--stroke-minimal: var(--color-warning-surface-minimal-active-stroke-minimal);
		--stroke-subtle: var(--color-warning-surface-minimal-active-stroke-subtle);
		--stroke-default: var(--color-warning-surface-minimal-active-stroke-default);
		--stroke-strong: var(--color-warning-surface-minimal-active-stroke-strong);
	}
	[data-container='surface'][data-appearance='warning'][data-emphasis='subtle'] {
		--bg: var(--color-warning-surface-subtle-idle-bg);
		--fg: var(--color-warning-surface-subtle-idle-fg-default);
		--fg-subtle: var(--color-warning-surface-subtle-idle-fg-subtle);

		--stroke-minimal: var(--color-warning-surface-subtle-idle-stroke-minimal);
		--stroke-subtle: var(--color-warning-surface-subtle-idle-stroke-subtle);
		--stroke-default: var(--color-warning-surface-subtle-idle-stroke-default);
		--stroke-strong: var(--color-warning-surface-subtle-idle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='warning'][data-emphasis='subtle'][data-interactive]:hover {
		--bg: var(--color-warning-surface-subtle-hover-bg);
		--fg: var(--color-warning-surface-subtle-hover-fg-default);
		--fg-subtle: var(--color-warning-surface-subtle-hover-fg-subtle);

		--stroke-minimal: var(--color-warning-surface-subtle-hover-stroke-minimal);
		--stroke-subtle: var(--color-warning-surface-subtle-hover-stroke-subtle);
		--stroke-default: var(--color-warning-surface-subtle-hover-stroke-default);
		--stroke-strong: var(--color-warning-surface-subtle-hover-stroke-strong);
	}
	[data-container='surface'][data-appearance='warning'][data-emphasis='subtle'][data-interactive]:active,
	[data-container='surface'][data-appearance='warning'][data-emphasis='subtle'].active {
		--bg: var(--color-warning-surface-subtle-active-bg);
		--fg: var(--color-warning-surface-subtle-active-fg-default);
		--fg-subtle: var(--color-warning-surface-subtle-active-fg-subtle);

		--stroke-minimal: var(--color-warning-surface-subtle-active-stroke-minimal);
		--stroke-subtle: var(--color-warning-surface-subtle-active-stroke-subtle);
		--stroke-default: var(--color-warning-surface-subtle-active-stroke-default);
		--stroke-strong: var(--color-warning-surface-subtle-active-stroke-strong);
	}
	[data-container='surface'][data-appearance='warning'][data-emphasis='heavy'] {
		--bg: var(--color-warning-surface-heavy-idle-bg);
		--fg: var(--color-warning-surface-heavy-idle-fg-default);
		--fg-subtle: var(--color-warning-surface-heavy-idle-fg-subtle);

		--stroke-minimal: var(--color-warning-surface-heavy-idle-stroke-minimal);
		--stroke-subtle: var(--color-warning-surface-heavy-idle-stroke-subtle);
		--stroke-default: var(--color-warning-surface-heavy-idle-stroke-default);
		--stroke-strong: var(--color-warning-surface-heavy-idle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='warning'][data-emphasis='heavy'][data-interactive]:hover {
		--bg: var(--color-warning-surface-heavy-hover-bg);
		--fg: var(--color-warning-surface-heavy-hover-fg-default);
		--fg-subtle: var(--color-warning-surface-heavy-hover-fg-subtle);

		--stroke-minimal: var(--color-warning-surface-heavy-hover-stroke-minimal);
		--stroke-subtle: var(--color-warning-surface-heavy-hover-stroke-subtle);
		--stroke-default: var(--color-warning-surface-heavy-hover-stroke-default);
		--stroke-strong: var(--color-warning-surface-heavy-hover-stroke-strong);
	}
	[data-container='surface'][data-appearance='warning'][data-emphasis='heavy'][data-interactive]:active,
	[data-container='surface'][data-appearance='warning'][data-emphasis='heavy'].active {
		--bg: var(--color-warning-surface-heavy-active-bg);
		--fg: var(--color-warning-surface-heavy-active-fg-default);
		--fg-subtle: var(--color-warning-surface-heavy-active-fg-subtle);

		--stroke-minimal: var(--color-warning-surface-heavy-active-stroke-minimal);
		--stroke-subtle: var(--color-warning-surface-heavy-active-stroke-subtle);
		--stroke-default: var(--color-warning-surface-heavy-active-stroke-default);
		--stroke-strong: var(--color-warning-surface-heavy-active-stroke-strong);
	}
	[data-container='surface'][data-appearance='warning'][data-emphasis='default']
		> [data-container='surface'][data-appearance='warning'][data-emphasis='default'] {
		--bg: var(--color-warning-surface-ghost-bg);
		--fg: var(--color-warning-surface-ghost-fg-default);
		--fg-subtle: var(--color-warning-surface-ghost-fg-subtle);

		--stroke-minimal: var(--color-warning-surface-ghost-stroke-minimal);
		--stroke-subtle: var(--color-warning-surface-ghost-stroke-subtle);
		--stroke-default: var(--color-warning-surface-ghost-stroke-default);
		--stroke-strong: var(--color-warning-surface-ghost-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='warning'][data-emphasis='minimal']
		> [data-container='surface'][data-appearance='warning'][data-emphasis='minimal'] {
		--bg: var(--color-warning-surface-subtle-bg);
		--fg: var(--color-warning-surface-subtle-fg-default);
		--fg-subtle: var(--color-warning-surface-subtle-fg-subtle);

		--stroke-minimal: var(--color-warning-surface-subtle-stroke-minimal);
		--stroke-subtle: var(--color-warning-surface-subtle-stroke-subtle);
		--stroke-default: var(--color-warning-surface-subtle-stroke-default);
		--stroke-strong: var(--color-warning-surface-subtle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-appearance='danger'] {
		--accent-color: var(--color-danger-base);
	}

		[data-appearance='danger'] * {
			--shadow-color: var(--color-danger-base);
		}
	[data-container='canvas'][data-appearance='danger'][data-emphasis='default'] {
		--bg: var(--color-danger-canvas-default-bg);
		--fg: var(--color-danger-canvas-default-fg-default);
		--fg-subtle: var(--color-danger-canvas-default-fg-subtle);

		--stroke-minimal: var(--color-danger-canvas-default-stroke-minimal);
		--stroke-subtle: var(--color-danger-canvas-default-stroke-subtle);
		--stroke-default: var(--color-danger-canvas-default-stroke-default);
		--stroke-strong: var(--color-danger-canvas-default-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='canvas'][data-appearance='danger'][data-emphasis='minimal'] {
		--bg: var(--color-danger-canvas-minimal-bg);
		--fg: var(--color-danger-canvas-minimal-fg-default);
		--fg-subtle: var(--color-danger-canvas-minimal-fg-subtle);

		--stroke-minimal: var(--color-danger-canvas-minimal-stroke-minimal);
		--stroke-subtle: var(--color-danger-canvas-minimal-stroke-subtle);
		--stroke-default: var(--color-danger-canvas-minimal-stroke-default);
		--stroke-strong: var(--color-danger-canvas-minimal-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='canvas'][data-appearance='danger'][data-emphasis='subtle'] {
		--bg: var(--color-danger-canvas-subtle-bg);
		--fg: var(--color-danger-canvas-subtle-fg-default);
		--fg-subtle: var(--color-danger-canvas-subtle-fg-subtle);

		--stroke-minimal: var(--color-danger-canvas-subtle-stroke-minimal);
		--stroke-subtle: var(--color-danger-canvas-subtle-stroke-subtle);
		--stroke-default: var(--color-danger-canvas-subtle-stroke-default);
		--stroke-strong: var(--color-danger-canvas-subtle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='canvas'][data-appearance='danger'][data-emphasis='moderate'] {
		--bg: var(--color-danger-canvas-moderate-bg);
		--fg: var(--color-danger-canvas-moderate-fg-default);
		--fg-subtle: var(--color-danger-canvas-moderate-fg-subtle);

		--stroke-minimal: var(--color-danger-canvas-moderate-stroke-minimal);
		--stroke-subtle: var(--color-danger-canvas-moderate-stroke-subtle);
		--stroke-default: var(--color-danger-canvas-moderate-stroke-default);
		--stroke-strong: var(--color-danger-canvas-moderate-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='danger'][data-emphasis='default'] {
		--bg: var(--color-danger-surface-default-idle-bg);
		--fg: var(--color-danger-surface-default-idle-fg-default);
		--fg-subtle: var(--color-danger-surface-default-idle-fg-subtle);

		--stroke-minimal: var(--color-danger-surface-default-idle-stroke-minimal);
		--stroke-subtle: var(--color-danger-surface-default-idle-stroke-subtle);
		--stroke-default: var(--color-danger-surface-default-idle-stroke-default);
		--stroke-strong: var(--color-danger-surface-default-idle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='danger'][data-emphasis='default'][data-interactive]:hover {
		--bg: var(--color-danger-surface-default-hover-bg);
		--fg: var(--color-danger-surface-default-hover-fg-default);
		--fg-subtle: var(--color-danger-surface-default-hover-fg-subtle);

		--stroke-minimal: var(--color-danger-surface-default-hover-stroke-minimal);
		--stroke-subtle: var(--color-danger-surface-default-hover-stroke-subtle);
		--stroke-default: var(--color-danger-surface-default-hover-stroke-default);
		--stroke-strong: var(--color-danger-surface-default-hover-stroke-strong);
	}
	[data-container='surface'][data-appearance='danger'][data-emphasis='default'][data-interactive]:active,
	[data-container='surface'][data-appearance='danger'][data-emphasis='default'].active {
		--bg: var(--color-danger-surface-default-active-bg);
		--fg: var(--color-danger-surface-default-active-fg-default);
		--fg-subtle: var(--color-danger-surface-default-active-fg-subtle);

		--stroke-minimal: var(--color-danger-surface-default-active-stroke-minimal);
		--stroke-subtle: var(--color-danger-surface-default-active-stroke-subtle);
		--stroke-default: var(--color-danger-surface-default-active-stroke-default);
		--stroke-strong: var(--color-danger-surface-default-active-stroke-strong);
	}
	[data-container='surface'][data-appearance='danger'][data-emphasis='ghost'] {
		--bg: var(--color-danger-surface-ghost-idle-bg);
		--fg: var(--color-danger-surface-ghost-idle-fg-default);
		--fg-subtle: var(--color-danger-surface-ghost-idle-fg-subtle);

		--stroke-minimal: var(--color-danger-surface-ghost-idle-stroke-minimal);
		--stroke-subtle: var(--color-danger-surface-ghost-idle-stroke-subtle);
		--stroke-default: var(--color-danger-surface-ghost-idle-stroke-default);
		--stroke-strong: var(--color-danger-surface-ghost-idle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='danger'][data-emphasis='ghost'][data-interactive]:hover {
		--bg: var(--color-danger-surface-ghost-hover-bg);
		--fg: var(--color-danger-surface-ghost-hover-fg-default);
		--fg-subtle: var(--color-danger-surface-ghost-hover-fg-subtle);

		--stroke-minimal: var(--color-danger-surface-ghost-hover-stroke-minimal);
		--stroke-subtle: var(--color-danger-surface-ghost-hover-stroke-subtle);
		--stroke-default: var(--color-danger-surface-ghost-hover-stroke-default);
		--stroke-strong: var(--color-danger-surface-ghost-hover-stroke-strong);
	}
	[data-container='surface'][data-appearance='danger'][data-emphasis='ghost'][data-interactive]:active,
	[data-container='surface'][data-appearance='danger'][data-emphasis='ghost'].active {
		--bg: var(--color-danger-surface-ghost-active-bg);
		--fg: var(--color-danger-surface-ghost-active-fg-default);
		--fg-subtle: var(--color-danger-surface-ghost-active-fg-subtle);

		--stroke-minimal: var(--color-danger-surface-ghost-active-stroke-minimal);
		--stroke-subtle: var(--color-danger-surface-ghost-active-stroke-subtle);
		--stroke-default: var(--color-danger-surface-ghost-active-stroke-default);
		--stroke-strong: var(--color-danger-surface-ghost-active-stroke-strong);
	}
	[data-container='surface'][data-appearance='danger'][data-emphasis='minimal'] {
		--bg: var(--color-danger-surface-minimal-idle-bg);
		--fg: var(--color-danger-surface-minimal-idle-fg-default);
		--fg-subtle: var(--color-danger-surface-minimal-idle-fg-subtle);

		--stroke-minimal: var(--color-danger-surface-minimal-idle-stroke-minimal);
		--stroke-subtle: var(--color-danger-surface-minimal-idle-stroke-subtle);
		--stroke-default: var(--color-danger-surface-minimal-idle-stroke-default);
		--stroke-strong: var(--color-danger-surface-minimal-idle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='danger'][data-emphasis='minimal'][data-interactive]:hover {
		--bg: var(--color-danger-surface-minimal-hover-bg);
		--fg: var(--color-danger-surface-minimal-hover-fg-default);
		--fg-subtle: var(--color-danger-surface-minimal-hover-fg-subtle);

		--stroke-minimal: var(--color-danger-surface-minimal-hover-stroke-minimal);
		--stroke-subtle: var(--color-danger-surface-minimal-hover-stroke-subtle);
		--stroke-default: var(--color-danger-surface-minimal-hover-stroke-default);
		--stroke-strong: var(--color-danger-surface-minimal-hover-stroke-strong);
	}
	[data-container='surface'][data-appearance='danger'][data-emphasis='minimal'][data-interactive]:active,
	[data-container='surface'][data-appearance='danger'][data-emphasis='minimal'].active {
		--bg: var(--color-danger-surface-minimal-active-bg);
		--fg: var(--color-danger-surface-minimal-active-fg-default);
		--fg-subtle: var(--color-danger-surface-minimal-active-fg-subtle);

		--stroke-minimal: var(--color-danger-surface-minimal-active-stroke-minimal);
		--stroke-subtle: var(--color-danger-surface-minimal-active-stroke-subtle);
		--stroke-default: var(--color-danger-surface-minimal-active-stroke-default);
		--stroke-strong: var(--color-danger-surface-minimal-active-stroke-strong);
	}
	[data-container='surface'][data-appearance='danger'][data-emphasis='subtle'] {
		--bg: var(--color-danger-surface-subtle-idle-bg);
		--fg: var(--color-danger-surface-subtle-idle-fg-default);
		--fg-subtle: var(--color-danger-surface-subtle-idle-fg-subtle);

		--stroke-minimal: var(--color-danger-surface-subtle-idle-stroke-minimal);
		--stroke-subtle: var(--color-danger-surface-subtle-idle-stroke-subtle);
		--stroke-default: var(--color-danger-surface-subtle-idle-stroke-default);
		--stroke-strong: var(--color-danger-surface-subtle-idle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='danger'][data-emphasis='subtle'][data-interactive]:hover {
		--bg: var(--color-danger-surface-subtle-hover-bg);
		--fg: var(--color-danger-surface-subtle-hover-fg-default);
		--fg-subtle: var(--color-danger-surface-subtle-hover-fg-subtle);

		--stroke-minimal: var(--color-danger-surface-subtle-hover-stroke-minimal);
		--stroke-subtle: var(--color-danger-surface-subtle-hover-stroke-subtle);
		--stroke-default: var(--color-danger-surface-subtle-hover-stroke-default);
		--stroke-strong: var(--color-danger-surface-subtle-hover-stroke-strong);
	}
	[data-container='surface'][data-appearance='danger'][data-emphasis='subtle'][data-interactive]:active,
	[data-container='surface'][data-appearance='danger'][data-emphasis='subtle'].active {
		--bg: var(--color-danger-surface-subtle-active-bg);
		--fg: var(--color-danger-surface-subtle-active-fg-default);
		--fg-subtle: var(--color-danger-surface-subtle-active-fg-subtle);

		--stroke-minimal: var(--color-danger-surface-subtle-active-stroke-minimal);
		--stroke-subtle: var(--color-danger-surface-subtle-active-stroke-subtle);
		--stroke-default: var(--color-danger-surface-subtle-active-stroke-default);
		--stroke-strong: var(--color-danger-surface-subtle-active-stroke-strong);
	}
	[data-container='surface'][data-appearance='danger'][data-emphasis='heavy'] {
		--bg: var(--color-danger-surface-heavy-idle-bg);
		--fg: var(--color-danger-surface-heavy-idle-fg-default);
		--fg-subtle: var(--color-danger-surface-heavy-idle-fg-subtle);

		--stroke-minimal: var(--color-danger-surface-heavy-idle-stroke-minimal);
		--stroke-subtle: var(--color-danger-surface-heavy-idle-stroke-subtle);
		--stroke-default: var(--color-danger-surface-heavy-idle-stroke-default);
		--stroke-strong: var(--color-danger-surface-heavy-idle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='danger'][data-emphasis='heavy'][data-interactive]:hover {
		--bg: var(--color-danger-surface-heavy-hover-bg);
		--fg: var(--color-danger-surface-heavy-hover-fg-default);
		--fg-subtle: var(--color-danger-surface-heavy-hover-fg-subtle);

		--stroke-minimal: var(--color-danger-surface-heavy-hover-stroke-minimal);
		--stroke-subtle: var(--color-danger-surface-heavy-hover-stroke-subtle);
		--stroke-default: var(--color-danger-surface-heavy-hover-stroke-default);
		--stroke-strong: var(--color-danger-surface-heavy-hover-stroke-strong);
	}
	[data-container='surface'][data-appearance='danger'][data-emphasis='heavy'][data-interactive]:active,
	[data-container='surface'][data-appearance='danger'][data-emphasis='heavy'].active {
		--bg: var(--color-danger-surface-heavy-active-bg);
		--fg: var(--color-danger-surface-heavy-active-fg-default);
		--fg-subtle: var(--color-danger-surface-heavy-active-fg-subtle);

		--stroke-minimal: var(--color-danger-surface-heavy-active-stroke-minimal);
		--stroke-subtle: var(--color-danger-surface-heavy-active-stroke-subtle);
		--stroke-default: var(--color-danger-surface-heavy-active-stroke-default);
		--stroke-strong: var(--color-danger-surface-heavy-active-stroke-strong);
	}
	[data-container='surface'][data-appearance='danger'][data-emphasis='default']
		> [data-container='surface'][data-appearance='danger'][data-emphasis='default'] {
		--bg: var(--color-danger-surface-ghost-bg);
		--fg: var(--color-danger-surface-ghost-fg-default);
		--fg-subtle: var(--color-danger-surface-ghost-fg-subtle);

		--stroke-minimal: var(--color-danger-surface-ghost-stroke-minimal);
		--stroke-subtle: var(--color-danger-surface-ghost-stroke-subtle);
		--stroke-default: var(--color-danger-surface-ghost-stroke-default);
		--stroke-strong: var(--color-danger-surface-ghost-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
	[data-container='surface'][data-appearance='danger'][data-emphasis='minimal']
		> [data-container='surface'][data-appearance='danger'][data-emphasis='minimal'] {
		--bg: var(--color-danger-surface-subtle-bg);
		--fg: var(--color-danger-surface-subtle-fg-default);
		--fg-subtle: var(--color-danger-surface-subtle-fg-subtle);

		--stroke-minimal: var(--color-danger-surface-subtle-stroke-minimal);
		--stroke-subtle: var(--color-danger-surface-subtle-stroke-subtle);
		--stroke-default: var(--color-danger-surface-subtle-stroke-default);
		--stroke-strong: var(--color-danger-surface-subtle-stroke-strong);

		background: var(--bg);
		color: var(--fg);
	}
}

/* Shadows */

/* Shadow system using HSL values for better customization */

@layer base {
	:root,
	body[data-theme='light'] {
		--dialog-backdrop: #ccd1d666;
		--shadow-resting-small: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;
		--shadow-resting-medium: 0px 1px 1px 0px #1f23280f;
		--shadow-resting-large: 0px 1px 1px 0px #1f23280f, 0px 3px 6px 0px #1f23280f;
		--shadow-floating-small: 0px 0px 0px 1px #d1d9e080, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f;
		--shadow-floating-medium:
			0px 0px 0px 1px #d1d9e080, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14,
			0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14;
		--shadow-floating-large: 0px 0px 0px 1px #d1d9e080, 0px 40px 80px 0px #25292e3d;
		--floating-bg: var(--color-neutral-canvas-default-bg);
		--shadows-tooltip: var(--shadow-floating-small);
		--shadows-dropdown: var(--shadow-floating-small);
		--shadows-contextMenu: var(--shadow-floating-small);
		--shadows-dialog: var(--shadow-floating-medium);
		--shadows-popover: var(--shadow-floating-small);
	}

	:root,
	body[data-theme='dark'] {
		--dialog-backdrop: #25282c66;
		--shadow-resting-small: 0px 1px 1px 0px #010409cc;
		--shadow-resting-medium: 0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999;
		--shadow-resting-large: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
		--shadow-floating-small: 0px 0px 0px 1px #23292f, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
		--shadow-floating-medium:
			0px 0px 0px 1px #23292f, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966,
			0px 48px 96px -24px #01040966;
		--shadow-floating-large: 0px 0px 0px 1px #23292f, 0px 24px 48px 0px #010409;
		--floating-bg: var(--color-neutral-canvas-minimal-bg);
	}
}

/* "Subtle" overrides as they are broken currently until we have them in the system properly */

@layer themes {
	:root {
	}
}