@pure-ds/storybook 0.4.15 → 0.4.17

package/public/assets/pds/styles/pds-styles.css

@@ -733,7 +733,12 @@ html[data-theme="dark"] {
     overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
   }
-  
+
+  :where(body.drawer-open) {
+    /* overflow: hidden; */
+    /* scrollbar-gutter: stable; */
+  }
+
   /* Button primitives */
   :where(button) {
     all: unset;
@@ -1083,6 +1088,36 @@ html[data-theme="dark"] {
   height: 0;
 }
 
+/* Labeled horizontal rule: <hr data-content="OR"> */
+:where(hr[data-content]) {
+  position: relative;
+  border: none;
+  text-align: center;
+  height: auto;
+  overflow: visible;
+  
+  &::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width: 100%;
+    height: 1px;
+    background: linear-gradient(to right, transparent, var(--color-border), transparent);
+  }
+  
+  &::after {
+    content: attr(data-content);
+    position: relative;
+    display: inline-block;
+    padding: 0 var(--spacing-3);
+    background-color: var(--color-surface-base);
+    color: var(--color-text-muted);
+    font-size: var(--font-size-sm);
+    line-height: var(--font-line-height-normal);
+  }
+}
+
 :where(dl) {
   margin: 0 0 var(--spacing-4) 0;
 }
@@ -1110,6 +1145,11 @@ html[data-theme="dark"] {
   width: 100%;
 }
 
+/* Headings within header elements have tight spacing for intro content */
+:where(header) > :where(h1, h2, h3, h4, h5, h6) {
+  margin: 0;
+}
+
 :where(article), :where(section), :where(aside) {
   display: block;
   margin-bottom: var(--spacing-6);
@@ -1216,7 +1256,7 @@ form {
 }
 
 fieldset {
-  margin: 0 0 var(--spacing-2) 0;
+  margin: 0;
   padding: var(--spacing-5);
   width: 100%;
   background-color: color-mix(in oklab, var(--color-surface-subtle) 50%, transparent 50%);
@@ -1291,7 +1331,6 @@ fieldset fieldset fieldset > legend { font-size: var(--font-size-sm); }
 
 label {
   display: block;
-  margin-bottom: var(--spacing-3);
   font-weight: var(--font-weight-medium);
   color: var(--color-text-primary);
   font-size: var(--font-size-sm);
@@ -1454,7 +1493,6 @@ input[type="range"]:active::-moz-range-thumb {
 }
 
 input[type="color"] {
-  appearance: none;
   -webkit-appearance: none;
   padding: 0;
   width: 3rem;
@@ -1996,16 +2034,7 @@ a.btn-working {
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   background-color: var(--color-surface-base);
-
-  fieldset {
-    background-color: transparent;
-    margin-bottom: var(--spacing-3);
-
-    &:last-of-type {
-      margin-bottom: 0;
-    }
-  }
-
+  
   .array-controls {
     padding-top: var(--spacing-3);
     border-top: 1px solid var(--color-border);
@@ -2153,82 +2182,30 @@ a.btn-working {
   vertical-align: middle;
   background-color: var(--color-gray-200);
   color: var(--color-gray-800);
-  border-radius: var(--radius-full);
-}
-
-.badge-primary {
-  background-color: var(--color-primary-600);
-  color: white;
-}
-
-.badge-secondary {
-  background-color: var(--color-secondary-600);
-  color: white;
-}
-
-.badge-success {
-  background-color: var(--color-success-600);
-  color: white;
-}
-
-.badge-info {
-  background-color: var(--color-info-600);
-  color: white;
 }
 
-.badge-warning {
-  background-color: var(--color-warning-600);
-  color: white;
-}
-
-.badge-danger {
-  background-color: var(--color-danger-600);
-  color: white;
-}
+.badge-primary, .badge-secondary, .badge-success, .badge-info, .badge-warning, .badge-danger { color: white; }
+.badge-primary { background-color: var(--color-primary-600); }
+.badge-secondary { background-color: var(--color-secondary-600); }
+.badge-success { background-color: var(--color-success-600); }
+.badge-info { background-color: var(--color-info-600); }
+.badge-warning { background-color: var(--color-warning-600); }
+.badge-danger { background-color: var(--color-danger-600); }
 
 .badge-outline {
   background-color: transparent;
   border: 1px solid currentColor;
-
-  &.badge-primary {
-    color: var(--color-text-primary);
-  }
-
-  &.badge-secondary {
-    color: var(--color-secondary-600);
-  }
-
-  &.badge-success {
-    color: var(--color-success-600);
-  }
-
-  &.badge-info {
-    color: var(--color-info-600);
-  }
-
-  &.badge-warning {
-    color: var(--color-warning-600);
-  }
-
-  &.badge-danger {
-    color: var(--color-danger-600);
-  }
+  &.badge-primary { color: var(--color-text-primary); }
+  &.badge-secondary { color: var(--color-secondary-600); }
+  &.badge-success { color: var(--color-success-600); }
+  &.badge-info { color: var(--color-info-600); }
+  &.badge-warning { color: var(--color-warning-600); }
+  &.badge-danger { color: var(--color-danger-600); }
 }
 
-.badge-sm {
-  padding: 2px var(--spacing-1);
-  font-size: 10px;
-}
-
-.badge-lg {
-  padding: var(--spacing-2) var(--spacing-3);
-  font-size: var(--font-size-sm);
-}
-
-.pill {
-  padding: var(--spacing-1) var(--spacing-3);
-  border-radius: var(--radius-full);
-}
+.badge-sm { padding: 2px var(--spacing-1); font-size: 10px; }
+.badge-lg { padding: var(--spacing-2) var(--spacing-3); font-size: var(--font-size-sm); }
+.pill { padding: var(--spacing-1) var(--spacing-3); border-radius: var(--radius-full); }
 
 
 
@@ -2262,8 +2239,7 @@ dialog {
     overlay 0.2s ease allow-discrete,
     display 0.2s ease allow-discrete;
   
-  /* Overflow handling */
-  overflow: hidden;
+  
 }
 
 /* Open state */
@@ -2365,7 +2341,7 @@ dialog {
   form > article,
   .dialog-body {
     flex: 1;
-    padding: var(--spacing-6);
+    padding: var(--spacing-3) var(--spacing-6);
     overflow-y: auto;
     overflow-x: hidden;
   }
@@ -2385,50 +2361,20 @@ dialog {
 }
 
 /* Dialog size modifiers */
-dialog.dialog-sm {
-  max-width: min(400px, calc(100vw - var(--spacing-8)));
-}
-
-dialog.dialog-lg {
-  max-width: min(800px, calc(100vw - var(--spacing-8)));
-}
-
-dialog.dialog-xl {
-  max-width: min(1200px, calc(100vw - var(--spacing-8)));
-}
-
-dialog.dialog-full {
-  max-width: calc(100vw - var(--spacing-8));
-  max-height: calc(100vh - var(--spacing-8));
-}
+dialog.dialog-sm { max-width: min(400px, calc(100vw - var(--spacing-8))); }
+dialog.dialog-lg { max-width: min(800px, calc(100vw - var(--spacing-8))); }
+dialog.dialog-xl { max-width: min(1200px, calc(100vw - var(--spacing-8))); }
+dialog.dialog-full { max-width: calc(100vw - var(--spacing-8)); max-height: calc(100vh - var(--spacing-8)); }
 
 /* Mobile responsiveness */
 @media (max-width: 639px) {
-  dialog {
-    max-width: 100vw;
-    max-height: 100vh;
-    border-radius: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    margin: 0;
-  }
-  
-  dialog header,
-  dialog form > header,
-  dialog article,
-  dialog form > article,
-  dialog footer,
-  dialog form > footer {
-    padding: var(--spacing-4);
-  }
+  dialog { max-width: 100vw; max-height: 100vh; border-radius: 0; top: 50%; transform: translateY(-50%); margin: 0; }
+  dialog header, dialog form > header, dialog article, dialog form > article, dialog footer, dialog form > footer { padding: var(--spacing-4); }
 }
 
 /* Reduced motion support */
 @media (prefers-reduced-motion: reduce) {
-  dialog,
-  dialog::backdrop {
-    transition-duration: 0.01s !important;
-  }
+  dialog, dialog::backdrop { transition-duration: 0.01s !important; }
 }
 
 
@@ -2751,30 +2697,15 @@ pds-tabstrip {
 }
 
 @keyframes tabFadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
 /* Mobile responsive */
 @media (max-width: 639px) {
-  pds-tabstrip > nav {
-    gap: var(--spacing-1);
-  }
-
-  pds-tabstrip > nav > a {
-    padding: var(--spacing-2) var(--spacing-3);
-    font-size: var(--font-size-sm);
-  }
-
-  pds-tabstrip > pds-tabpanel[data-tabpanel] {
-    padding: var(--spacing-3) 0;
-  }
+  pds-tabstrip > nav { gap: var(--spacing-1); }
+  pds-tabstrip > nav > a { padding: var(--spacing-2) var(--spacing-3); font-size: var(--font-size-sm); }
+  pds-tabstrip > pds-tabpanel[data-tabpanel] { padding: var(--spacing-3) 0; }
 }
 
 
@@ -2888,106 +2819,41 @@ tbody {
 }
 
 /* Custom Scrollbars */
-
-::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
+::-webkit-scrollbar { width: 12px; height: 12px; }
+::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb {
   background: var(--color-secondary-300);
   border-radius: var(--radius-full);
   border: 3px solid transparent;
   background-clip: padding-box;
   transition: background-color var(--transition-fast);
-  
-  &:hover {
-    background: var(--color-secondary-400);
-    border: 2px solid transparent;
-    background-clip: padding-box;
-  }
-  
-  &:active {
-    background: var(--color-secondary-500);
-    border: 2px solid transparent;
-    background-clip: padding-box;
-  }
-  
+  &:hover { background: var(--color-secondary-400); border: 2px solid transparent; background-clip: padding-box; }
+  &:active { background: var(--color-secondary-500); border: 2px solid transparent; background-clip: padding-box; }
   @media (prefers-color-scheme: dark) {
     background: var(--color-secondary-600);
-    
-    &:hover {
-      background: var(--color-secondary-500);
-    }
-    
-    &:active {
-      background: var(--color-secondary-400);
-    }
+    &:hover { background: var(--color-secondary-500); }
+    &:active { background: var(--color-secondary-400); }
   }
 }
 
 * {
   scrollbar-width: thin;
   scrollbar-color: var(--color-secondary-300) transparent;
-  
-  @media (prefers-color-scheme: dark) {
-    scrollbar-color: var(--color-secondary-600) transparent;
-  }
-}
-
-/* Hover effect for scrollable containers */
-*:hover {
-  scrollbar-color: var(--color-secondary-400) transparent;
-}
-
-@media (prefers-color-scheme: dark) {
-  *:hover {
-    scrollbar-color: var(--color-secondary-500) transparent;
-  }
+  @media (prefers-color-scheme: dark) { scrollbar-color: var(--color-secondary-600) transparent; }
 }
+*:hover { scrollbar-color: var(--color-secondary-400) transparent; }
+@media (prefers-color-scheme: dark) { *:hover { scrollbar-color: var(--color-secondary-500) transparent; } }
 
 
 
 /* Alert dark mode adjustments */
-html[data-theme="dark"] .alert-success {
-  background-color: var(--color-success-50);
-  border-color: var(--color-success-500);
-  color: var(--color-success-900);
-}
-
-html[data-theme="dark"] .alert-info {
-  background-color: var(--color-info-50);
-  border-color: var(--color-info-500);
-  color: var(--color-info-900);
-}
-
-html[data-theme="dark"] .alert-warning {
-  background-color: var(--color-warning-50);
-  border-color: var(--color-warning-500);
-  color: var(--color-warning-900);
-}
-
-html[data-theme="dark"] .alert-danger,
-html[data-theme="dark"] .alert-error {
-  background-color: var(--color-danger-50);
-  border-color: var(--color-danger-500);
-  color: var(--color-danger-900);
-}
-
-/* Dim images in dark mode */
-html[data-theme="dark"] img, 
-html[data-theme="dark"] video {
-  opacity: 0.8;
-  transition: opacity var(--transition-normal);
-}
-
-html[data-theme="dark"] img:hover, 
-html[data-theme="dark"] video:hover {
-  opacity: 1;
+html[data-theme="dark"] {
+  .alert-success { background-color: var(--color-success-50); border-color: var(--color-success-500); color: var(--color-success-900); }
+  .alert-info { background-color: var(--color-info-50); border-color: var(--color-info-500); color: var(--color-info-900); }
+  .alert-warning { background-color: var(--color-warning-50); border-color: var(--color-warning-500); color: var(--color-warning-900); }
+  .alert-danger, .alert-error { background-color: var(--color-danger-50); border-color: var(--color-danger-500); color: var(--color-danger-900); }
+  img, video { opacity: 0.8; transition: opacity var(--transition-normal); }
+  img:hover, video:hover { opacity: 1; }
 }
 
 }
@@ -3006,102 +2872,28 @@ pds-icon {
 }
 
 /* Icon size utilities */
-.icon-xs,
-pds-icon[size="xs"] {
-  width: var(--icon-size-xs);
-  height: var(--icon-size-xs);
-}
-
-.icon-sm,
-pds-icon[size="sm"] {
-  width: var(--icon-size-sm);
-  height: var(--icon-size-sm);
-}
-
-.icon-md,
-pds-icon[size="md"] {
-  width: var(--icon-size-md);
-  height: var(--icon-size-md);
-}
-
-.icon-lg,
-pds-icon[size="lg"] {
-  width: var(--icon-size-lg);
-  height: var(--icon-size-lg);
-}
-
-.icon-xl,
-pds-icon[size="xl"] {
-  width: var(--icon-size-xl);
-  height: var(--icon-size-xl);
-}
-
-.icon-2xl,
-pds-icon[size="2xl"] {
-  width: var(--icon-size-2xl);
-  height: var(--icon-size-2xl);
-}
+.icon-xs, pds-icon[size="xs"] { width: var(--icon-size-xs); height: var(--icon-size-xs); }
+.icon-sm, pds-icon[size="sm"] { width: var(--icon-size-sm); height: var(--icon-size-sm); }
+.icon-md, pds-icon[size="md"] { width: var(--icon-size-md); height: var(--icon-size-md); }
+.icon-lg, pds-icon[size="lg"] { width: var(--icon-size-lg); height: var(--icon-size-lg); }
+.icon-xl, pds-icon[size="xl"] { width: var(--icon-size-xl); height: var(--icon-size-xl); }
+.icon-2xl, pds-icon[size="2xl"] { width: var(--icon-size-2xl); height: var(--icon-size-2xl); }
 
 /* Icon color utilities */
-.icon-primary,
-pds-icon.primary {
-  color: var(--color-primary-600);
-}
-
-.icon-secondary,
-pds-icon.secondary {
-  color: var(--color-secondary-600);
-}
-
-.icon-accent,
-pds-icon.accent {
-  color: var(--color-accent-600);
-}
-
-.icon-success,
-pds-icon.success {
-  color: var(--color-success-600);
-}
-
-.icon-warning,
-pds-icon.warning {
-  color: var(--color-warning-600);
-}
-
-.icon-danger,
-pds-icon.danger {
-  color: var(--color-danger-600);
-}
-
-.icon-info,
-pds-icon.info {
-  color: var(--color-info-600);
-}
-
-.icon-muted,
-pds-icon.muted {
-  color: var(--color-text-muted);
-}
-
-.icon-subtle,
-pds-icon.subtle {
-  color: var(--color-text-subtle);
-}
+.icon-primary, pds-icon.primary { color: var(--color-primary-600); }
+.icon-secondary, pds-icon.secondary { color: var(--color-secondary-600); }
+.icon-accent, pds-icon.accent { color: var(--color-accent-600); }
+.icon-success, pds-icon.success { color: var(--color-success-600); }
+.icon-warning, pds-icon.warning { color: var(--color-warning-600); }
+.icon-danger, pds-icon.danger { color: var(--color-danger-600); }
+.icon-info, pds-icon.info { color: var(--color-info-600); }
+.icon-muted, pds-icon.muted { color: var(--color-text-muted); }
+.icon-subtle, pds-icon.subtle { color: var(--color-text-subtle); }
 
 /* Icon with text combinations */
-.icon-text {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-2);
-}
-
-.icon-text-start {
-  flex-direction: row;
-}
-
-.icon-text-end {
-  flex-direction: row-reverse;
-}
+.icon-text { display: inline-flex; align-items: center; gap: var(--spacing-2); }
+.icon-text-start { flex-direction: row; }
+.icon-text-end { flex-direction: row-reverse; }
 
 /* Button icon utilities */
 button, a {
@@ -3121,46 +2913,19 @@ button, a {
 }
 
 /* Icon in inputs */
-.input-icon {
+.input-icon, .input-icon-end {
   position: relative;
   display: flex;
   align-items: center;
-
-  pds-icon {
-    position: absolute;
-    left: var(--spacing-3);
-    color: var(--color-text-muted);
-    pointer-events: none;
-    width: var(--icon-size-md);
-    height: var(--icon-size-md);
-  }
-
-  input {
-    padding-left: calc(var(--icon-size-md) + var(--spacing-6));
-    width: 100%;
-  }
+  pds-icon { position: absolute; color: var(--color-text-muted); pointer-events: none; width: var(--icon-size-md); height: var(--icon-size-md); }
+}
+.input-icon {
+  pds-icon { left: var(--spacing-3); }
+  input { padding-left: calc(var(--icon-size-md) + var(--spacing-6)); width: 100%; }
 }
-
 .input-icon-end {
-  position: relative;
-  display: flex;
-  align-items: center;
-
-  pds-icon {
-    position: absolute;
-    left: unset;
-    right: var(--spacing-3);
-    color: var(--color-text-muted);
-    pointer-events: none;
-    width: var(--icon-size-md);
-    height: var(--icon-size-md);
-  }
-
-  input {
-    padding-left: var(--spacing-4);
-    padding-right: calc(var(--icon-size-md) + var(--spacing-6));
-    width: 100%;
-  }
+  pds-icon { left: unset; right: var(--spacing-3); }
+  input { padding-left: var(--spacing-4); padding-right: calc(var(--icon-size-md) + var(--spacing-6)); width: 100%; }
 }
 
 
@@ -3199,44 +2964,45 @@ button, a {
 .grid-auto-xl { grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); }
 
 /* Gap utilities */
-.gap-0 { gap: 0; }
-.gap-xs { gap: var(--spacing-1); }
-.gap-sm { gap: var(--spacing-2); }
-.gap-md { gap: var(--spacing-4); }
-.gap-lg { gap: var(--spacing-6); }
-.gap-xl { gap: var(--spacing-8); }
+.gap-0 { gap: 0; } .gap-xs { gap: var(--spacing-1); } .gap-sm { gap: var(--spacing-2); } .gap-md { gap: var(--spacing-4); } .gap-lg { gap: var(--spacing-6); } .gap-xl { gap: var(--spacing-8); }
 
 
 /* Flexbox System */
-.flex {
-  display: flex;
+.flex { display: flex; }
+.flex-wrap { flex-wrap: wrap; }
+.flex-col { flex-direction: column; }
+.flex-row { flex-direction: row; }
+.grow { flex: 1 1 0%; }
+
+/* Alignment utilities */
+.items-start { align-items: flex-start; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .items-stretch { align-items: stretch; } .items-baseline { align-items: baseline; }
+.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; }
+.text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; }
+
+/* Text overflow utility */
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.flex-wrap {
-  flex-wrap: wrap;
-}
+/* Max-width utilities */
+.max-w-sm { max-width: 400px; } .max-w-md { max-width: 600px; } .max-w-lg { max-width: 800px; } .max-w-xl { max-width: 1200px; }
 
-.flex-col {
+/* Stack utilities - vertical rhythm for stacked elements */
+[class^="stack-"], [class*=" stack-"] {
+  display: flex;
   flex-direction: column;
 }
+.stack-xs { gap: var(--spacing-1); }
+.stack-sm { gap: var(--spacing-2); }
+.stack-md { gap: var(--spacing-4); }
+.stack-lg { gap: var(--spacing-6); }
+.stack-xl { gap: var(--spacing-8); }
 
-.flex-row {
-  flex-direction: row;
-}
-
-/* Flex alignment */
-.items-start { align-items: flex-start; }
-.items-center { align-items: center; }
-.items-end { align-items: flex-end; }
-.items-stretch { align-items: stretch; }
-.items-baseline { align-items: baseline; }
-
-.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; }
+/* Section spacing - for major content blocks */
+.section { padding-block: var(--spacing-8); }
+.section-lg { padding-block: var(--spacing-12); }
 
 /* Responsive helpers */
 @media (max-width: 767px) {
@@ -3267,27 +3033,9 @@ button, a {
 }
 
 /* Backdrop variants */
-.backdrop-light {
-  --backdrop-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
-  --backdrop-brightness: 1.1;
-}
-
-.backdrop-dark {
-  --backdrop-bg: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
-  --backdrop-brightness: 0.6;
-}
-
-.backdrop-blur-sm {
-  --backdrop-blur: 5px;
-}
-
-.backdrop-blur-md {
-  --backdrop-blur: 10px;
-}
-
-.backdrop-blur-lg {
-  --backdrop-blur: 20px;
-}
+.backdrop-light { --backdrop-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2)); --backdrop-brightness: 1.1; }
+.backdrop-dark { --backdrop-bg: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)); --backdrop-brightness: 0.6; }
+.backdrop-blur-sm { --backdrop-blur: 5px; } .backdrop-blur-md { --backdrop-blur: 10px; } .backdrop-blur-lg { --backdrop-blur: 20px; }
 
 
 /* Optional utilities/features controlled by config options */
@@ -3532,22 +3280,101 @@ html[data-theme="dark"] .liquid-glass {
 }
 
 
-/* Inverse surface (dark) using PDS tokens; text/icons inherit currentColor */
+/* 
+ * SURFACE-INVERSE: Local Theme Context Flip
+ * 
+ * We can't simply add .surface-inverse to the dark mode selector because that would
+ * also apply the dark color PALETTE (grays, surfaces, etc.), which would override
+ * --color-surface-inverse itself. Instead, we duplicate only the SEMANTIC tokens.
+ * 
+ * Light theme .surface-inverse → dark semantic tokens
+ * Dark theme .surface-inverse  → light semantic tokens (flip back)
+ */
+
+/* Surface-inverse visual properties (shared, uses smart surface tokens) */
 .surface-inverse {
   background-color: var(--color-surface-inverse);
-  /* Ensure foregrounds inside use the correct smart-surface tokens */
   color: var(--surface-inverse-text);
-  --color-text-primary: var(--surface-inverse-text);
-  --color-text-secondary: var(--surface-inverse-text-secondary);
-  --color-text-muted: var(--surface-inverse-text-muted);
-  /* Ensure code/pre and other muted surfaces have contrast on inverse */
-  --color-surface-muted: rgba(255, 255, 255, 0.08);
-  /* Optional: adjust borders/shadows if utilities/components read these */
-  --color-border: var(--surface-inverse-border);
 
   pds-icon {
     color: var(--surface-inverse-icon);
   }
+  
+  /* btn-primary stays vibrant in any context */
+  & .btn-primary {
+    background-color: var(--color-primary-500);
+    border-color: var(--color-primary-500);
+    color: var(--color-primary-contrast, #ffffff);
+    
+    &:hover {
+      background-color: var(--color-primary-400);
+      border-color: var(--color-primary-400);
+    }
+  }
+}
+
+/* Light-mode inverse: apply dark semantic tokens */
+html:not([data-theme="dark"]) .surface-inverse {
+  --color-text-primary: var(--color-gray-100);
+  --color-text-secondary: var(--color-gray-300);
+  --color-text-muted: var(--color-gray-400);
+  --color-border: var(--color-gray-700);
+  --color-input-bg: var(--color-gray-800);
+  --color-input-disabled-bg: var(--color-gray-900);
+  --color-input-disabled-text: var(--color-gray-600);
+  --color-code-bg: var(--color-gray-800);
+  --color-surface-muted: rgba(255, 255, 255, 0.08);
+  
+  & button:not(.btn-primary):not(.btn-outline):not(.btn-danger):not(.btn-success):not(.btn-warning),
+  & .btn-secondary {
+    background-color: rgba(255, 255, 255, 0.12);
+    color: var(--surface-inverse-text);
+    border-color: rgba(255, 255, 255, 0.25);
+    
+    &:hover { background-color: rgba(255, 255, 255, 0.2); }
+    &:active { background-color: rgba(255, 255, 255, 0.28); }
+  }
+  
+  & select {
+    background-color: rgba(255, 255, 255, 0.1);
+    color: var(--surface-inverse-text);
+  }
+  
+  & a:not([class*="btn"]) {
+    color: var(--color-primary-300, #7dd3fc);
+  }
+}
+
+/* Dark-mode inverse: flip back to light semantic tokens */
+html[data-theme="dark"] .surface-inverse {
+  --color-text-primary: var(--color-gray-900);
+  --color-text-secondary: var(--color-gray-600);
+  --color-text-muted: var(--color-gray-600);
+  --color-border: var(--color-gray-300);
+  --color-input-bg: var(--color-surface-base);
+  --color-input-disabled-bg: var(--color-gray-50);
+  --color-input-disabled-text: var(--color-gray-500);
+  --color-code-bg: var(--color-gray-100);
+  --color-surface-muted: var(--color-gray-100);
+  
+  & button:not(.btn-primary):not(.btn-outline):not(.btn-danger):not(.btn-success):not(.btn-warning),
+  & .btn-secondary {
+    background-color: rgba(0, 0, 0, 0.06);
+    color: var(--surface-inverse-text);
+    border-color: rgba(0, 0, 0, 0.15);
+    
+    &:hover { background-color: rgba(0, 0, 0, 0.1); }
+    &:active { background-color: rgba(0, 0, 0, 0.15); }
+  }
+  
+  & select {
+    background-color: #ffffff;
+    color: var(--surface-inverse-text);
+  }
+  
+  & a:not([class*="btn"]) {
+    color: var(--color-primary-600, #0284c7);
+  }
 }
 
 /* Shadow utilities */
@@ -3596,11 +3423,7 @@ html[data-theme="dark"] .liquid-glass {
 }
 
 /* Responsive images with different radius sizes */
-.img-rounded-sm { border-radius: var(--radius-sm); }
-.img-rounded-md { border-radius: var(--radius-md); }
-.img-rounded-lg { border-radius: var(--radius-lg); }
-.img-rounded-xl { border-radius: var(--radius-xl); }
-.img-rounded-full { border-radius: var(--radius-full); }
+.img-rounded-sm { border-radius: var(--radius-sm); } .img-rounded-md { border-radius: var(--radius-md); } .img-rounded-lg { border-radius: var(--radius-lg); } .img-rounded-xl { border-radius: var(--radius-xl); } .img-rounded-full { border-radius: var(--radius-full); }
 
 /* Inline images */
 .img-inline {
@@ -3632,37 +3455,17 @@ html[data-theme="dark"] .liquid-glass {
 
 /* Small devices (640px and up) */
 @media (min-width: 640px) {
-  .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
-  .sm\:flex-row { flex-direction: row; }
-  .sm\:text-sm { font-size: var(--font-size-sm); }
-  .sm\:p-6 { padding: var(--spacing-6); }
-  .sm\:gap-6 { gap: var(--spacing-6); }
-  .sm\:hidden { display: none; }
-  .sm\:block { display: block; }
+  .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); } .sm\:flex-row { flex-direction: row; } .sm\:text-sm { font-size: var(--font-size-sm); } .sm\:p-6 { padding: var(--spacing-6); } .sm\:gap-6 { gap: var(--spacing-6); } .sm\:hidden { display: none; } .sm\:block { display: block; }
 }
 
 /* Medium devices (768px and up) */
 @media (min-width: 768px) {
-  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
-  .md\:text-lg { font-size: var(--font-size-lg); }
-  .md\:p-8 { padding: var(--spacing-8); }
-  .md\:gap-8 { gap: var(--spacing-8); }
-  .md\:flex-row { flex-direction: row; }
-  .md\:w-1\/2 { width: 50%; }
-  .md\:w-1\/3 { width: 33.333333%; }
-  .md\:hidden { display: none; }
-  .md\:block { display: block; }
+  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); } .md\:text-lg { font-size: var(--font-size-lg); } .md\:p-8 { padding: var(--spacing-8); } .md\:gap-8 { gap: var(--spacing-8); } .md\:flex-row { flex-direction: row; } .md\:w-1\/2 { width: 50%; } .md\:w-1\/3 { width: 33.333333%; } .md\:hidden { display: none; } .md\:block { display: block; }
 }
 
 /* Large devices (1024px and up) */
 @media (min-width: 1024px) {
-  .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
-  .lg\:text-xl { font-size: var(--font-size-xl); }
-  .lg\:p-12 { padding: var(--spacing-12); }
-  .lg\:gap-12 { gap: var(--spacing-12); }
-  .lg\:w-1\/4 { width: 25%; }
-  .lg\:hidden { display: none; }
-  .lg\:block { display: block; }
+  .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); } .lg\:text-xl { font-size: var(--font-size-xl); } .lg\:p-12 { padding: var(--spacing-12); } .lg\:gap-12 { gap: var(--spacing-12); } .lg\:w-1\/4 { width: 25%; } .lg\:hidden { display: none; } .lg\:block { display: block; }
 }
 
 /* Touch device optimizations */