/* atomic.css -- semantic atomic utilities + state variants.
 *
 * Compose in element class lists (Mithril or SSR):
 *   m("button.btn.btn-primary", { class: "hover:bg-brand-hover focus-visible:ring" })
 *   <button class="btn btn-primary hover:bg-brand-hover focus-visible:ring">
 *
 * Naming is semantic, not value-style (decisions.md D2). State variants live
 * here, not in component .css (D3). Every utility consumes a tier-2 alias
 * from themes/*.css or a theme-invariant primitive from tokens.css; nothing
 * is hardcoded.
 */

/* =====================================================================
 * display
 * =================================================================== */
.d-block        { display: block; }
.d-inline       { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex         { display: flex; }
.d-inline-flex  { display: inline-flex; }
.d-grid         { display: grid; }
.d-inline-grid  { display: inline-grid; }
.d-contents     { display: contents; }
.d-none         { display: none; }

/* =====================================================================
 * flex / grid direction + wrap
 * =================================================================== */
.flex-col         { flex-direction: column; }
.flex-row         { flex-direction: row; }
.flex-col-reverse { flex-direction: column-reverse; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-wrap        { flex-wrap: wrap; }
.flex-nowrap      { flex-wrap: nowrap; }
.flex-1           { flex: 1 1 0%; }
.flex-auto        { flex: 1 1 auto; }
.flex-none        { flex: none; }

/* =====================================================================
 * alignment (flex + grid)
 * =================================================================== */
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.items-stretch  { align-items: stretch; }

.self-start   { align-self: flex-start; }
.self-center  { align-self: center; }
.self-end     { align-self: flex-end; }
.self-stretch { align-self: stretch; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.justify-evenly  { justify-content: space-evenly; }

.place-center { place-items: center; place-content: center; }

/* =====================================================================
 * gap
 * =================================================================== */
.gap-xs  { gap: var(--space-xs); }
.gap-sm  { gap: var(--space-sm); }
.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }
.gap-xl  { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }
.gap-3xl { gap: var(--space-3xl); }

.gap-x-xs  { column-gap: var(--space-xs); }
.gap-x-sm  { column-gap: var(--space-sm); }
.gap-x-md  { column-gap: var(--space-md); }
.gap-x-lg  { column-gap: var(--space-lg); }
.gap-x-xl  { column-gap: var(--space-xl); }

.gap-y-xs  { row-gap: var(--space-xs); }
.gap-y-sm  { row-gap: var(--space-sm); }
.gap-y-md  { row-gap: var(--space-md); }
.gap-y-lg  { row-gap: var(--space-lg); }
.gap-y-xl  { row-gap: var(--space-xl); }

/* =====================================================================
 * padding (logical: inline = x, block = y)
 * =================================================================== */
.pad-0   { padding: 0; }
.pad-xs  { padding: var(--space-xs); }
.pad-sm  { padding: var(--space-sm); }
.pad-md  { padding: var(--space-md); }
.pad-lg  { padding: var(--space-lg); }
.pad-xl  { padding: var(--space-xl); }
.pad-2xl { padding: var(--space-2xl); }
.pad-3xl { padding: var(--space-3xl); }

.pad-x-xs  { padding-inline: var(--space-xs); }
.pad-x-sm  { padding-inline: var(--space-sm); }
.pad-x-md  { padding-inline: var(--space-md); }
.pad-x-lg  { padding-inline: var(--space-lg); }
.pad-x-xl  { padding-inline: var(--space-xl); }
.pad-x-2xl { padding-inline: var(--space-2xl); }

.pad-y-xs  { padding-block: var(--space-xs); }
.pad-y-sm  { padding-block: var(--space-sm); }
.pad-y-md  { padding-block: var(--space-md); }
.pad-y-lg  { padding-block: var(--space-lg); }
.pad-y-xl  { padding-block: var(--space-xl); }
.pad-y-2xl { padding-block: var(--space-2xl); }

.pad-t-xs { padding-block-start: var(--space-xs); }
.pad-t-sm { padding-block-start: var(--space-sm); }
.pad-t-md { padding-block-start: var(--space-md); }
.pad-t-lg { padding-block-start: var(--space-lg); }
.pad-t-xl { padding-block-start: var(--space-xl); }

.pad-b-xs { padding-block-end: var(--space-xs); }
.pad-b-sm { padding-block-end: var(--space-sm); }
.pad-b-md { padding-block-end: var(--space-md); }
.pad-b-lg { padding-block-end: var(--space-lg); }
.pad-b-xl { padding-block-end: var(--space-xl); }

/* =====================================================================
 * margin (logical: inline = x, block = y; auto for centering)
 * =================================================================== */
.mar-0    { margin: 0; }
.mar-auto { margin: auto; }
.mar-x-auto { margin-inline: auto; }
.mar-y-auto { margin-block: auto; }

.mar-xs  { margin: var(--space-xs); }
.mar-sm  { margin: var(--space-sm); }
.mar-md  { margin: var(--space-md); }
.mar-lg  { margin: var(--space-lg); }
.mar-xl  { margin: var(--space-xl); }

.mar-t-xs { margin-block-start: var(--space-xs); }
.mar-t-sm { margin-block-start: var(--space-sm); }
.mar-t-md { margin-block-start: var(--space-md); }
.mar-t-lg { margin-block-start: var(--space-lg); }
.mar-t-xl { margin-block-start: var(--space-xl); }

.mar-b-xs  { margin-block-end: var(--space-xs); }
.mar-b-sm  { margin-block-end: var(--space-sm); }
.mar-b-md  { margin-block-end: var(--space-md); }
.mar-b-lg  { margin-block-end: var(--space-lg); }
.mar-b-xl  { margin-block-end: var(--space-xl); }
.mar-b-2xl { margin-block-end: var(--space-2xl); }

/* =====================================================================
 * typography -- size
 * =================================================================== */
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }
.text-4xl  { font-size: var(--text-4xl); }
.text-5xl  { font-size: var(--text-5xl); }
.text-6xl  { font-size: var(--text-6xl); }
.text-7xl  { font-size: var(--text-7xl); }

/* typography -- family. --font-sans is a synonym of --font-body; both
 * classes are stable. marketing/brand surfaces reach for .font-display. */
.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }
.font-sans    { font-family: var(--font-sans); }
.font-mono    { font-family: var(--font-mono); }

/* typography -- weight */
.weight-regular { font-weight: var(--weight-regular); }
.weight-medium  { font-weight: var(--weight-medium); }
.weight-bold    { font-weight: var(--weight-bold); }

/* typography -- alignment (text-align is unambiguous despite text-* overload) */
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-start   { text-align: start; }
.text-end     { text-align: end; }
.text-justify { text-align: justify; }

/* typography -- case */
.uppercase   { text-transform: uppercase; }

/* typography -- tracking (consume tokens.css --tracking-* values) */
.tracking-tight { letter-spacing: var(--tracking-tight); }
.tracking-wide  { letter-spacing: var(--tracking-wide); }

/* typography -- max width (line-length for body paragraphs without
 * .prose's vertical rhythm baggage). 60ch reads comfortably on most
 * fonts. */
.measure { max-width: 60ch; }

/* typography -- leading */
.leading-tight { line-height: var(--leading-tight); }
.leading-base  { line-height: var(--leading-base); }

/* typography -- color */
.text-default  { color: var(--color-text); }
.text-muted    { color: var(--color-text-muted); }
.text-subtle   { color: var(--color-text-subtle); }
.text-on-brand { color: var(--color-text-on-brand); }
.text-brand    { color: var(--color-brand); }
.text-success  { color: var(--color-success); }
.text-warning  { color: var(--color-warning); }
.text-danger   { color: var(--color-danger); }
.text-info     { color: var(--color-info); }
.text-inherit  { color: inherit; }

/* =====================================================================
 * backgrounds
 * =================================================================== */
.bg-page         { background-color: var(--color-bg); }
.bg-surface-1    { background-color: var(--color-surface-1); }
.bg-surface-2    { background-color: var(--color-surface-2); }
.bg-surface-3    { background-color: var(--color-surface-3); }
.bg-brand        { background-color: var(--color-brand); }
.bg-brand-hover  { background-color: var(--color-brand-hover); }
.bg-success      { background-color: var(--color-success); }
.bg-warning      { background-color: var(--color-warning); }
.bg-danger       { background-color: var(--color-danger); }
.bg-info         { background-color: var(--color-info); }
.bg-success-soft { background-color: var(--color-success-bg); }
.bg-warning-soft { background-color: var(--color-warning-bg); }
.bg-danger-soft  { background-color: var(--color-danger-bg); }
.bg-info-soft    { background-color: var(--color-info-bg); }
.bg-brand-soft   { background-color: var(--color-brand-bg); }
.bg-transparent  { background-color: transparent; }

/* =====================================================================
 * borders
 * =================================================================== */
.border          { border: 1px solid var(--color-border); }
.border-strong   { border: 1px solid var(--color-border-strong); }
.border-brand    { border: 1px solid var(--color-brand); }
.border-danger   { border: 1px solid var(--color-danger); }
.border-none     { border: none; }

.border-t  { border-top:    1px solid var(--color-border); }
.border-b  { border-bottom: 1px solid var(--color-border); }
.border-l  { border-left:   1px solid var(--color-border); }
.border-r  { border-right:  1px solid var(--color-border); }
.border-x  { border-inline: 1px solid var(--color-border); }
.border-y  { border-block:  1px solid var(--color-border); }

/* =====================================================================
 * radii
 * =================================================================== */
.radius-none { border-radius: var(--radius-none); }
.radius-sm   { border-radius: var(--radius-sm); }
.radius-md   { border-radius: var(--radius-md); }
.radius-full { border-radius: var(--radius-full); }

/* =====================================================================
 * shadows
 * =================================================================== */
.shadow-none { box-shadow: none; }
.shadow-sm   { box-shadow: var(--shadow-sm); }
.shadow-md   { box-shadow: var(--shadow-md); }
.shadow-lg   { box-shadow: var(--shadow-lg); }

/* =====================================================================
 * sizing
 * =================================================================== */
.w-full  { width: 100%; }
.w-auto  { width: auto; }
.w-fit   { width: fit-content; }
.w-screen { width: 100vw; }

.h-full   { height: 100%; }
.h-auto   { height: auto; }
.h-screen { height: 100vh; }

.min-h-0      { min-height: 0; }
.min-h-screen { min-height: 100vh; }
.min-w-0      { min-width: 0; }

.max-w-sm { max-width: 480px; }
.max-w-md { max-width: 640px; }
.max-w-lg { max-width: 800px; }
.max-w-xl { max-width: 1024px; }
.max-w-full { max-width: 100%; }

/* =====================================================================
 * position
 * =================================================================== */
.pos-static   { position: static; }
.pos-relative { position: relative; }
.pos-absolute { position: absolute; }
.pos-fixed    { position: fixed; }
.pos-sticky   { position: sticky; }

.inset-0 { inset: 0; }
.top-0   { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0  { left: 0; }

/* =====================================================================
 * z-layers
 * =================================================================== */
.z-base     { z-index: var(--z-base); }
.z-sticky   { z-index: var(--z-sticky); }
.z-dropdown { z-index: var(--z-dropdown); }
.z-overlay  { z-index: var(--z-overlay); }
.z-modal    { z-index: var(--z-modal); }
.z-toast    { z-index: var(--z-toast); }

/* =====================================================================
 * overflow
 * =================================================================== */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-scroll { overflow: scroll; }
.overflow-y-auto   { overflow-y: auto; }
.overflow-x-auto   { overflow-x: auto; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-x-hidden { overflow-x: hidden; }

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =====================================================================
 * cursor
 * =================================================================== */
.cursor-pointer      { cursor: pointer; }
.cursor-default      { cursor: default; }
.cursor-not-allowed  { cursor: not-allowed; }
.cursor-text         { cursor: text; }

/* =====================================================================
 * whitespace
 * =================================================================== */
.nowrap  { white-space: nowrap; }
.prewrap { white-space: pre-wrap; }
.pre     { white-space: pre; }

/* =====================================================================
 * misc
 * =================================================================== */
.select-none         { user-select: none; }
.pointer-events-none { pointer-events: none; }
.opacity-0           { opacity: 0; }
.opacity-50          { opacity: 0.5; }
.opacity-100         { opacity: 1; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =====================================================================
 * state variants -- hover
 *
 * Colons are escaped in selectors; class attribute uses the bare colon
 * (Mithril: { class: "hover:bg-surface-2" } -- not in selector strings).
 * =================================================================== */
.hover\:bg-surface-1:hover     { background-color: var(--color-surface-1); }
.hover\:bg-surface-2:hover     { background-color: var(--color-surface-2); }
.hover\:bg-surface-3:hover     { background-color: var(--color-surface-3); }
.hover\:bg-brand:hover         { background-color: var(--color-brand); }
.hover\:bg-brand-hover:hover   { background-color: var(--color-brand-hover); }
.hover\:bg-brand-soft:hover    { background-color: var(--color-brand-bg); }
.hover\:bg-danger:hover        { background-color: var(--color-danger); }
.hover\:bg-danger-hover:hover  { background-color: var(--color-danger-hover); }

.hover\:text-brand:hover    { color: var(--color-brand); }
.hover\:text-danger:hover   { color: var(--color-danger); }
.hover\:text-default:hover  { color: var(--color-text); }

.hover\:border-strong:hover { border-color: var(--color-border-strong); }
.hover\:border-brand:hover  { border-color: var(--color-brand); }

.hover\:shadow-sm:hover { box-shadow: var(--shadow-sm); }
.hover\:shadow-md:hover { box-shadow: var(--shadow-md); }

.hover\:underline:hover { text-decoration: underline; }

/* =====================================================================
 * state variants -- focus-visible
 * =================================================================== */
.focus-visible\:ring:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.focus-visible\:ring-inset:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
}

.focus-visible\:border-brand:focus-visible {
    border-color: var(--color-brand);
}

/* =====================================================================
 * state variants -- disabled
 * =================================================================== */
.disabled\:opacity-50:disabled,
.disabled\:opacity-50[aria-disabled="true"] {
    opacity: 0.5;
}

.disabled\:cursor-not-allowed:disabled,
.disabled\:cursor-not-allowed[aria-disabled="true"] {
    cursor: not-allowed;
}

/* =====================================================================
 * state variants -- ARIA attributes
 * decisions.md D6: state styled by ARIA, not .is-* classes.
 * =================================================================== */
[aria-expanded="true"].aria-expanded\:bg-surface-2 {
    background-color: var(--color-surface-2);
}

[aria-expanded="true"].aria-expanded\:rotate-180 > .chevron {
    transform: rotate(180deg);
}

[aria-selected="true"].aria-selected\:bg-brand-soft {
    background-color: var(--color-brand-bg);
}

[aria-selected="true"].aria-selected\:text-brand {
    color: var(--color-brand);
}

[aria-current="page"].aria-current\:bg-surface-2 {
    background-color: var(--color-surface-2);
}

[aria-current="page"].aria-current\:text-brand {
    color: var(--color-brand);
}

[aria-pressed="true"].aria-pressed\:bg-surface-2 {
    background-color: var(--color-surface-2);
}

[aria-busy="true"].aria-busy\:opacity-50 {
    opacity: 0.5;
}

[aria-invalid="true"].aria-invalid\:border-danger {
    border-color: var(--color-danger);
}