/* Applies to theme instead of body for specificity; otherwise color tokens
 * aren't available. */
[data-theme] {
	--mw-background: var(--sl-color-neutral-200);

	/* -------- Colors -------- */
	/* TODO: Another neutral color for readonly cells? */

	--mw-t-color-gray: var(--sl-color-stone-100);
	--mw-t-color-gray-selected: var(--sl-color-stone-300);
	--mw-t-color-gray-focused: var(--sl-color-stone-300);

	--mw-t-color-yellow: var(--sl-color-yellow-100);
	--mw-t-color-yellow-selected: var(--sl-color-yellow-300);
	--mw-t-color-yellow-focused: var(--sl-color-yellow-300);

	--mw-t-color-green: var(--sl-color-green-100);
	--mw-t-color-green-selected: var(--sl-color-green-300);
	--mw-t-color-green-focused: var(--sl-color-green-300);

	--mw-t-color-blue: var(--sl-color-sky-100);
	--mw-t-color-blue-selected: var(--sl-color-sky-300);
	--mw-t-color-blue-focused: var(--sl-color-sky-300);

	--mw-t-selected-color: var(--sl-color-neutral-400);
	--mw-t-selected-width: 2px;
	--mw-t-focused-color: var(--sl-color-neutral-700);
	--mw-t-focused-width: 2px;

	/* --mw-t-hgrid-color: var(--sl-color-neutral-200); */
	--mw-t-hgrid-color: var(--sl-color-red-200);
	/* --mw-t-hgrid-color-selected: var(--sl-color-neutral-400); */
	--mw-t-hgrid-color-selected: var(--sl-color-red-400);
	/* --mw-t-hgrid-color-focused: var(--sl-color-neutral-400); */
	--mw-t-hgrid-color-focused: var(--sl-color-red-600);
	--mw-t-hgrid-width: 2px;
	--mw-t-hgrid-width-selected: 0px;
	--mw-t-hgrid-width-focused: 0px;
	/* --mw-t-vgrid-color: var(--sl-color-neutral-200); */
	--mw-t-vgrid-color: var(--sl-color-red-200);
	/* --mw-t-vgrid-color-selected: var(--sl-color-neutral-400); */
	--mw-t-vgrid-color-selected: var(--sl-color-red-400);
	/* --mw-t-vgrid-color-focused: var(--sl-color-neutral-400); */
	--mw-t-vgrid-color-focused: var(--sl-color-red-600);
	--mw-t-vgrid-width: 2px;
	--mw-t-vgrid-width-selected: 0px;
	--mw-t-vgrid-width-focused: 0px;
	--mw-t-padding: 3px;
	--mw-t-padding-selected: 2px;
	--mw-t-padding-focused: 2px;

	--mw-z-t-popup-menu: 60;
	--mw-z-t-very-sticky-selection: 50;
	--mw-z-t-very-sticky: 40;
	--mw-z-t-sticky-selection: 30;
	--mw-z-t-sticky: 20;
	--mw-z-t-selection: 10;
}

html {
	overflow: hidden;
}

body {
	display: flex;
	background: var(--mw-background);
	height: 100vh;
	margin: 0;
}