ui-style-kit-css 2.2.0 → 2.4.0

package/styles/brutalism.css

@@ -1,7 +1,7 @@
 /* =========================================================
    Brutalism Theme System
    Includes:
-   - 10 color schemes
+   - 20 color schemes
    - light / dark / contrast modes
    - themed UI components and utilities
 
@@ -47,6 +47,29 @@
 
 [data-ui="brutalism"][data-mode="light"] {
   color-scheme: light;
+  --brutal-fallback-bg-rgb: 245 247 250;
+  --brutal-fallback-surface-rgb: 255 255 255;
+  --brutal-fallback-surface-strong-rgb: 252 252 253;
+  --brutal-fallback-surface-soft-rgb: 232 235 240;
+  --brutal-fallback-text-rgb: 17 36 59;
+  --brutal-fallback-text-muted-rgb: 90 104 119;
+  --brutal-fallback-border-rgb: 200 207 217;
+  --brutal-fallback-primary-rgb: 13 59 102;
+  --brutal-fallback-primary-hover-rgb: 11 49 85;
+  --brutal-fallback-primary-text-rgb: 255 255 255;
+  --brutal-fallback-secondary-rgb: 214 43 43;
+  --brutal-fallback-secondary-hover-rgb: 178 35 35;
+  --brutal-fallback-secondary-text-rgb: 255 255 255;
+  --brutal-fallback-accent-rgb: 233 90 90;
+  --brutal-fallback-accent-text-rgb: 0 0 0;
+  --brutal-fallback-success-rgb: 47 125 84;
+  --brutal-fallback-success-text-rgb: 255 255 255;
+  --brutal-fallback-warning-rgb: 164 106 0;
+  --brutal-fallback-warning-text-rgb: 0 0 0;
+  --brutal-fallback-danger-rgb: 198 40 40;
+  --brutal-fallback-danger-text-rgb: 255 255 255;
+  --brutal-fallback-link-rgb: 11 49 85;
+  --brutal-fallback-focus-rgb: 214 43 43;
   --brutal-panel-alpha: 0.92;
   --brutal-panel-strong-alpha: 0.98;
   --brutal-panel-soft-alpha: 0.74;
@@ -58,6 +81,29 @@
 
 [data-ui="brutalism"][data-mode="dark"] {
   color-scheme: dark;
+  --brutal-fallback-bg-rgb: 8 17 28;
+  --brutal-fallback-surface-rgb: 16 32 48;
+  --brutal-fallback-surface-strong-rgb: 24 49 73;
+  --brutal-fallback-surface-soft-rgb: 11 23 36;
+  --brutal-fallback-text-rgb: 243 247 251;
+  --brutal-fallback-text-muted-rgb: 188 200 213;
+  --brutal-fallback-border-rgb: 71 96 121;
+  --brutal-fallback-primary-rgb: 108 169 227;
+  --brutal-fallback-primary-hover-rgb: 147 193 237;
+  --brutal-fallback-primary-text-rgb: 0 0 0;
+  --brutal-fallback-secondary-rgb: 255 106 106;
+  --brutal-fallback-secondary-hover-rgb: 255 146 146;
+  --brutal-fallback-secondary-text-rgb: 0 0 0;
+  --brutal-fallback-accent-rgb: 255 154 154;
+  --brutal-fallback-accent-text-rgb: 0 0 0;
+  --brutal-fallback-success-rgb: 143 223 182;
+  --brutal-fallback-success-text-rgb: 0 0 0;
+  --brutal-fallback-warning-rgb: 255 210 122;
+  --brutal-fallback-warning-text-rgb: 0 0 0;
+  --brutal-fallback-danger-rgb: 255 143 143;
+  --brutal-fallback-danger-text-rgb: 0 0 0;
+  --brutal-fallback-link-rgb: 165 203 241;
+  --brutal-fallback-focus-rgb: 255 106 106;
   --brutal-panel-alpha: 0.82;
   --brutal-panel-strong-alpha: 0.94;
   --brutal-panel-soft-alpha: 0.58;
@@ -69,6 +115,29 @@
 
 [data-ui="brutalism"][data-mode="contrast"] {
   color-scheme: dark;
+  --brutal-fallback-bg-rgb: 0 0 0;
+  --brutal-fallback-surface-rgb: 6 16 26;
+  --brutal-fallback-surface-strong-rgb: 10 29 48;
+  --brutal-fallback-surface-soft-rgb: 0 0 0;
+  --brutal-fallback-text-rgb: 255 255 255;
+  --brutal-fallback-text-muted-rgb: 238 244 255;
+  --brutal-fallback-border-rgb: 255 255 255;
+  --brutal-fallback-primary-rgb: 102 181 255;
+  --brutal-fallback-primary-hover-rgb: 255 255 255;
+  --brutal-fallback-primary-text-rgb: 0 0 0;
+  --brutal-fallback-secondary-rgb: 255 102 102;
+  --brutal-fallback-secondary-hover-rgb: 255 255 255;
+  --brutal-fallback-secondary-text-rgb: 0 0 0;
+  --brutal-fallback-accent-rgb: 255 170 170;
+  --brutal-fallback-accent-text-rgb: 0 0 0;
+  --brutal-fallback-success-rgb: 0 255 144;
+  --brutal-fallback-success-text-rgb: 0 0 0;
+  --brutal-fallback-warning-rgb: 255 212 0;
+  --brutal-fallback-warning-text-rgb: 0 0 0;
+  --brutal-fallback-danger-rgb: 255 92 92;
+  --brutal-fallback-danger-text-rgb: 0 0 0;
+  --brutal-fallback-link-rgb: 140 198 255;
+  --brutal-fallback-focus-rgb: 255 255 255;
   --brutal-panel-alpha: 1;
   --brutal-panel-strong-alpha: 1;
   --brutal-panel-soft-alpha: 0.92;
@@ -78,8 +147,8 @@
   --brutal-grid-alpha: 0.18;
 }
 
+/** Preserves direct aliases for static extraction when a scheme is selected. */
 [data-ui="brutalism"][data-theme][data-mode] {
-  /* Shared scheme aliases preserve the existing prefixed token API. */
   --brutal-bg-rgb: var(--usk-bg-rgb);
   --brutal-surface-rgb: var(--usk-surface-rgb);
   --brutal-surface-strong-rgb: var(--usk-surface-strong-rgb);
@@ -94,15 +163,43 @@
   --brutal-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
   --brutal-secondary-text-rgb: var(--usk-secondary-text-rgb);
   --brutal-accent-rgb: var(--usk-accent-rgb);
-  --brutal-success-rgb: var(--usk-success-rgb);
-  --brutal-warning-rgb: var(--usk-warning-rgb);
-  --brutal-danger-rgb: var(--usk-danger-rgb);
-  --brutal-link-rgb: var(--usk-link-rgb);
   --brutal-accent-text-rgb: var(--usk-accent-text-rgb);
+  --brutal-success-rgb: var(--usk-success-rgb);
   --brutal-success-text-rgb: var(--usk-success-text-rgb);
+  --brutal-warning-rgb: var(--usk-warning-rgb);
   --brutal-warning-text-rgb: var(--usk-warning-text-rgb);
+  --brutal-danger-rgb: var(--usk-danger-rgb);
   --brutal-danger-text-rgb: var(--usk-danger-text-rgb);
+  --brutal-link-rgb: var(--usk-link-rgb);
   --brutal-focus-rgb: var(--usk-focus-rgb);
+}
+
+[data-ui="brutalism"][data-mode] {
+  --usk-native-bg: var(--brutal-bg);
+  /* Explicit schemes win; reference colors are used only when no scheme exists. */
+  --brutal-bg-rgb: var(--usk-bg-rgb, var(--brutal-fallback-bg-rgb));
+  --brutal-surface-rgb: var(--usk-surface-rgb, var(--brutal-fallback-surface-rgb));
+  --brutal-surface-strong-rgb: var(--usk-surface-strong-rgb, var(--brutal-fallback-surface-strong-rgb));
+  --brutal-surface-soft-rgb: var(--usk-surface-soft-rgb, var(--brutal-fallback-surface-soft-rgb));
+  --brutal-text-rgb: var(--usk-text-rgb, var(--brutal-fallback-text-rgb));
+  --brutal-text-muted-rgb: var(--usk-text-muted-rgb, var(--brutal-fallback-text-muted-rgb));
+  --brutal-border-rgb: var(--usk-border-rgb, var(--brutal-fallback-border-rgb));
+  --brutal-primary-rgb: var(--usk-primary-rgb, var(--brutal-fallback-primary-rgb));
+  --brutal-primary-hover-rgb: var(--usk-primary-hover-rgb, var(--brutal-fallback-primary-hover-rgb));
+  --brutal-primary-text-rgb: var(--usk-primary-text-rgb, var(--brutal-fallback-primary-text-rgb));
+  --brutal-secondary-rgb: var(--usk-secondary-rgb, var(--brutal-fallback-secondary-rgb));
+  --brutal-secondary-hover-rgb: var(--usk-secondary-hover-rgb, var(--brutal-fallback-secondary-hover-rgb));
+  --brutal-secondary-text-rgb: var(--usk-secondary-text-rgb, var(--brutal-fallback-secondary-text-rgb));
+  --brutal-accent-rgb: var(--usk-accent-rgb, var(--brutal-fallback-accent-rgb));
+  --brutal-accent-text-rgb: var(--usk-accent-text-rgb, var(--brutal-fallback-accent-text-rgb));
+  --brutal-success-rgb: var(--usk-success-rgb, var(--brutal-fallback-success-rgb));
+  --brutal-success-text-rgb: var(--usk-success-text-rgb, var(--brutal-fallback-success-text-rgb));
+  --brutal-warning-rgb: var(--usk-warning-rgb, var(--brutal-fallback-warning-rgb));
+  --brutal-warning-text-rgb: var(--usk-warning-text-rgb, var(--brutal-fallback-warning-text-rgb));
+  --brutal-danger-rgb: var(--usk-danger-rgb, var(--brutal-fallback-danger-rgb));
+  --brutal-danger-text-rgb: var(--usk-danger-text-rgb, var(--brutal-fallback-danger-text-rgb));
+  --brutal-link-rgb: var(--usk-link-rgb, var(--brutal-fallback-link-rgb));
+  --brutal-focus-rgb: var(--usk-focus-rgb, var(--brutal-fallback-focus-rgb));
   /* Native fallback selectors inherit visual identity through shared tokens. */
   --usk-native-surface: var(--brutal-surface);
   --usk-native-surface-strong: var(--brutal-surface-strong);
@@ -133,6 +230,57 @@
   --usk-native-border-width: 1px;
   --usk-native-field-gap: .5rem;
   --usk-native-panel-padding: var(--brutal-space-5);
+  --usk-native-control-min-block-size: 3rem;
+  --usk-native-control-padding-block: .74rem;
+  --usk-native-control-padding-inline: 1rem;
+  --usk-native-subcontrol-padding-block: .58rem;
+  --usk-native-subcontrol-padding-inline: .8rem;
+  --usk-native-choice-size: 1.55rem;
+  --usk-native-choice-background: var(--brutal-control-bg);
+  --usk-native-choice-border: 2px solid var(--brutal-border);
+  --usk-native-checkbox-radius: 0;
+  --usk-native-radio-radius: 0;
+  --usk-native-choice-shadow: 4px 4px 0 var(--brutal-border);
+  --usk-native-choice-checked-background: var(--brutal-primary);
+  --usk-native-choice-mark-color: var(--brutal-on-primary);
+  --usk-native-select-indicator-image: linear-gradient(48deg, transparent 50%, var(--brutal-primary) 50%), linear-gradient(132deg, var(--brutal-primary) 50%, transparent 50%);
+  --usk-native-select-indicator-size: 0.42000000000000004rem 0.42000000000000004rem, 0.42000000000000004rem 0.42000000000000004rem;
+  --usk-native-select-indicator-position: calc(100% - 1.24rem) 50%, calc(100% - 0.8999999999999999rem) 50%;
+  --usk-native-select-padding-inline-end: 2.7rem;
+  --usk-native-range-track-size: .8rem;
+  --usk-native-range-track-background: var(--brutal-surface-soft);
+  --usk-native-range-track-border: 2px solid var(--brutal-border);
+  --usk-native-range-track-radius: 0;
+  --usk-native-range-track-shadow: 4px 4px 0 var(--brutal-border);
+  --usk-native-range-progress-background: var(--brutal-primary);
+  --usk-native-range-thumb-size: 1.45rem;
+  --usk-native-range-thumb-background: var(--brutal-surface-strong);
+  --usk-native-range-thumb-border: 2px solid var(--brutal-border);
+  --usk-native-range-thumb-radius: 0;
+  --usk-native-range-thumb-shadow: 4px 4px 0 var(--brutal-border);
+  --usk-native-progress-size: .95rem;
+  --usk-native-progress-track-background: var(--brutal-surface-soft);
+  --usk-native-progress-track-border: 2px solid var(--brutal-border);
+  --usk-native-progress-track-radius: 0;
+  --usk-native-progress-track-shadow: 4px 4px 0 var(--brutal-border);
+  --usk-native-progress-value-background: var(--brutal-primary);
+  --usk-native-progress-value-radius: 0;
+  --usk-native-progress-value-shadow: 4px 4px 0 var(--brutal-border);
+  --usk-native-meter-optimum-background: var(--brutal-success);
+  --usk-native-meter-suboptimum-background: var(--brutal-warning);
+  --usk-native-meter-critical-background: var(--brutal-danger);
+  --usk-native-file-button-background: var(--brutal-primary);
+  --usk-native-file-button-border: 2px solid var(--brutal-border);
+  --usk-native-file-button-radius: 0;
+  --usk-native-file-button-shadow: 4px 4px 0 var(--brutal-border);
+  --usk-native-color-swatch-border: 2px solid var(--brutal-border);
+  --usk-native-color-swatch-radius: 0;
+  --usk-native-indicator-opacity: 0.82;
+  --usk-native-indicator-filter: none;
+  --usk-native-scrollbar-size: 1rem;
+  --usk-native-scrollbar-track: var(--brutal-surface-soft);
+  --usk-native-scrollbar-thumb: var(--brutal-primary);
+  --usk-native-scrollbar-radius: 0;
   --usk-native-border-width: 3px;
   --usk-native-radius-sm: var(--brutal-radius-xs);
   --usk-native-radius: var(--brutal-radius-sm);
@@ -146,7 +294,7 @@
   --brutal-fg: var(--brutal-text);
   --brutal-surface-fg: var(--brutal-text);
   --brutal-muted: var(--brutal-text-muted);
-  --brutal-border: rgb(var(--brutal-border-rgb) / var(--brutal-border-alpha));
+  --brutal-border: rgb(var(--brutal-border-rgb) / max(var(--brutal-border-alpha), var(--usk-border-min-alpha)));
   --brutal-control-fg: var(--brutal-text);
   --brutal-primary: rgb(var(--brutal-primary-rgb));
   --brutal-primary-hover: rgb(var(--brutal-primary-hover-rgb));
@@ -181,6 +329,10 @@
   --brutal-spinner-accent: var(--brutal-accent);
 }
 
+@supports (color: color-mix(in srgb, black, white)) {
+  [data-ui="brutalism"][data-mode] { --brutal-border: color-mix(in srgb, rgb(var(--brutal-border-rgb) / max(var(--brutal-border-alpha), var(--usk-border-min-alpha))), var(--brutal-text) var(--usk-border-text-mix)); }
+}
+
 /* =========================================================
    1. Midnight Gold
 ========================================================= */
@@ -270,7 +422,7 @@
 [data-ui="brutalism"] *::before,
 [data-ui="brutalism"] *::after { box-sizing: border-box; }
 
-[data-ui="brutalism"][data-theme][data-mode] { background: var(--brutal-theme-bg); background-size: var(--brutal-theme-bg-size); }
+[data-ui="brutalism"][data-mode] { background: var(--brutal-theme-bg); background-size: var(--brutal-theme-bg-size); }
 
 [data-ui="brutalism"] a { color: var(--brutal-link); text-decoration-thickness: 0.14em; text-underline-offset: 0.16em; font-weight: 800; }
 [data-ui="brutalism"] ::selection { background: var(--brutal-primary); color: var(--brutal-on-primary); }
@@ -364,7 +516,7 @@
 /* Theme-responsive component defaults */
 .brutal-card, .brutal-panel { background: var(--brutal-card-bg); }
 .brutal-toolbar, .brutal-table-wrap { background: var(--brutal-control-bg); }
-.brutal-button:not(.brutal-button-primary):not(.brutal-button-secondary):not(.brutal-button-danger):not(.brutal-button-ghost), .brutal-icon-button { background: var(--brutal-control-bg); }
+.brutal-button:not(.brutal-button-primary):not(.brutal-button-secondary):not(.brutal-button-danger):not(.brutal-button-warning):not(.brutal-button-ghost), .brutal-icon-button { background: var(--brutal-control-bg); }
 .brutal-button, .brutal-icon-button, .brutal-badge, .brutal-nav-link { font-family: var(--brutal-font-control); }
 
 
@@ -410,6 +562,312 @@
 [data-ui="brutalism"] :focus-visible { outline: 4px solid var(--brutal-focus); outline-offset: 3px; }
 @media (prefers-reduced-motion: reduce) { [data-ui="brutalism"] *, [data-ui="brutalism"] *::before, [data-ui="brutalism"] *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }
 
+
+/* =========================================================
+   Marketing / Commercial Component Modifiers
+   Reusable visual patterns derived from service-oriented brand systems.
+========================================================= */
+
+.brutal-card-media {
+  display: block;
+  inline-size: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+  border: 1px solid rgb(var(--brutal-border-rgb) / .72);
+  border-radius: var(--brutal-radius-lg);
+}
+
+.brutal-card-service {
+  position: relative;
+  display: grid;
+  gap: var(--brutal-space-3);
+  align-content: start;
+  text-align: center;
+  overflow: visible;
+}
+.brutal-card-service > .brutal-icon-medallion {
+  justify-self: center;
+  margin-block-start: -2.15rem;
+  position: relative;
+  z-index: 2;
+}
+.brutal-card-service > .brutal-card-media + .brutal-icon-medallion { margin-block-start: -2.15rem; }
+
+.brutal-card-feature {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--brutal-space-4);
+  align-items: start;
+}
+
+.brutal-card-accent-edge {
+  border-inline-start: .35rem solid var(--brutal-primary);
+}
+
+.brutal-icon-medallion {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 3.75rem;
+  block-size: 3.75rem;
+  flex: 0 0 auto;
+  padding: .7rem;
+  background: var(--brutal-primary);
+  color: var(--brutal-on-primary);
+  border: 2px solid rgb(var(--brutal-border-rgb) / .82);
+  border-radius: 50%;
+  line-height: 1;
+}
+.brutal-icon-medallion > :where(svg, img) { inline-size: 100%; block-size: 100%; object-fit: contain; }
+
+.brutal-button.brutal-button-cut,
+.brutal-button-cut {
+  border-radius: 0;
+  clip-path: polygon(.6rem 0, 100% 0, 100% calc(100% - .6rem), calc(100% - .6rem) 100%, 0 100%, 0 .6rem);
+}
+.brutal-button.brutal-button-cut:focus-visible,
+.brutal-button-cut:focus-visible { outline-offset: -3px; }
+
+.brutal-button.brutal-button-outline-heavy,
+.brutal-button-outline-heavy {
+  background: transparent;
+  color: var(--brutal-primary);
+  border-style: solid;
+  border-width: 2px;
+  border-color: var(--brutal-primary);
+  box-shadow: none;
+}
+.brutal-button.brutal-button-outline-heavy:hover,
+.brutal-button-outline-heavy:hover {
+  background: var(--brutal-primary);
+  color: var(--brutal-on-primary);
+  border-color: var(--brutal-primary-hover);
+}
+
+.brutal-badge-seal {
+  display: inline-grid;
+  place-items: center;
+  align-content: center;
+  inline-size: 5rem;
+  min-inline-size: 5rem;
+  aspect-ratio: 1;
+  padding: .65rem;
+  background: var(--brutal-surface-strong);
+  color: var(--brutal-text);
+  border: 2px solid var(--brutal-primary);
+  border-radius: 50%;
+  text-align: center;
+  font-family: var(--brutal-font-heading);
+  font-size: .72rem;
+  font-weight: 900;
+  line-height: 1.05;
+  letter-spacing: .04em;
+}
+
+.brutal-feature-strip {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
+  background: var(--brutal-card-bg);
+  color: var(--brutal-text);
+  border: 1px solid var(--brutal-border);
+  border-radius: var(--brutal-radius-lg);
+}
+
+.brutal-feature-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: var(--brutal-space-3);
+  min-inline-size: 0;
+  padding: var(--brutal-space-4);
+  border-inline-end: 1px solid rgb(var(--brutal-border-rgb) / .62);
+}
+.brutal-feature-item:last-child { border-inline-end: 0; }
+.brutal-feature-item > :where(p, small) { margin: 0; color: var(--brutal-text-muted); }
+
+.brutal-callout-bar {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--brutal-space-4);
+  padding: var(--brutal-space-4) var(--brutal-space-5);
+  background: var(--brutal-card-bg);
+  color: var(--brutal-text);
+  border: 1px solid var(--brutal-border);
+  border-radius: var(--brutal-radius-lg);
+}
+.brutal-callout-bar > :where(p, div) { min-inline-size: 0; }
+.brutal-callout-bar > :where(.brutal-button, a, button):last-child { justify-self: end; }
+
+.brutal-eyebrow {
+  margin: 0;
+  color: var(--brutal-primary);
+  font-family: var(--brutal-font-heading);
+  font-size: .76rem;
+  font-weight: 900;
+  line-height: 1.2;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+}
+
+.brutal-media-scrim {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+  min-block-size: 12rem;
+  background: var(--brutal-surface-soft);
+  border: 1px solid var(--brutal-border);
+  border-radius: var(--brutal-radius-lg);
+}
+.brutal-media-scrim > :where(img, picture, video) {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  min-block-size: inherit;
+  object-fit: cover;
+}
+.brutal-media-scrim > :where(figcaption, [data-media-caption]) {
+  position: absolute;
+  z-index: 1;
+  inset-inline: 0;
+  inset-block-end: 0;
+  padding: clamp(1rem, 4vw, 2rem);
+  color: #fff;
+  background: linear-gradient(to top, rgb(0 0 0 / .9), rgb(0 0 0 / .58) 56%, transparent);
+}
+.brutal-media-scrim > :where(figcaption, [data-media-caption]) * {
+  color: inherit;
+}
+
+@media (max-width: 42rem) {
+  .brutal-callout-bar { grid-template-columns: 1fr; align-items: start; }
+  .brutal-callout-bar > :where(.brutal-button, a, button):last-child { justify-self: stretch; }
+  .brutal-feature-item { border-inline-end: 0; border-block-end: 1px solid rgb(var(--brutal-border-rgb) / .62); }
+  .brutal-feature-item:last-child { border-block-end: 0; }
+}
+
+.brutal-card-service, .brutal-card-feature, .brutal-feature-strip, .brutal-callout-bar, .brutal-media-scrim { border-radius: 0; border: 3px solid var(--brutal-text); box-shadow: .45rem .45rem 0 var(--brutal-primary); }
+.brutal-icon-medallion, .brutal-badge-seal { border-radius: 0; border: 3px solid var(--brutal-text); box-shadow: .3rem .3rem 0 var(--brutal-secondary); }
+.brutal-card-accent-edge { border-inline-start: .6rem solid var(--brutal-primary); }
+.brutal-button-outline-heavy { border-width: 3px; box-shadow: .22rem .22rem 0 var(--brutal-text); }
+.brutal-button-cut { clip-path: polygon(.5rem 0, 100% 0, 100% calc(100% - .5rem), calc(100% - .5rem) 100%, 0 100%, 0 .5rem); }
+
+/* Filled and framed actions keep blunt cuts, heavy borders, and hard displacement. */
+.brutal-button.brutal-button-cut, .brutal-button-cut {
+  inline-size: min(100%, 14rem);
+  min-block-size: 2.75rem;
+  min-inline-size: 6rem;
+  max-inline-size: 100%;
+  justify-self: start;
+  justify-content: center;
+  clip-path: polygon(.52rem 0, 100% 0, 100% calc(100% - .52rem), calc(100% - .52rem) 100%, 0 100%, 0 .52rem);
+}
+.brutal-button.brutal-button-outline-heavy, .brutal-button-outline-heavy {
+  border-width: 3px;
+  border-radius: 0;
+  clip-path: polygon(0 0, calc(100% - .52rem) 0, 100% .52rem, 100% 100%, .52rem 100%, 0 calc(100% - .52rem));
+  box-shadow: .28rem .28rem 0 var(--brutal-text);
+}
+
+/* Marketing and native surfaces repeat the blunt border and hard displacement. */
+.brutal-card-service, .brutal-media-scrim, .brutal-feature-strip, .brutal-callout-bar, .brutal-well {
+  border: 3px solid var(--brutal-text);
+  border-radius: 0;
+  box-shadow: .38rem .38rem 0 var(--brutal-text);
+}
+[data-ui="brutalism"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
+  border: 3px solid var(--brutal-text);
+  border-radius: 0;
+  box-shadow: .26rem .26rem 0 var(--brutal-text);
+}
+[data-ui="brutalism"][data-mode] :where(dialog) {
+  border: 3px solid var(--brutal-text);
+  border-radius: 0;
+  box-shadow: .48rem .48rem 0 var(--brutal-text);
+}
+
+/* Busy indicators use a blunt square and an unapologetic offset shadow. */
+.brutal-button[aria-busy="true"]::after, .brutal-icon-button[aria-busy="true"]::after, [data-ui="brutalism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
+  border: .18em solid currentColor; border-block-start-color: transparent; border-radius: 0; background: transparent; box-shadow: .12em .12em 0 currentColor; clip-path: inset(0); animation: brutal-spin .64s steps(4, end) infinite;
+}
+
+/**
+ * Reasserts Brutalism as a dense control surface of numbered, full-bleed
+ * modules, blunt controls, and mechanical segmented instrumentation.
+ */
+[data-ui="brutalism"][data-mode] {
+  --usk-native-font-control: var(--brutal-font-mono);
+  --usk-native-control-min-block-size: 2.7rem;
+  --usk-native-control-padding-block: .5rem;
+  --usk-native-control-padding-inline: .72rem;
+  --usk-native-border-width: 4px;
+  --usk-native-radius-sm: 0;
+  --usk-native-radius: 0;
+  --usk-native-radius-lg: 0;
+  --usk-native-shadow: .32rem .32rem 0 var(--brutal-text);
+  --usk-native-shadow-md: .48rem .48rem 0 var(--brutal-primary);
+  --usk-native-focus-ring: 0 0 0 2px var(--brutal-surface-strong), 0 0 0 6px var(--brutal-warning);
+  --usk-native-subcontrol-padding-block: .34rem;
+  --usk-native-subcontrol-padding-inline: .52rem;
+  --usk-native-choice-size: 1.18rem;
+  --usk-native-choice-background: var(--brutal-surface-strong);
+  --usk-native-choice-border: 3px solid var(--brutal-text);
+  --usk-native-checkbox-radius: 0;
+  --usk-native-radio-radius: 0;
+  --usk-native-choice-shadow: .12rem .12rem 0 var(--brutal-primary);
+  --usk-native-choice-checked-background: var(--brutal-primary);
+  --usk-native-choice-mark-color: var(--brutal-on-primary);
+  --usk-native-select-indicator-image: linear-gradient(45deg, transparent 38%, var(--brutal-warning) 39% 61%, transparent 62%), linear-gradient(135deg, var(--brutal-warning) 0 50%, transparent 51%);
+  --usk-native-select-indicator-size: .7rem .7rem, .7rem .7rem;
+  --usk-native-select-indicator-position: calc(100% - 1.38rem) 50%, calc(100% - .92rem) 50%;
+  --usk-native-select-padding-inline-end: 2.85rem;
+  --usk-native-range-track-size: .92rem;
+  --usk-native-range-track-background: repeating-linear-gradient(90deg, var(--brutal-surface-soft) 0 1.05rem, var(--brutal-text) 1.05rem calc(1.05rem + 3px));
+  --usk-native-range-track-border: 3px solid var(--brutal-text);
+  --usk-native-range-track-radius: 0;
+  --usk-native-range-track-shadow: inset 0 0 0 2px var(--brutal-surface-strong);
+  --usk-native-range-progress-background: repeating-linear-gradient(90deg, var(--brutal-primary) 0 .9rem, var(--brutal-warning) .9rem 1.05rem);
+  --usk-native-range-thumb-size: 1.24rem;
+  --usk-native-range-thumb-background: var(--brutal-text);
+  --usk-native-range-thumb-border: 3px solid var(--brutal-warning);
+  --usk-native-range-thumb-radius: 0;
+  --usk-native-range-thumb-shadow: .14rem .14rem 0 var(--brutal-primary);
+  --usk-native-progress-size: 1.22rem;
+  --usk-native-progress-track-background: repeating-linear-gradient(90deg, var(--brutal-surface-strong) 0 1rem, var(--brutal-text) 1rem calc(1rem + 3px));
+  --usk-native-progress-track-border: 3px solid var(--brutal-text);
+  --usk-native-progress-track-radius: 0;
+  --usk-native-progress-track-shadow: inset 0 0 0 2px var(--brutal-surface-soft);
+  --usk-native-progress-value-background: repeating-linear-gradient(90deg, var(--brutal-primary) 0 .82rem, var(--brutal-warning) .82rem 1rem);
+  --usk-native-progress-value-radius: 0;
+  --usk-native-progress-value-shadow: inset -3px 0 0 var(--brutal-text);
+  --usk-native-scrollbar-size: 1.25rem;
+  --usk-native-scrollbar-track: repeating-linear-gradient(0deg, var(--brutal-surface-soft) 0 .7rem, var(--brutal-text) .7rem calc(.7rem + 2px));
+  --usk-native-scrollbar-thumb: var(--brutal-primary);
+  --usk-native-scrollbar-radius: 0;
+}
+
+.brutal-title { margin-block: .75rem; font-weight: 1000; letter-spacing: max(.032em, .5px); }
+.brutal-label { font-size: .68rem; font-weight: 900; }
+.brutal-button { min-height: 2.7rem; padding: .5rem .72rem; background: var(--brutal-primary); border-radius: 0 .08rem 0 0; box-shadow: .32rem .32rem 0 var(--brutal-text); font-weight: 900; }
+.brutal-input { min-height: 2.55rem; padding: .46rem .64rem; border-radius: 0 0 .06rem 0; }
+.brutal-card { padding: .88rem; background: var(--brutal-card-bg); border: 4px solid var(--brutal-text); border-radius: 0; box-shadow: .42rem .42rem 0 var(--brutal-primary); }
+.brutal-well { background: repeating-linear-gradient(0deg, rgb(var(--brutal-text-rgb) / .08) 0 2px, transparent 2px .65rem), var(--brutal-surface-soft); border: 3px solid var(--brutal-text); box-shadow: inset .5rem 0 0 var(--brutal-warning); }
+.brutal-badge { min-height: 1.55rem; padding: .15rem .42rem; border-radius: 0; }
+.brutal-alert { background: var(--brutal-surface-strong); border: 4px solid var(--brutal-text); border-radius: 0; box-shadow: .28rem .28rem 0 var(--brutal-warning); }
+.brutal-progress { height: 1.22rem; background: repeating-linear-gradient(90deg, var(--brutal-surface-strong) 0 1rem, var(--brutal-text) 1rem calc(1rem + 3px)); }
+.brutal-table-wrap { background: var(--brutal-surface-strong); border-radius: 0; box-shadow: .32rem .32rem 0 var(--brutal-primary); }
+.brutal-table th { padding: .48rem .62rem; background: var(--brutal-text); font-weight: 950; }
+.brutal-table td { padding: .46rem .6rem; }
+
+.brutal-nav, .brutal-panel, .brutal-toolbar, .brutal-tooltip,
+[data-ui="brutalism"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]),
+.brutal-card-service, .brutal-feature-strip, .brutal-callout-bar {
+  border: 4px solid var(--brutal-text);
+  border-radius: 0;
+  box-shadow: .34rem .34rem 0 var(--brutal-primary);
+}
+.brutal-nav-link { border-inline-start: 3px solid var(--brutal-text); }
+.brutal-progress-bar { background: repeating-linear-gradient(90deg, var(--brutal-primary) 0 .82rem, var(--brutal-warning) .82rem 1rem); }
+
 @media (prefers-reduced-motion: reduce) {
   [data-ui="brutalism"] *, [data-ui="brutalism"] *::before, [data-ui="brutalism"] *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
 }
@@ -417,7 +875,7 @@
   [data-ui="brutalism"] { --brutal-border-alpha: 1; }
 }
 @media (forced-colors: active) {
-  [data-ui="brutalism"] * { forced-color-adjust: auto; }
+  @supports (forced-color-adjust: auto) { [data-ui="brutalism"] * { forced-color-adjust: auto; } }
   [data-ui="brutalism"] :where(:focus-visible) { outline: 3px solid CanvasText; box-shadow: none; }
 }
 @media print {
@@ -426,3 +884,28 @@
   [data-ui="brutalism"] a { color: #000 !important; text-decoration: underline; }
 }
 }
+
+@layer ui-style-kit.brutalism {
+/* Keeps semantic field states above preset-specific material paint. */
+.brutal-input[aria-invalid="true"], .brutal-textarea[aria-invalid="true"], .brutal-select[aria-invalid="true"] { border-color: var(--brutal-danger); box-shadow: 3px 3px 0 rgb(var(--brutal-danger-rgb) / .38); }
+.brutal-input[readonly], .brutal-textarea[readonly] { border-style: dashed; filter: saturate(.72); opacity: .78; }
+/* Restores semantic action paint after identity-specific geometry. */
+.brutal-button-primary { background: var(--brutal-primary); color: var(--brutal-on-primary); border-color: var(--brutal-primary); }
+.brutal-button-secondary { background: var(--brutal-secondary); color: var(--brutal-on-secondary); border-color: var(--brutal-secondary); }
+.brutal-button-danger { background: var(--brutal-danger); color: var(--brutal-on-danger); border-color: var(--brutal-danger); }
+.brutal-button-ghost { background: transparent; color: var(--brutal-primary); border-color: transparent; }
+}
+
+@layer ui-style-kit.brutalism {
+/* Shared annotation fidelity: readable display rhythm and appropriately scaled text icons. */
+.brutal-feature-item > .brutal-icon-medallion { font-size: 1.5rem; line-height: 1; }
+.brutal-callout-bar > .brutal-icon-medallion { min-inline-size: 4.5rem; min-block-size: 4.5rem; font-size: 2rem; font-weight: 800; line-height: 1; }
+/** Warning actions inherit preset geometry and use the paired semantic warning colors. */
+[data-ui="brutalism"][data-mode] .brutal-button.brutal-button-warning {
+  background: var(--brutal-warning);
+  color: var(--brutal-on-warning);
+  border-color: var(--brutal-warning);
+  text-shadow: none;
+}
+
+}