/*
* xoong.css: design tokens and the default look of the admin set. Plain CSS, no build step.
*
*
*
* Everything lives in cascade layers, so your own unlayered CSS always wins without specificity fights.
* Change the look by overriding the custom properties on :root (or on any element, for a region):
*
* :root { --xo-color-accent: #0a7; --xo-radius: 0; }
*/
@layer xoong.tokens, xoong.base, xoong.components;
@layer xoong.tokens {
:root {
color-scheme: light dark;
--xo-font: system-ui, -apple-system, "Segoe UI", sans-serif;
--xo-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
--xo-text: 1rem;
--xo-text-small: 0.875rem;
--xo-space-1: 0.25rem;
--xo-space-2: 0.5rem;
--xo-space-3: 1rem;
--xo-space-4: 1.5rem;
--xo-radius: 0.375rem;
--xo-form-max-width: 28rem; /* generated forms; `none` for editors that should use the whole width */
--xo-color-bg: light-dark(#f7f8fa, #14161a);
--xo-color-surface: light-dark(#fff, #1d2026);
--xo-color-text: light-dark(#1b1f27, #e8eaee);
--xo-color-muted: light-dark(#5b6472, #9aa3b2);
--xo-color-border: light-dark(#d9dde4, #343a46);
--xo-color-control-border: light-dark(#838c9b, #737d90); /* the edge of a button, field or box that holds input: 3:1 against the page (WCAG 1.4.11) */
--xo-color-accent: light-dark(#2457d6, #7aa2ff);
--xo-color-accent-text: light-dark(#fff, #0d1117);
--xo-color-danger: light-dark(#b42318, #ff8a80);
--xo-color-accent-soft: color-mix(in srgb, var(--xo-color-accent) 14%, var(--xo-color-surface)); /* a tint of the accent: the current item, a selected row, a chip */
--xo-color-subtle: color-mix(in srgb, var(--xo-color-text) 5%, var(--xo-color-surface)); /* a quiet surface: table header, tab bar, toolbar */
--xo-color-success: light-dark(#1a7f37, #56d364);
--xo-color-warning: light-dark(#9a6700, #e3b341);
--xo-color-inverse: light-dark(#1b1f27, #e8eaee); /* tooltip, toast */
--xo-color-inverse-text: light-dark(#fff, #14161a);
--xo-focus-thin: 2px solid var(--xo-color-accent); /* a ring drawn inside a list item */
--xo-focus-inverse: 3px solid var(--xo-color-inverse-text); /* on an inverse surface (toast, tooltip): the accent ring can fall under 3:1 there */
--xo-focus: 3px solid var(--xo-color-accent); /* the accent must be 3:1 against the page (WCAG 1.4.11, 2.4.11) */
--xo-control-height: 2.5rem; /* every button, field and select; the -sm one is for dense toolbars and table rows */
--xo-control-height-sm: 2rem;
--xo-control-height-lg: 3rem;
--xo-control-padding: 0.9rem;
--xo-control-gap: 0.5rem; /* between an icon and a label, between controls in a toolbar */
--xo-touch: 2.75rem; /* the smallest comfortable target: set --xo-control-height to it on a touch layout */
--xo-field-gap: 0.4rem; /* label, control, hint */
--xo-icon: 1.25rem;
--xo-shadow-pop: 0 14px 34px -14px color-mix(in srgb, var(--xo-color-text) 55%, transparent), 0 2px 6px color-mix(in srgb, var(--xo-color-text) 10%, transparent); /* menus, popovers */
}
}
@layer xoong.base {
:where(body) { margin: 0; font: var(--xo-text) / 1.5 var(--xo-font); color: var(--xo-color-text); background: var(--xo-color-bg); }
:where(h1, h2, h3) { line-height: 1.25; }
:where(a) { color: var(--xo-color-accent); }
:where(:focus-visible) { outline: var(--xo-focus); outline-offset: 2px; }
:where(button) {
font: inherit; padding: 0 var(--xo-control-padding); box-sizing: border-box; cursor: pointer;
color: var(--xo-color-text); background: var(--xo-color-surface);
border: 1px solid var(--xo-color-control-border); border-radius: var(--xo-radius);
}
/* a switch sets its own height (44×24). The 40px minimum would turn it into a square, and height does not override min-height. */
:where(button:not([role="switch"])) { min-height: var(--xo-control-height); }
:where(button:hover) { border-color: var(--xo-color-accent); }
:where(button[aria-busy="true"]) { opacity: 0.6; cursor: progress; }
:where(input, select, textarea) {
font: inherit; padding: var(--xo-space-1) var(--xo-space-2); color: inherit; background: var(--xo-color-surface);
border: 1px solid var(--xo-color-control-border); border-radius: var(--xo-radius);
}
:where(input:not([type="checkbox"], [type="radio"], [type="color"], [type="range"], [type="file"]), select) { min-height: var(--xo-control-height); box-sizing: border-box; }
:where([aria-invalid="true"]) { border-color: var(--xo-color-danger); }
.xo-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@layer xoong.components {
/*
* Admin shell: put class="xo-admin" on (or on itself) and give the layout a , a