@loidolt/theme-styles 0.7.0 → 0.8.1

package/src/components/overlays.css

@@ -9,11 +9,16 @@
   z-index: var(--loidolt-z-dialog);
   top: 50%;
   left: 50%;
-  display: grid;
+  /* A column whose body alone shrinks and scrolls, so the header and the footer's actions stay in
+     view however tall the content (or short the screen). Flex rather than grid rows, because an
+     AlertDialog without content has no body. */
+  display: flex;
+  flex-direction: column;
   width: min(var(--ldt-dialog-width, 34rem), calc(100vw - 2rem));
   max-height: min(48rem, calc(100dvh - 2rem));
   overflow: hidden;
   border: var(--loidolt-border-width) solid var(--loidolt-border-strong);
+  border-radius: var(--loidolt-radius-overlay);
   color: var(--loidolt-text);
   background: var(--loidolt-surface);
   box-shadow: var(--loidolt-shadow-modal);
@@ -35,24 +40,27 @@
   --ldt-dialog-width: 100vw;
   height: calc(100dvh - 2rem);
   max-height: none;
-  grid-template-rows: auto minmax(0, 1fr) auto;
 }
 .ldt-dialog__actions {
   display: flex;
   flex: none;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--loidolt-space-1);
 }
 .ldt-dialog__header,
 .ldt-dialog__body,
 .ldt-dialog__footer {
-  padding: 1rem 1.25rem;
+  padding: var(--loidolt-pad-overlay);
+}
+.ldt-dialog__header,
+.ldt-dialog__footer {
+  flex: none;
 }
 .ldt-dialog__header {
   display: flex;
   align-items: start;
   justify-content: space-between;
-  gap: 1rem;
+  gap: var(--loidolt-space-4);
   border-bottom: var(--loidolt-border-width) solid var(--loidolt-border);
 }
 .ldt-dialog__header > :first-child,
@@ -60,13 +68,15 @@
   min-width: 0;
 }
 .ldt-dialog__body {
+  flex: 1 1 auto;
+  min-height: 0;
   overflow-y: auto;
 }
 .ldt-dialog__footer {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
-  gap: 0.5rem;
+  gap: var(--loidolt-gap-actions);
   border-top: var(--loidolt-border-width) solid var(--loidolt-border);
 }
 .ldt-dialog__footer .ldt-button,
@@ -154,13 +164,13 @@
 .ldt-drawer__header,
 .ldt-drawer__body,
 .ldt-drawer__footer {
-  padding: 1rem 1.25rem;
+  padding: var(--loidolt-pad-overlay);
 }
 .ldt-drawer__header {
   display: flex;
   align-items: start;
   justify-content: space-between;
-  gap: 1rem;
+  gap: var(--loidolt-space-4);
   border-bottom: var(--loidolt-border-width) solid var(--loidolt-border);
 }
 .ldt-drawer__body {
@@ -170,7 +180,7 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
-  gap: 0.5rem;
+  gap: var(--loidolt-gap-actions);
   border-top: var(--loidolt-border-width) solid var(--loidolt-border);
 }
 .ldt-drawer__title {
@@ -188,31 +198,34 @@
   z-index: var(--loidolt-z-menu);
   min-width: 13rem;
   max-width: min(22rem, calc(100vw - 2rem));
-  padding: 0.45rem;
+  padding: var(--loidolt-pad-popover);
   border: var(--loidolt-border-width) solid var(--loidolt-border-strong);
+  border-radius: var(--loidolt-radius-overlay);
   color: var(--loidolt-text);
   background: var(--loidolt-surface);
   box-shadow: var(--loidolt-shadow-popover);
 }
 .ldt-menu {
   display: grid;
-  gap: 0.1rem;
+  gap: 0.1rem; /* @literal hairline between items */
 }
 .ldt-menu__label {
-  padding: 0.45rem 0.55rem 0.3rem;
+  padding: 0.45rem 0.55rem 0.3rem; /* @literal optical alignment with item text */
   color: var(--loidolt-text-accent);
   font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
+  font-weight: var(--loidolt-label-weight);
+  letter-spacing: calc(var(--loidolt-label-tracking) * 0.9);
+  text-transform: var(--loidolt-label-transform);
 }
 .ldt-menu__item {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 1rem;
+  gap: var(--loidolt-space-4);
   border: 0;
-  padding: 0.65rem 0.55rem;
+  border-radius: var(--loidolt-radius-inner);
+  padding: var(--loidolt-pad-item);
   color: var(--loidolt-text);
   background: transparent;
   text-align: left;
@@ -228,7 +241,7 @@
 .ldt-menu__hint {
   color: var(--loidolt-text-muted);
   font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
-  letter-spacing: 0.08em;
+  letter-spacing: var(--loidolt-control-tracking);
 }
 .ldt-menu__item:hover:not(:disabled, [data-disabled]) .ldt-menu__hint,
 .ldt-menu__item[data-highlighted] .ldt-menu__hint {
@@ -250,13 +263,13 @@
 }
 .ldt-menu__group {
   display: grid;
-  gap: 0.1rem;
+  gap: 0.1rem; /* @literal hairline between items */
 }
 /* Checkbox and radio rows lead with a drawn indicator, so state never rests on colour alone. */
 .ldt-menu__item--check,
 .ldt-menu__item--radio {
   justify-content: flex-start;
-  gap: 0.6rem;
+  gap: 0.6rem; /* @literal glyph-to-label spacing, not density */
 }
 .ldt-menu__item--check .ldt-menu__hint,
 .ldt-menu__item--radio .ldt-menu__hint {
@@ -274,7 +287,7 @@
   position: absolute;
   inset: 0.05rem 0.22rem 0.18rem;
   border: solid currentColor;
-  border-width: 0 2px 2px 0;
+  border-width: 0 2px 2px 0; /* @literal checkmark glyph */
   transform: rotate(45deg);
 }
 .ldt-menu__item--radio[data-state='checked'] .ldt-menu__indicator::after {
@@ -288,7 +301,7 @@
   height: 0.4rem;
   flex: none;
   border: solid currentColor;
-  border-width: 0 1.5px 1.5px 0;
+  border-width: 0 1.5px 1.5px 0; /* @literal chevron glyph */
   transform: rotate(-45deg);
 }
 .ldt-menu__item--sub[data-state='open'] {
@@ -304,7 +317,8 @@
 .ldt-tooltip {
   z-index: var(--loidolt-z-tooltip);
   max-width: 18rem;
-  padding: 0.4rem 0.55rem;
+  padding: 0.4rem 0.55rem; /* @literal compact by nature; not a density surface */
+  border-radius: var(--loidolt-radius-control);
   color: var(--loidolt-text-inverse);
   background: var(--loidolt-surface-inverse);
   font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
@@ -329,7 +343,7 @@
 .ldt-tabs__list {
   max-width: 100%;
   display: flex;
-  gap: 2px;
+  gap: 2px; /* @literal hairline seam between tabs */
   overflow-x: auto;
   border-bottom: var(--loidolt-border-width) solid var(--loidolt-border);
   overscroll-behavior-inline: contain;
@@ -345,18 +359,19 @@
 .ldt-tabs__trigger {
   min-height: var(--loidolt-size-control);
   border: 0;
-  border-bottom: 2px solid transparent;
-  padding: 0 0.85rem;
+  border-bottom: var(--loidolt-stroke-indicator) solid transparent;
+  padding: 0 var(--loidolt-pad-control-x);
   color: var(--loidolt-text-muted);
   background: transparent;
   font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+  font-weight: var(--loidolt-control-weight);
+  letter-spacing: var(--loidolt-control-tracking);
+  text-transform: var(--loidolt-control-transform);
 }
 .ldt-tabs__trigger[data-orientation='vertical'] {
   border-bottom: 0;
-  border-right: 2px solid transparent;
-  padding: 0 0.85rem;
+  border-right: var(--loidolt-stroke-indicator) solid transparent;
+  padding: 0 var(--loidolt-pad-control-x);
   text-align: left;
 }
 .ldt-tabs__trigger[data-state='active'],
@@ -368,7 +383,7 @@
   padding-block: 0;
 }
 .ldt-tabs__content {
-  padding-block: 1rem;
+  padding-block: var(--loidolt-space-4);
 }
 
 @media (max-width: 760px) {
@@ -380,7 +395,7 @@
     border-bottom: var(--loidolt-border-width) solid var(--loidolt-border);
   }
   .ldt-tabs__content[data-orientation='vertical'] {
-    padding-block: 1rem;
+    padding-block: var(--loidolt-space-4);
   }
 }
 /* The option list of Combobox and MultiSelect: the menu surface, sized to its field. */
@@ -390,38 +405,40 @@
   max-width: min(28rem, calc(100vw - 2rem));
   max-height: min(20rem, var(--bits-floating-available-height, 20rem));
   display: grid;
-  gap: 0.1rem;
+  gap: 0.1rem; /* @literal hairline between items */
   overflow-y: auto;
-  padding: 0.35rem;
+  padding: 0.35rem; /* @literal listbox inset */
   border: var(--loidolt-border-width) solid var(--loidolt-border-strong);
+  border-radius: var(--loidolt-radius-overlay);
   color: var(--loidolt-text);
   background: var(--loidolt-surface);
   box-shadow: var(--loidolt-shadow-popover);
 }
 .ldt-listbox__group {
   display: grid;
-  gap: 0.1rem;
+  gap: 0.1rem; /* @literal hairline between items */
 }
 .ldt-listbox__group + .ldt-listbox__group,
 .ldt-listbox__item + .ldt-listbox__group {
   margin-top: 0.25rem;
   border-top: var(--loidolt-border-width) solid var(--loidolt-border-soft);
-  padding-top: 0.25rem;
+  padding-top: var(--loidolt-space-1);
 }
 .ldt-listbox__heading {
-  padding: 0.4rem 0.55rem 0.25rem;
+  padding: 0.4rem 0.55rem 0.25rem; /* @literal optical alignment with item text */
   color: var(--loidolt-text-accent);
   font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
+  font-weight: var(--loidolt-label-weight);
+  letter-spacing: calc(var(--loidolt-label-tracking) * 0.9);
+  text-transform: var(--loidolt-label-transform);
 }
 .ldt-listbox__item {
   min-height: 1.5rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 1rem;
-  padding: 0.55rem;
+  gap: var(--loidolt-space-4);
+  padding: 0.55rem; /* @literal listbox option metrics */
   cursor: default;
 }
 .ldt-listbox__item[data-highlighted] {
@@ -438,14 +455,14 @@
   height: 0.65rem;
   flex: none;
   border: solid transparent;
-  border-width: 0 2px 2px 0;
+  border-width: 0 2px 2px 0; /* @literal checkmark glyph */
   transform: rotate(45deg) translate(-0.1rem, -0.1rem);
 }
 .ldt-listbox__item[data-selected] .ldt-listbox__check {
   border-color: currentColor;
 }
 .ldt-listbox__empty {
-  padding: 0.55rem;
+  padding: 0.55rem; /* @literal matches the option metrics */
   color: var(--loidolt-text-muted);
   font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
 }

package/src/components/prose.css

@@ -38,7 +38,7 @@
   margin-block: 1.8em 0.6em;
   color: var(--loidolt-text);
   font-family: var(--loidolt-font-display);
-  font-weight: 500;
+  font-weight: var(--loidolt-heading-weight);
   line-height: var(--loidolt-font-line-height-tight);
   /* Clears a sticky top bar when a heading is the target of an in-page link. */
   scroll-margin-top: calc(var(--loidolt-size-topbar) + var(--loidolt-space-4));
@@ -48,7 +48,7 @@
   font-size: 2em;
 }
 :where(.ldt-prose h2):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
-  padding-block-end: 0.3em;
+  padding-block-end: 0.3em; /* @literal em-based prose rhythm */
   border-bottom: var(--loidolt-border-width) solid var(--loidolt-border-soft);
   font-size: 1.5em;
 }
@@ -63,8 +63,8 @@
   color: var(--loidolt-text-muted);
   font-family: var(--loidolt-font-utility);
   font-size: 0.8em;
-  letter-spacing: var(--loidolt-font-tracking-utility);
-  text-transform: uppercase;
+  letter-spacing: var(--loidolt-label-tracking);
+  text-transform: var(--loidolt-label-transform);
 }
 /* A heading directly after another heading sits closer to it. */
 :where(.ldt-prose :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6)):not(
@@ -86,19 +86,21 @@
 /* Only one weight per family ships, so bold is synthesized; colour keeps it legible. */
 :where(.ldt-prose :is(strong, b)):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
   color: var(--loidolt-text);
-  font-weight: 700;
+  font-weight: 700; /* @literal bold means bold in running text */
 }
 :where(.ldt-prose :not(pre) > code):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
-  padding: 0.12em 0.35em;
+  padding: 0.12em 0.35em; /* @literal em-based inline code */
   border: var(--loidolt-border-width) solid var(--loidolt-border-soft);
+  border-radius: var(--loidolt-radius-inner);
   color: var(--loidolt-text);
   background: var(--loidolt-surface-sunken);
   font-size: 0.875em;
 }
 :where(.ldt-prose kbd):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
-  padding: 0.05em 0.4em;
+  padding: 0.05em 0.4em; /* @literal em-based key cap */
   border: var(--loidolt-border-width) solid var(--loidolt-border-strong);
-  border-bottom-width: 2px;
+  border-radius: var(--loidolt-radius-inner);
+  border-bottom-width: 2px; /* @literal key-cap depth */
   background: var(--loidolt-surface);
   font-size: 0.85em;
 }
@@ -110,7 +112,7 @@
 /* --- Lists --------------------------------------------------------------------------------- */
 
 :where(.ldt-prose :is(ul, ol)):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
-  padding-inline-start: 1.5em;
+  padding-inline-start: 1.5em; /* @literal em-based list indent */
 }
 :where(.ldt-prose li):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
   margin-block: 0.3em;
@@ -131,7 +133,7 @@
   accent-color: var(--loidolt-accent);
 }
 :where(.ldt-prose dt):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
-  font-weight: 700;
+  font-weight: 700; /* @literal bold means bold in running text */
 }
 :where(.ldt-prose dd):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
   margin: 0 0 0.6em 1.5em;
@@ -141,8 +143,8 @@
 
 :where(.ldt-prose blockquote):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
   margin-inline: 0;
-  padding: 0.7em 1em;
-  border-inline-start: 3px solid var(--loidolt-accent);
+  padding: 0.7em 1em; /* @literal em-based prose rhythm */
+  border-inline-start: var(--loidolt-stroke-accent) solid var(--loidolt-accent);
   color: var(--loidolt-text);
   background: var(--loidolt-surface-alt);
 }
@@ -168,9 +170,10 @@
  * surface so it reads as code in both colour schemes.
  */
 :where(.ldt-prose pre):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
-  padding: 0.9em 1.1em;
+  padding: 0.9em 1.1em; /* @literal em-based code rhythm */
   overflow-x: auto;
   border: var(--loidolt-border-width) solid var(--loidolt-border);
+  border-radius: var(--loidolt-radius-surface);
   color: var(--loidolt-text-inverse);
   background: var(--loidolt-surface-inverse);
   font-size: 0.85em;
@@ -199,14 +202,14 @@
   font-size: 0.9em;
 }
 :where(.ldt-prose :is(th, td)):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
-  padding: 0.5em 0.8em;
+  padding: 0.5em 0.8em; /* @literal em-based table rhythm */
   border: var(--loidolt-border-width) solid var(--loidolt-border);
   text-align: start;
   vertical-align: top;
 }
 :where(.ldt-prose th):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
   background: var(--loidolt-surface-alt);
-  font-weight: 700;
+  font-weight: 700; /* @literal bold means bold in running text */
 }
 :where(.ldt-prose td):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
   background: var(--loidolt-surface);
@@ -221,12 +224,13 @@
 /* --- Disclosure ---------------------------------------------------------------------------- */
 
 :where(.ldt-prose details):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
-  padding: 0.5em 0.9em;
+  padding: 0.5em 0.9em; /* @literal em-based prose rhythm */
   border: var(--loidolt-border-width) solid var(--loidolt-border);
+  border-radius: var(--loidolt-radius-surface);
   background: var(--loidolt-surface);
 }
 :where(.ldt-prose summary):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
-  font-weight: 700;
+  font-weight: 700; /* @literal bold means bold in running text */
 }
 :where(.ldt-prose details[open] > summary):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
   margin-block-end: 0.5em;

package/src/components/selection.css

@@ -13,15 +13,16 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 1rem;
+  gap: var(--loidolt-space-4);
   border: 0;
-  padding: 0.75rem 0;
+  padding: var(--loidolt-space-3) 0;
   color: var(--loidolt-text);
   background: transparent;
   font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
-  letter-spacing: 0.08em;
+  font-weight: var(--loidolt-control-weight);
+  letter-spacing: var(--loidolt-control-tracking);
   text-align: left;
-  text-transform: uppercase;
+  text-transform: var(--loidolt-control-transform);
 }
 .ldt-accordion__trigger:hover:not([data-disabled]) {
   color: var(--loidolt-text-accent);
@@ -34,15 +35,15 @@
   width: 0;
   height: 0;
   flex: 0 0 auto;
-  border-inline: 0.3rem solid transparent;
-  border-top: 0.34rem solid currentColor;
+  border-inline: 0.3rem solid transparent; /* @literal CSS triangle geometry */
+  border-top: 0.34rem solid currentColor; /* @literal CSS triangle geometry */
   transition: transform var(--loidolt-motion-normal) var(--loidolt-motion-easing);
 }
 .ldt-accordion__trigger[data-state='open'] .ldt-accordion__indicator {
   transform: rotate(180deg);
 }
 .ldt-accordion__body {
-  padding-bottom: 1rem;
+  padding-bottom: var(--loidolt-space-4);
   color: var(--loidolt-text-muted);
 }
 .ldt-toggle-group {
@@ -50,6 +51,7 @@
   display: inline-flex;
   overflow-x: auto;
   border: var(--loidolt-border-width) solid var(--loidolt-border-strong);
+  border-radius: var(--loidolt-radius-control);
   overscroll-behavior-inline: contain;
   scrollbar-width: thin;
 }
@@ -62,15 +64,16 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.4rem;
+  gap: 0.4rem; /* @literal glyph-to-label spacing, not density */
   border: 0;
-  padding: 0 0.85rem;
+  padding: 0 var(--loidolt-pad-control-x);
   color: var(--loidolt-text-muted);
   background: transparent;
   font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
-  letter-spacing: 0.08em;
+  font-weight: var(--loidolt-control-weight);
+  letter-spacing: var(--loidolt-control-tracking);
   line-height: 1;
-  text-transform: uppercase;
+  text-transform: var(--loidolt-control-transform);
   white-space: nowrap;
 }
 /* One shared rule between neighbours, so the group reads as a single object rather than a row
@@ -101,18 +104,18 @@
 }
 .ldt-toggle-group--sm .ldt-toggle-group__item {
   min-height: var(--loidolt-size-control-sm);
-  padding: 0 0.65rem;
+  padding: 0 var(--loidolt-pad-control-x-sm);
   font-size: var(--loidolt-font-size-xs);
 }
 .ldt-toggle-group--lg .ldt-toggle-group__item {
   min-height: var(--loidolt-size-control-lg);
-  padding: 0 1.2rem;
+  padding: 0 var(--loidolt-pad-control-x-lg);
 }
 .ldt-breadcrumbs__list {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.35rem 0.5rem;
+  gap: 0.35rem 0.5rem; /* @literal separator rhythm, not density */
   margin: 0;
   padding: 0;
   list-style: none;
@@ -121,7 +124,7 @@
   min-width: 0;
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--loidolt-space-2);
 }
 /* Generated content, so the separator is never selected, copied, or read aloud. */
 .ldt-breadcrumbs__item + .ldt-breadcrumbs__item::before {
@@ -132,9 +135,10 @@
 .ldt-breadcrumbs__current {
   overflow: hidden;
   font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
-  letter-spacing: var(--loidolt-font-tracking-utility);
+  font-weight: var(--loidolt-label-weight);
+  letter-spacing: var(--loidolt-label-tracking);
   text-overflow: ellipsis;
-  text-transform: uppercase;
+  text-transform: var(--loidolt-label-transform);
   white-space: nowrap;
 }
 .ldt-breadcrumbs__link {
@@ -155,10 +159,10 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.3rem;
+  gap: 0.3rem; /* @literal page buttons sit nearly flush */
 }
 .ldt-pagination__ellipsis {
-  padding-inline: 0.35rem;
+  padding-inline: 0.35rem; /* @literal matches the page-button gap */
   color: var(--loidolt-text-muted);
 }
 .ldt-pagination__page {
@@ -179,6 +183,7 @@
   display: inline-flex;
   overflow-x: auto;
   border: var(--loidolt-border-width) solid var(--loidolt-border-strong);
+  border-radius: var(--loidolt-radius-control);
   overscroll-behavior-inline: contain;
   scrollbar-width: thin;
 }
@@ -207,6 +212,7 @@
   gap: var(--loidolt-space-1);
   padding: var(--loidolt-space-1);
   border: var(--loidolt-border-width) solid var(--loidolt-border);
+  border-radius: var(--loidolt-radius-inner);
   color: inherit;
   background: none;
   font: inherit;
@@ -244,15 +250,16 @@
 .ldt-chip {
   display: inline-flex;
   align-items: center;
-  gap: 0.2rem;
+  gap: 0.2rem; /* @literal chip glyph spacing */
   min-height: 1.5rem;
   max-width: 100%;
   border: var(--loidolt-border-width) solid var(--loidolt-border-control);
-  padding-inline-start: 0.45rem;
+  border-radius: var(--loidolt-radius-control);
+  padding-inline-start: 0.45rem; /* @literal chip label inset */
   color: var(--loidolt-text);
   background: var(--loidolt-surface-alt);
   font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
-  letter-spacing: 0.04em;
+  letter-spacing: calc(var(--loidolt-label-tracking) * 0.4);
 }
 .ldt-chip > span {
   overflow: hidden;

package/src/components/surfaces.css

@@ -1,6 +1,7 @@
 .ldt-card,
 .ldt-panel {
   border: var(--loidolt-border-width) solid var(--loidolt-border);
+  border-radius: var(--loidolt-radius-surface);
   color: var(--loidolt-text);
   background: var(--loidolt-surface);
 }
@@ -25,7 +26,7 @@
 .ldt-panel__header,
 .ldt-panel__content,
 .ldt-panel__footer {
-  padding: var(--loidolt-space-4);
+  padding: var(--loidolt-pad-surface);
 }
 .ldt-card__header,
 .ldt-panel__header {
@@ -56,15 +57,16 @@
   display: inline-flex;
   align-items: center;
   min-height: 1.4rem;
-  padding: 0.15rem 0.5rem;
+  padding: 0.15rem 0.5rem; /* @literal inline badge metrics, sized to sit in running text */
   border: var(--loidolt-border-width) solid var(--loidolt-border);
   border-radius: var(--loidolt-border-radius-pill);
   color: var(--loidolt-text-muted);
   background: var(--loidolt-surface-sunken);
   font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
   /* The label voice (`.ldt-eyebrow`, `.ldt-field__label`), not the tighter control voice. */
-  letter-spacing: var(--loidolt-font-tracking-wide);
-  text-transform: uppercase;
+  font-weight: var(--loidolt-label-weight);
+  letter-spacing: var(--loidolt-label-tracking-wide);
+  text-transform: var(--loidolt-label-transform);
 }
 /*
  * Size steps take the button scale's *box* so a badge in a row of controls lines up with them,
@@ -83,17 +85,17 @@
 }
 .ldt-badge--sm {
   min-height: var(--loidolt-size-control-sm);
-  padding: 0.38rem 0.7rem;
+  padding: var(--loidolt-pad-control-y-sm) 0.7rem; /* @literal inline pad sits between control steps */
   line-height: 1;
 }
 .ldt-badge--md {
   min-height: var(--loidolt-size-control);
-  padding: 0.5rem 0.9rem;
+  padding: var(--loidolt-pad-control-y) 0.9rem; /* @literal inline pad sits between control steps */
   line-height: 1;
 }
 .ldt-badge--lg {
   min-height: var(--loidolt-size-control-lg);
-  padding: 0.5rem 1.25rem;
+  padding: var(--loidolt-pad-control-y) 1.25rem; /* @literal inline pad sits between control steps */
   line-height: 1;
 }
 .ldt-badge--accent {
@@ -130,6 +132,7 @@
   aspect-ratio: var(--ldt-thumbnail-ratio, 4 / 3);
   overflow: hidden;
   border: var(--loidolt-border-width) solid var(--loidolt-border);
+  border-radius: var(--loidolt-radius-surface);
   background: var(--loidolt-surface-sunken);
 }
 .ldt-thumbnail--paper {
@@ -169,8 +172,9 @@
 /* A dashboard tile: one hero number over a utility label; the link form invites a click. */
 .ldt-stat {
   display: block;
-  padding: var(--loidolt-space-4);
+  padding: var(--loidolt-pad-surface);
   border: var(--loidolt-border-width) solid var(--loidolt-border);
+  border-radius: var(--loidolt-radius-surface);
   color: var(--loidolt-text);
   background: var(--loidolt-surface);
   text-decoration: none;
@@ -183,14 +187,15 @@ a.ldt-stat:hover {
   margin: 0;
   font-family: var(--loidolt-font-display);
   font-size: var(--loidolt-font-size-xl);
-  font-weight: 600;
+  font-weight: var(--loidolt-strong-weight);
 }
 .ldt-stat__label {
   margin: 0.25rem 0 0;
   color: var(--loidolt-text-muted);
   font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
-  letter-spacing: var(--loidolt-font-tracking-utility);
-  text-transform: uppercase;
+  font-weight: var(--loidolt-label-weight);
+  letter-spacing: var(--loidolt-label-tracking);
+  text-transform: var(--loidolt-label-transform);
 }
 .ldt-separator {
   width: 100%;
@@ -214,10 +219,11 @@ a.ldt-stat:hover {
   place-items: center;
   overflow: hidden;
   border: var(--loidolt-border-width) solid var(--loidolt-border);
+  border-radius: var(--loidolt-radius-control);
   color: var(--loidolt-text-muted);
   background: var(--loidolt-surface-sunken);
   font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
-  letter-spacing: 0.06em;
+  letter-spacing: calc(var(--loidolt-label-tracking) * 0.6);
 }
 .ldt-avatar--sm {
   width: var(--loidolt-size-control-sm);