@tailwind base;
@tailwind components;
@tailwind utilities;

/**
 * shadcn's tokens, scoped to our own container rather than :root - wp-admin is not ours
 * to restyle, and a plugin that redefines --background for the whole page is a plugin
 * that breaks the next one.
 */
.submex-ui {
	--sb-background: 0 0% 100%;
	--sb-foreground: 240 10% 12%;
	--sb-card: 0 0% 100%;
	--sb-card-foreground: 240 10% 12%;
	--sb-primary: 243 75% 59%;
	--sb-primary-foreground: 0 0% 100%;
	--sb-secondary: 240 5% 96%;
	--sb-secondary-foreground: 240 6% 25%;
	--sb-muted: 240 5% 96%;
	--sb-muted-foreground: 240 4% 46%;
	--sb-accent: 240 5% 96%;
	--sb-accent-foreground: 240 6% 25%;
	--sb-destructive: 0 72% 45%;
	--sb-destructive-foreground: 0 0% 100%;
	--sb-success: 136 100% 22%;
	--sb-success-foreground: 0 0% 100%;
	--sb-border: 240 6% 90%;
	--sb-input: 240 6% 90%;
	--sb-ring: 243 75% 59%;
	--sb-radius: 0.65rem;

	color: hsl( var( --sb-foreground ) );
	font-size: 14px;
	line-height: 1.5;
}

:where(.submex-ui) *,
:where(.submex-ui) *::before,
:where(.submex-ui) *::after {
	box-sizing: border-box;
}

/* Preflight is off, so the resets the components rely on are stated here, scoped - and
   inside :where(), so they carry no specificity and every utility class still wins. */

/* Tailwind's border utilities set a width and nothing else; preflight is what normally
   supplies the style and colour. Without this every border class draws nothing.
   Zero specificity through :where(), or this reset ties with .sb-border and wins on order,
   which left every outline button and bordered panel with no border at all. */
:where(.submex-ui) :where(*, *::before, *::after) {
	border-width: 0;
	border-style: solid;
	border-color: hsl( var( --sb-border ) );
}

/* The browser's and wp-admin's own button, input and link styles would otherwise show
   through every component built from those elements. */
:where(.submex-ui) :where(button, input, select, textarea) {
	margin: 0;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

:where(.submex-ui) button {
	background: transparent;
	box-shadow: none;
	cursor: pointer;
	line-height: inherit;
}

:where(.submex-ui) button:disabled {
	cursor: default;
}

:where(.submex-ui) a {
	color: inherit;
	text-decoration: none;
	box-shadow: none;
}

:where(.submex-ui) :where(a, button):focus-visible {
	outline: 2px solid hsl( var( --sb-ring ) );
	outline-offset: 2px;
}

:where(.submex-ui) svg {
	display: inline-block;
	vertical-align: middle;
}

:where(.submex-ui) input[type="checkbox"] {
	border-width: 1px;
}
.submex-ui h2,
.submex-ui h3,
.submex-ui p,
.submex-ui ul,
.submex-ui ol {
	margin: 0;
	padding: 0;
}

.submex-ui ul,
.submex-ui ol {
	list-style: none;
}