@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.1.0

package/dist/styles.css

@@ -0,0 +1,828 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "tw-shimmer";
+@import "shadcn/tailwind.css";
+@import "./fonts/inter.css";
+@import "./tokens.css";
+
+@source "./components/ui";
+@source "./components/icons";
+@source "./compositions";
+@source "./lib";
+@source "./motion";
+@source not "./components/ui/diff-viewer.js";
+@custom-variant dark (&:is(.dark *));
+
+/* shadcn's semantic variables, mapped onto the soft tokens (tokens.css). */
+:root,
+.dark {
+  --background: var(--soft-canvas);
+  --foreground: var(--soft-text);
+  --card: var(--soft-surface);
+  --card-foreground: var(--soft-text);
+  --popover: var(--soft-surface);
+  --popover-foreground: var(--soft-text);
+  --primary: var(--soft-accent);
+  --primary-foreground: var(--soft-accent-text);
+  --secondary: var(--soft-surface);
+  --secondary-foreground: var(--soft-text);
+  --muted: var(--soft-surface-subtle);
+  --muted-foreground: var(--soft-text-secondary);
+  --accent: var(--soft-surface-hover);
+  --accent-foreground: var(--soft-text);
+  --destructive: var(--soft-critical-ink);
+  --border: var(--soft-border);
+  --input: var(--soft-input-border);
+  --ring: var(--soft-focus);
+  --radius: var(--soft-radius-md);
+  --info: var(--soft-info-ink);
+  --success: var(--soft-success-ink);
+  --warning: var(--soft-warning-ink);
+  --chart-1: var(--soft-accent);
+  --chart-2: var(--soft-success-fill);
+  --chart-3: var(--soft-warning-fill);
+  --chart-4: var(--soft-critical-fill);
+  --chart-5: var(--soft-magic-fill);
+  --sidebar: var(--soft-nav);
+  --sidebar-foreground: var(--soft-text);
+  --sidebar-primary: var(--soft-accent);
+  --sidebar-primary-foreground: var(--soft-accent-text);
+  --sidebar-accent: var(--soft-surface-active);
+  --sidebar-accent-foreground: var(--soft-text);
+  --sidebar-border: var(--soft-border);
+  --sidebar-ring: var(--soft-focus);
+}
+
+@theme inline {
+  --font-heading: var(--soft-font-sans);
+  --color-info: var(--info);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --font-sans: var(--soft-font-sans);
+  --font-mono: var(--soft-font-mono);
+  --font-weight-normal: var(--soft-weight-regular);
+  --font-weight-medium: var(--soft-weight-medium);
+  --font-weight-semibold: var(--soft-weight-semibold);
+  --font-weight-bold: var(--soft-weight-bold);
+  --radius-sm: var(--soft-radius-sm);
+  --radius-md: var(--soft-radius-md);
+  --radius-lg: var(--soft-radius-lg);
+  --radius-xl: var(--soft-radius-lg);
+  --radius-2xl: var(--soft-radius-xl);
+  --radius-3xl: var(--soft-radius-xl);
+  --radius-4xl: var(--soft-radius-xl);
+  --shadow-sm: var(--soft-shadow-xs);
+  --shadow-md: var(--soft-shadow-sm);
+  --shadow-lg: var(--soft-shadow-md);
+  --shadow-xl: var(--soft-shadow-lg);
+}
+
+@layer base {
+  * {
+    border-color: var(--border);
+  }
+  body {
+    margin: 0;
+    background: var(--background);
+    color: var(--foreground);
+    font-family: var(--soft-font-sans);
+    font-size: var(--soft-font-size-md);
+    font-weight: var(--soft-weight-regular);
+    line-height: var(--soft-line-height-md);
+    font-feature-settings: var(--soft-font-features);
+    -webkit-font-smoothing: antialiased;
+  }
+  :where(
+    button,
+    a[href],
+    summary,
+    select,
+    label[for],
+    [role="button"],
+    [role="link"],
+    [role="tab"],
+    [role="option"],
+    [role="menuitem"],
+    [role="menuitemcheckbox"],
+    [role="menuitemradio"],
+    [role="switch"],
+    [role="checkbox"],
+    [role="radio"],
+    [role="combobox"],
+    [role="slider"],
+    [role="treeitem"],
+    [data-slot$="trigger"]
+  ) {
+    cursor: pointer;
+  }
+  :where(:disabled, [aria-disabled="true"], [data-disabled]) {
+    cursor: not-allowed;
+  }
+  label:has(+ :disabled),
+  [data-disabled="true"] label {
+    cursor: default;
+  }
+  :focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+}
+
+/*
+ * Button treatments. Flat fills with a hairline highlight on the solid
+ * variants and a bordered white secondary; rounded rectangles, not pills.
+ * Geometry stays in the components layer so caller sizing utilities win.
+ */
+@layer components {
+  .soft-button,
+  [data-slot="button"] {
+    border-radius: var(--soft-button-radius);
+    font-family: var(--soft-font-sans);
+    font-size: var(--soft-button-font-size);
+    font-weight: var(--soft-button-font-weight);
+    line-height: var(--soft-button-line-height);
+    transition:
+      background-color 120ms ease,
+      box-shadow 120ms ease,
+      color 120ms ease;
+  }
+  .soft-button:active:not(:disabled) {
+    translate: 0 0.5px;
+  }
+  .soft-button-primary {
+    background-color: var(--soft-accent);
+    color: var(--soft-accent-text);
+    box-shadow: var(--soft-button-primary-shadow);
+  }
+  .soft-button-primary:hover {
+    background-color: var(--soft-accent-hover);
+  }
+  .soft-button-secondary {
+    background: var(--soft-surface);
+    color: var(--soft-text);
+    box-shadow: var(--soft-button-shadow);
+  }
+  .soft-button-secondary:hover {
+    background: var(--soft-surface-hover);
+  }
+  .soft-button-outline {
+    background: transparent;
+    color: var(--soft-text);
+    box-shadow: inset 0 0 0 1px var(--soft-border-strong);
+  }
+  .soft-button-tertiary {
+    background: transparent;
+    color: var(--soft-text);
+    box-shadow: none;
+  }
+  .soft-button-outline:hover,
+  .soft-button-tertiary:hover {
+    background: var(--soft-surface-hover);
+  }
+  .soft-button-critical {
+    background-color: var(--soft-critical-fill);
+    color: var(--soft-critical-on-fill);
+    box-shadow: var(--soft-button-critical-shadow);
+  }
+  .soft-button-critical:hover {
+    background-color: var(--soft-critical-fill-hover);
+  }
+}
+[data-slot="button"]:disabled {
+  opacity: 0.5;
+}
+.soft-button:focus-visible,
+[data-slot="button"]:focus-visible {
+  outline: var(--soft-focus-width) solid var(--soft-focus);
+  outline-offset: var(--soft-focus-offset);
+}
+
+/* Fields: a white well with an inset hairline that darkens on hover. */
+[data-slot="input"],
+[data-slot="input-group"],
+[data-slot="select-trigger"],
+[data-slot="textarea"] {
+  border-radius: var(--soft-field-radius);
+  border: 0;
+  background: var(--soft-field-surface);
+  box-shadow: var(--soft-field-shadow);
+  color: var(--soft-text);
+  font-family: var(--soft-font-sans);
+  font-size: var(--soft-field-font-size);
+  font-weight: var(--soft-weight-regular);
+  line-height: var(--soft-field-line-height);
+  transition: box-shadow 120ms ease;
+}
+:is(
+  [data-slot="input"],
+  [data-slot="input-group"],
+  [data-slot="select-trigger"],
+  [data-slot="textarea"]
+):hover:not(:disabled, [data-disabled]) {
+  box-shadow:
+    inset 0 0 0 1px var(--soft-border-strong),
+    var(--soft-shadow-xs);
+}
+[data-slot="input-group-control"] {
+  background: transparent;
+  font-size: var(--soft-field-font-size);
+  font-weight: var(--soft-weight-regular);
+  line-height: var(--soft-field-line-height);
+}
+[data-slot="textarea"] {
+  height: auto;
+  min-height: 96px;
+  resize: vertical;
+}
+[data-slot="input"]::placeholder,
+[data-slot="input-group-control"]::placeholder,
+[data-slot="textarea"]::placeholder {
+  color: var(--muted-foreground);
+  opacity: 1;
+}
+[data-slot="input"]:focus-visible,
+[data-slot="textarea"]:focus-visible,
+[data-slot="select-trigger"]:focus-visible,
+[data-slot="input-group"]:focus-within {
+  outline: var(--soft-focus-width) solid var(--soft-focus);
+  outline-offset: 0;
+  box-shadow:
+    inset 0 0 0 1px var(--soft-accent),
+    var(--soft-shadow-xs);
+}
+[aria-invalid="true"][data-slot="input"],
+[aria-invalid="true"][data-slot="textarea"],
+[aria-invalid="true"][data-slot="select-trigger"],
+[data-slot="input-group"]:has([aria-invalid="true"]) {
+  background: var(--soft-critical-bg);
+  box-shadow: inset 0 0 0 1px var(--soft-critical-border);
+  outline: 2px solid var(--destructive);
+  outline-offset: 0;
+}
+
+/* Cards: white surface, hairline ring, faint lift. */
+@layer components {
+  [data-slot="card"] {
+    background: var(--soft-surface);
+    color: var(--soft-text);
+    box-shadow: var(--soft-card-shadow);
+    font-size: var(--soft-font-size-md);
+    font-weight: var(--soft-weight-regular);
+    line-height: var(--soft-line-height-md);
+  }
+}
+[data-slot="card-title"] {
+  font-size: var(--soft-font-size-md);
+  font-weight: var(--soft-weight-semibold);
+  line-height: var(--soft-line-height-md);
+}
+/* Overlays and menus. */
+[data-slot="card-description"],
+[data-slot="dialog-description"],
+[data-slot="label"],
+[data-slot="select-item"],
+[data-slot="dropdown-menu-item"],
+[data-slot="popover-content"] {
+  font-size: var(--soft-font-size-md);
+  line-height: var(--soft-line-height-md);
+}
+[data-slot="dialog-content"] {
+  width: 560px;
+  max-width: calc(100vw - 24px);
+  max-height: calc(100dvh - 24px);
+  overflow-y: auto;
+  padding: var(--soft-space-5);
+  border-radius: var(--soft-radius-xl);
+  box-shadow: var(--soft-shadow-lg);
+}
+[data-slot="dialog-overlay"] {
+  background: var(--soft-backdrop);
+  backdrop-filter: blur(2px);
+}
+[data-slot="dialog-title"] {
+  font-size: var(--soft-font-size-lg);
+  font-weight: var(--soft-weight-semibold);
+  line-height: var(--soft-line-height-lg);
+  padding-right: var(--soft-space-8);
+}
+[data-slot="popover-content"],
+[data-slot="dropdown-menu-content"],
+[data-slot="select-content"] {
+  max-width: calc(100vw - 24px);
+  border-radius: 10px;
+  box-shadow: var(--soft-shadow-md);
+}
+[data-slot="calendar"] {
+  background: var(--popover);
+  --cell-size: 32px;
+}
+[data-slot="calendar"] [data-slot="button"] {
+  height: var(--cell-size);
+  padding: 0;
+}
+[data-slot="checkbox"][data-indeterminate] {
+  background: var(--primary);
+  color: var(--primary-foreground);
+}
+[data-slot="avatar-fallback"] {
+  background: var(--soft-accent-subtle);
+  color: var(--soft-accent-ink);
+  font-weight: var(--soft-weight-semibold);
+}
+[data-slot="spinner"] {
+  animation: soft-spin 800ms linear infinite;
+}
+
+/* Tables: quiet header, hairline rows, tabular figures. */
+[data-slot="table"] {
+  font-size: inherit;
+  font-variant-numeric: tabular-nums;
+}
+[data-slot="table-head"],
+[data-slot="table-cell"] {
+  padding: var(--soft-cell-padding);
+}
+[data-slot="table-head"] {
+  background: var(--soft-surface-subtle);
+  color: var(--soft-text-secondary);
+  font-size: var(--soft-font-size-sm);
+  font-weight: var(--soft-weight-medium);
+}
+.soft-table-scroll {
+  overflow-x: auto;
+  width: 100%;
+  border-radius: var(--soft-radius-md);
+}
+.soft-table-scroll table {
+  width: 100%;
+  border-collapse: collapse;
+  font-variant-numeric: tabular-nums;
+}
+.soft-table-scroll th,
+.soft-table-scroll td {
+  padding: var(--soft-cell-padding);
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap;
+}
+.soft-table-scroll th {
+  background: var(--soft-surface-subtle);
+  color: var(--soft-text-secondary);
+  font-size: var(--soft-font-size-sm);
+  font-weight: var(--soft-weight-medium);
+}
+
+/* A table placed straight in a card runs edge to edge, aligned to the card padding. */
+[data-slot="card"] > [data-slot="data-table"] > [data-slot="data-table-scroll"] {
+  border-inline: 0;
+  border-radius: 0;
+  background: var(--soft-surface);
+}
+[data-slot="card"] > [data-slot="data-table"] > [data-slot="data-table-footer"] {
+  padding-inline: var(--soft-card-padding);
+}
+[data-slot="card"]
+  > :is([data-slot="data-table"] > [data-slot="data-table-scroll"], .soft-table-scroll)
+  :is(th, td):first-child {
+  padding-left: var(--soft-card-padding);
+}
+[data-slot="card"]
+  > :is([data-slot="data-table"] > [data-slot="data-table-scroll"], .soft-table-scroll)
+  :is(th, td):last-child {
+  padding-right: var(--soft-card-padding);
+}
+
+/* Links and form scaffolding. */
+.soft-link {
+  color: var(--soft-text-link);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+}
+.soft-link:hover {
+  text-decoration-thickness: 2px;
+}
+.soft-field {
+  display: grid;
+  gap: var(--soft-label-gap);
+  min-width: 0;
+}
+.soft-field-message {
+  color: var(--muted-foreground);
+  font-size: var(--soft-font-size-sm);
+  line-height: var(--soft-line-height-sm);
+}
+.soft-field-error {
+  color: var(--soft-critical-ink);
+  font-size: var(--soft-font-size-sm);
+  line-height: var(--soft-line-height-sm);
+}
+.soft-choice {
+  display: flex;
+  align-items: start;
+  gap: var(--soft-space-2);
+}
+.soft-choice > :first-child {
+  margin-top: 3px;
+}
+
+/* Layout helpers. */
+.soft-stack {
+  display: flex;
+  gap: var(--soft-gap, var(--soft-space-4));
+  min-width: 0;
+}
+.soft-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--soft-columns, 2), minmax(0, 1fr));
+  gap: var(--soft-gap, var(--soft-space-4));
+  min-width: 0;
+}
+
+/* Page: a centered column with a compact header row. */
+.soft-page {
+  width: 100%;
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: 28px 32px 40px;
+  min-width: 0;
+}
+.soft-page > a.soft-link {
+  color: var(--soft-text-secondary);
+  font-size: var(--soft-font-size-sm);
+  text-decoration: none;
+}
+.soft-page > a.soft-link:hover {
+  color: var(--soft-text);
+}
+.soft-page-header {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: var(--soft-space-3) var(--soft-space-4);
+  margin-bottom: var(--soft-space-6);
+}
+.soft-page h1 {
+  font-size: var(--soft-font-size-2xl);
+  line-height: var(--soft-line-height-2xl);
+  font-weight: var(--soft-weight-semibold);
+  letter-spacing: var(--soft-tracking-tight);
+}
+.soft-page-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--soft-space-2);
+}
+
+/* Sections inside a card: small secondary heading, dashed separator. */
+:not(.soft-grid) > .soft-section + .soft-section {
+  border-top: 1px dashed var(--soft-border-strong);
+  padding-top: var(--soft-space-4);
+}
+.soft-section-title {
+  color: var(--soft-text-secondary);
+  font-size: var(--soft-font-size-sm);
+  font-weight: var(--soft-weight-semibold);
+  line-height: var(--soft-line-height-sm);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+/* Tones feed badges and banners. */
+.soft-tone {
+  --soft-tone-ink: var(--soft-neutral-ink);
+  --soft-tone-bg: var(--soft-neutral-bg);
+  --soft-tone-fg: var(--soft-neutral-ink);
+  --soft-tone-border: var(--soft-neutral-border);
+}
+.soft-tone[data-tone="info"] {
+  --soft-tone-ink: var(--soft-info-ink);
+  --soft-tone-bg: var(--soft-info-bg);
+  --soft-tone-fg: var(--soft-info-ink);
+  --soft-tone-border: var(--soft-info-border);
+}
+.soft-tone[data-tone="success"] {
+  --soft-tone-ink: var(--soft-success-ink);
+  --soft-tone-bg: var(--soft-success-bg);
+  --soft-tone-fg: var(--soft-success-ink);
+  --soft-tone-border: var(--soft-success-border);
+}
+.soft-tone[data-tone="warning"] {
+  --soft-tone-ink: var(--soft-warning-ink);
+  --soft-tone-bg: var(--soft-warning-bg);
+  --soft-tone-fg: var(--soft-warning-ink);
+  --soft-tone-border: var(--soft-warning-border);
+}
+.soft-tone[data-tone="caution"] {
+  --soft-tone-ink: var(--soft-caution-ink);
+  --soft-tone-bg: var(--soft-caution-bg);
+  --soft-tone-fg: var(--soft-caution-ink);
+  --soft-tone-border: var(--soft-caution-border);
+}
+.soft-tone[data-tone="critical"] {
+  --soft-tone-ink: var(--soft-critical-ink);
+  --soft-tone-bg: var(--soft-critical-bg);
+  --soft-tone-fg: var(--soft-critical-ink);
+  --soft-tone-border: var(--soft-critical-border);
+}
+
+/* Badge: a tinted pill with a hairline ring in its tone. */
+.soft-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-height: 20px;
+  border-radius: var(--soft-radius-full);
+  padding: 2px 8px;
+  background: var(--soft-tone-bg);
+  box-shadow: inset 0 0 0 1px var(--soft-tone-border);
+  color: var(--soft-tone-fg);
+  font-size: var(--soft-font-size-sm);
+  font-weight: var(--soft-weight-medium);
+  line-height: var(--soft-line-height-sm);
+}
+
+/* Banner: tinted panel with a tone stripe on the leading edge. */
+.soft-banner {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--soft-radius-lg);
+  background: var(--soft-tone-bg);
+  box-shadow:
+    inset 0 0 0 1px var(--soft-tone-border),
+    inset 3px 0 0 var(--soft-tone-ink);
+  padding: var(--soft-space-3) var(--soft-space-4) var(--soft-space-3) 18px;
+}
+.soft-banner-header {
+  display: flex;
+  align-items: center;
+  gap: var(--soft-space-2);
+  color: var(--soft-text);
+  font-weight: var(--soft-weight-semibold);
+}
+.soft-banner-header > svg {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  color: var(--soft-tone-ink);
+}
+.soft-banner-header > button {
+  margin-left: auto;
+  color: var(--soft-text-secondary);
+  background: transparent;
+}
+.soft-banner-body {
+  padding: var(--soft-space-1) 0 0 calc(16px + var(--soft-space-2));
+  color: var(--soft-text);
+}
+
+@media (max-width: 640px) {
+  .soft-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .soft-page {
+    padding: var(--soft-space-4) var(--soft-space-4) var(--soft-space-8);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    /* biome-ignore lint/complexity/noImportantStyles: Reduced motion must override component animation utilities. */
+    animation-duration: 0.01ms !important;
+    /* biome-ignore lint/complexity/noImportantStyles: Reduced motion must stop infinite component animations. */
+    animation-iteration-count: 1 !important;
+    /* biome-ignore lint/complexity/noImportantStyles: Reduced motion must override component transition utilities. */
+    transition-duration: 0.01ms !important;
+    /* biome-ignore lint/complexity/noImportantStyles: Reduced motion must override smooth scrolling utilities. */
+    scroll-behavior: auto !important;
+  }
+}
+
+/*
+ * Indeterminate Progress. Base UI marks the indicator data-indeterminate and
+ * sets no width, so upstream renders an empty track that reads as 0%. A short
+ * segment sweeps the track instead; reduced motion parks it at the start.
+ */
+@layer components {
+  [data-slot="progress-indicator"][data-indeterminate] {
+    width: 40%;
+    animation: progress-indeterminate 1.4s ease-in-out infinite;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [data-slot="progress-indicator"][data-indeterminate] {
+      animation: none;
+    }
+  }
+}
+
+/*
+ * Breadcrumb links. Upstream gives BreadcrumbLink no focus style, so keyboard
+ * focus fell back to the browser's auto outline: tight against the glyphs and
+ * a bright white box in dark. Same subtle ring as other borderless focus
+ * targets; the padding is cancelled by negative margin, so layout is unchanged.
+ */
+@layer components {
+  [data-slot="breadcrumb-link"] {
+    @apply -mx-0.5 rounded-sm px-0.5 outline-none focus-visible:ring-2 focus-visible:ring-ring/50;
+  }
+}
+
+/*
+ * Text shimmer (tw-shimmer). In light mode its highlight is the text color at
+ * 20% alpha, so each letter fades nearly to the background as the band passes
+ * ("Working, 5 steps" read "Working, 5 · ps" mid-sweep). The light band now
+ * sweeps toward a darker step of the text color (muted-foreground reaches
+ * about foreground), so every glyph keeps its contrast on every frame. Dark
+ * mode keeps tw-shimmer's own band, which already brightens the text.
+ */
+@layer components {
+  .shimmer:not(.shimmer-bg):not(:is(.dark *)) {
+    --shimmer-color: oklch(from currentColor calc(l * 0.35) c h);
+  }
+}
+
+@keyframes progress-indeterminate {
+  from {
+    translate: -100% 0;
+  }
+  to {
+    translate: 250% 0;
+  }
+}
+
+@custom-variant data-open (&:where([data-state="open"], [data-open]:not([data-open="false"])));
+
+@custom-variant data-closed (
+  &:where([data-state="closed"], [data-closed]:not([data-closed="false"]))
+);
+
+.soft-badge-destructive:not([data-tone]) {
+  --soft-tone-bg: var(--soft-critical-bg);
+  --soft-tone-fg: var(--soft-critical-ink);
+  --soft-tone-border: var(--soft-critical-border);
+}
+.soft-badge-outline {
+  color: var(--soft-tone-ink, var(--foreground));
+  background: transparent;
+  border-color: var(--soft-tone-border);
+}
+.soft-badge-ghost,
+.soft-badge-link {
+  color: var(--soft-tone-ink, var(--foreground));
+  background: transparent;
+}
+.soft-badge-link {
+  color: var(--soft-tone-ink, var(--soft-text-link));
+}
+.soft-button-link {
+  background: transparent;
+  box-shadow: none;
+  color: var(--soft-text-link);
+  text-decoration: underline;
+}
+
+[data-slot="alert"],
+[data-slot="empty"],
+[data-slot="sheet-content"],
+[data-slot="drawer-content"],
+[data-slot="hover-card-content"] {
+  border-radius: var(--soft-radius-lg);
+  font-size: var(--soft-font-size-md);
+  line-height: var(--soft-line-height-md);
+}
+[data-slot="field-label"],
+[data-slot="field-legend"],
+[data-slot="accordion-trigger"],
+[data-slot="navigation-menu-trigger"],
+[data-slot="menubar-trigger"],
+[data-slot="command-item"] {
+  font-size: var(--soft-font-size-md);
+  font-weight: var(--soft-weight-medium);
+}
+[data-slot="native-select"],
+[data-slot="combobox-input"],
+[data-slot="input-otp-slot"] {
+  min-height: var(--soft-control-height);
+  background: var(--soft-field-surface);
+  border-color: var(--input);
+  border-radius: var(--soft-radius-md);
+}
+
+/* Settle popup exit before restoring focus; do not hide a still-modal tree. */
+[data-ending-style][data-closed] {
+  animation: none;
+  transition: none;
+}
+
+:is(
+  button,
+  a[href],
+  summary,
+  select,
+  label[for],
+  [role="button"],
+  [role="link"],
+  [role="tab"],
+  [role="option"],
+  [role="menuitem"],
+  [role="menuitemcheckbox"],
+  [role="menuitemradio"],
+  [role="switch"],
+  [role="checkbox"],
+  [role="radio"],
+  [role="combobox"],
+  [role="slider"],
+  [role="treeitem"],
+  [data-slot$="trigger"],
+  input:is(
+    [type="checkbox"],
+    [type="radio"],
+    [type="range"],
+    [type="color"],
+    [type="file"],
+    [type="submit"],
+    [type="button"],
+    [type="reset"]
+  )
+):not(
+  input:is(
+    :not([type]),
+    [type="text"],
+    [type="search"],
+    [type="email"],
+    [type="url"],
+    [type="tel"],
+    [type="number"],
+    [type="password"]
+  ),
+  textarea
+) {
+  cursor: pointer;
+}
+
+:is(
+  button,
+  a[href],
+  summary,
+  select,
+  [role="button"],
+  [role="link"],
+  [role="tab"],
+  [role="option"],
+  [role="menuitem"],
+  [role="menuitemcheckbox"],
+  [role="menuitemradio"],
+  [role="switch"],
+  [role="checkbox"],
+  [role="radio"],
+  [role="combobox"],
+  [role="slider"],
+  [role="treeitem"],
+  [data-slot$="trigger"],
+  input
+):is(:disabled, [aria-disabled="true"], [data-disabled]) {
+  cursor: not-allowed;
+}
+
+input[data-slot="input-group-control"] {
+  height: 100%;
+}
+
+.soft-field > [data-slot="label"],
+[data-slot="field-label"] {
+  font-size: var(--soft-font-size-md);
+  font-weight: var(--soft-weight-medium);
+  line-height: var(--soft-line-height-md);
+}