/* Shared toolkit defaults; application branding can override these on :root. */
:root {
    --ui-font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    --ui-font-family-code: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --ui-font-size: 0.75rem;
    --ui-font-size-xs: 0.75rem;
    --ui-font-size-s: 0.8125rem;
    --ui-font-size-m: 0.875rem;
    --ui-font-size-l: 1rem;
    --ui-font-size-xl: 1.125rem;
    --ui-font-size-xxl: 1.5rem;

    /* Shared layout spacing and interaction states */
    --ui-space-xxs: 0.125rem;
    --ui-space-xs: 0.25rem;
    --ui-space-s: 0.5rem;
    --ui-space-sm: 0.75rem;
    --ui-space-m: 1rem;
    --ui-space-l: 1.5rem;
    --ui-space-xl: 2rem;

    --ui-focus-width: 3px;
    --ui-focus-color: color-mix(in srgb, var(--ui-color-primary) 18%, transparent);
    --ui-focus-border: color-mix(in srgb, var(--ui-color-primary) 35%, transparent);
    --ui-focus-ring: 0 0 0 var(--ui-focus-width) var(--ui-focus-color);
    --ui-disabled-opacity: 0.55;

    /* Semantic colors */
    --ui-color-primary: #7f1439;
    --ui-color-primary-hover: #67102f;
    --ui-color-primary-text: #8f1947;
    --ui-color-highlight: #f4ead5;
    --ui-color-accent: #f7be32;
    --ui-color-text: #333;
    --ui-color-text-heading: #27272a;
    --ui-color-text-muted: #6b7280;
    --ui-color-text-subtle: #9ca3af;
    --ui-color-error: var(--ui-color-primary);
    --ui-color-surface: #fff;
    --ui-color-surface-hover: #f5f5f5;
    --ui-color-surface-code: #f8f7f5;
    --ui-color-surface-section: #fbf9fa;
    --ui-color-surface-section-hover: #f7f3f5;
    --ui-color-surface-header: #fbf9f5;
    --ui-color-surface-sidebar: #f8f6f3;
    --ui-color-surface-card: #fcfbfa;
    --ui-color-surface-placeholder: color-mix(in srgb, var(--ui-color-highlight) 25%, var(--ui-color-surface));
    --ui-color-border: #dedede;
    --ui-color-border-subtle: #ededed;
    --ui-color-border-control: #c9c9c9;
    --ui-color-border-hover: #b7b7b7;
    --ui-color-border-muted: #e5e7eb;
    --ui-color-border-strong: #d1d5db;
    --ui-color-on-accent: #fff;
    --ui-color-success: #00833b;
    --ui-color-success-control: #5cb85c;
    --ui-color-success-accent: #aec5b2;
    --ui-color-danger: #c12a4d;
    --ui-color-danger-hover: #a72242;

    /* State tones: badges use bg; larger panels use surface. */
    --ui-color-success-bg: #dcfce7;
    --ui-color-success-surface: #f0fdf4;
    --ui-color-success-border: #bbf7d0;
    --ui-color-success-text: #166534;
    --ui-color-info-bg: #dbeafe;
    --ui-color-info-surface: #eff6ff;
    --ui-color-info-border: #bfdbfe;
    --ui-color-info-text: #1d4ed8;
    --ui-color-warning-bg: #fef3c7;
    --ui-color-warning-surface: #fffbeb;
    --ui-color-warning-border: #fde68a;
    --ui-color-warning-text: #92400e;
    --ui-color-danger-bg: #fde8ee;
    --ui-color-danger-surface: #fef2f5;
    --ui-color-danger-border: #f6c7d2;
    --ui-color-danger-text: #a72242;
    --ui-color-outside-background: #e8e8e8;
    --ui-color-outside-text: #777;
    --ui-color-neutral-bg: #f3f4f6;
    --ui-color-neutral-surface: #f8fafc;
    --ui-color-neutral-border: #e5e7eb;
    --ui-color-neutral-text: #4b5563;

    /* Shared label alignment defaults; components can override their own aliases. */
    --ui-label-column-width: 160px;
    --ui-label-column-gap: 20px;
    --ui-property-list-key-width: calc(var(--ui-label-column-width) + var(--ui-label-column-gap));
    --ui-property-list-column-gap: var(--ui-label-column-gap);

    /* Forms and controls retain their existing dimensions. */
    --ui-form-vertical-gap: 0.375rem;
    --ui-form-column-gap: var(--ui-label-column-gap);
    --ui-form-label-width: var(--ui-label-column-width);
    --ui-form-label-offset-top: 5px;
    --ui-form-friendly-width: 42rem;
    --ui-form-block-gap: 0.8rem;
    --ui-input-line-height: 20px;
    --ui-input-height: 28px;
    --ui-input-font-size: var(--ui-font-size-m);
    --ui-input-padding-block: 4px;
    --ui-input-padding-inline: 6px;
    --ui-input-radius: 0.25rem;
    --ui-input-border: #ccc;
    --ui-input-color: #555;
    --ui-input-background: var(--ui-color-surface);
    --ui-input-disabled-background: #eee;
    --ui-input-switch-background: #f2f2f2;
    --ui-input-shadow: inset 0 1px 1px rgb(0 0 0 / 7.5%);
    --ui-input-date-width: 8rem;
    --ui-input-short-width: 4.5rem;
    --ui-input-number-width: 8rem;
    --ui-area-separator-color: var(--ui-color-border-subtle);
}

/* Dimensions include padding and borders; explicit component exceptions remain possible. */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Keep rem sizing relative to the user's browser preference. */
html {
	font-size: 100%;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--ui-font-family);
	font-size: var(--ui-font-size);
	line-height: 1.5;
	color: var(--ui-color-text);
}

/* Ordinary links; components own their more specific link presentation. */
a {
	color: var(--ui-color-primary-text);
	text-decoration: none;
}

a:hover, a:focus {
	color: var(--ui-color-primary-hover);
	text-decoration: underline;
}

a:focus {
	outline: 0;
}

a:focus-visible {
	outline: var(--ui-focus-width) solid var(--ui-focus-color);
	outline-offset: 2px;
}

form {
	margin: 0;
	padding: 0;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	border: 0;
}

/* Form controls also inherit the surrounding font family without Bootstrap. */
input, select, textarea, button {
	font-family: inherit;
}

/* Formatting elements have no implicit layout or heading presentation. */
h1, h2, h3, h4, h5, h6, p, ul, ol, menu, dl, dd, blockquote, pre {
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6, p {
	font: inherit;
	color: inherit;
	text-rendering: inherit;
}

ul, ol, menu {
	list-style: none;
}

blockquote, pre {
	border: 0;
	border-radius: 0;
	background: none;
}

blockquote p {
	font: inherit;
}

/* Semantic heading levels are independent of their visual presentation. */
.ui-heading {
	font-size: var(--ui-font-size-l);
	font-weight: 600;
	line-height: 1.3;
	color: var(--ui-color-primary);
}

/* Text content owns its internal rhythm, including nested CMS markup. */
.ui-prose {
	--ui-prose-spacing: var(--ui-space-sm);
}

.ui-prose :where(p, ul, ol, dl, blockquote, pre, h1, h2, h3, h4, h5, h6)
	+ :where(p, ul, ol, dl, blockquote, pre, h1, h2, h3, h4, h5, h6) {
	margin-block-start: var(--ui-prose-spacing);
}

.ui-prose :where(h1, h2, h3, h4, h5, h6) {
	font-weight: 600;
	line-height: 1.3;
	color: var(--ui-color-primary);
}

.ui-prose h1 {
	font-size: var(--ui-font-size-xxl);
}

.ui-prose h2 {
	font-size: var(--ui-font-size-xl);
}

.ui-prose h3 {
	font-size: var(--ui-font-size-l);
}

.ui-prose :where(ul, ol) {
	padding-inline-start: 1.5rem;
}

.ui-prose ul {
	list-style-type: disc;
}

.ui-prose ol {
	list-style-type: decimal;
}

.ui-prose blockquote {
	border-inline-start: 3px solid var(--ui-color-border);
	padding-inline-start: 1rem;
}

.ui-prose pre {
	padding: var(--ui-space-sm);
	border-radius: 0.375rem;
	background-color: var(--ui-color-surface-code);
	overflow: auto;
}

.ui-prose dt {
	font-weight: 600;
}

.ui-prose dd + dt {
	margin-block-start: var(--ui-prose-spacing);
}

/* Shared focus presentation also covers controls outside UiSingleInput.
   :enabled keeps this above Bootstrap's input[type=...]:focus specificity. */
:is(.ui-input, .ui-inline-form-block, .ui-sidebar-filter) :is(input, select, textarea):enabled:focus {
    outline: 0;
    border-color: var(--ui-color-primary);
    box-shadow: var(--ui-focus-ring);
}