ui-style-kit-css 1.2.1 → 1.2.2

package/docs/PUBLISHING.md

@@ -0,0 +1,28 @@
+# Publishing Guide
+
+## Dry run
+
+```bash
+npm run check
+npm run pack:dry-run
+```
+
+`npm run check` rebuilds dist CSS, runs stylelint, executes unit package checks, verifies contrast pairs, and confirms package metadata. `npm run pack:dry-run` shows the exact files that would publish.
+
+## Publish
+
+```bash
+npm publish
+```
+
+For GitHub releases, create or dispatch a release for the matching package tag, such as `v1.2.2`. The release workflows verify that `package.json`, `package-lock.json`, and `CHANGELOG.md` are aligned before publishing.
+
+## Versioning
+
+```bash
+npm run release:patch
+npm run release:minor
+npm run release:major
+```
+
+Use patch for fixes, minor for new themes/styles, and major for breaking public API changes.

package/docs/STYLE-GUIDE.md

@@ -0,0 +1,28 @@
+# Choosing a UI Style
+
+| UI style | Best for |
+|---|---|
+| Minimal SaaS | Dashboards, admin tools, SaaS apps, documentation, internal systems |
+| Bento UI | Landing pages, portfolio sections, feature pages, product showcases |
+| Maximalist / Playful | Creators, entertainment brands, events, bold client sites |
+| Bauhaus / Swiss Modern | Agencies, artists, editorial pages, design-forward brands |
+| Tactile / Skeuomorphic | Premium sites, distinctive client interfaces, control-panel metaphors |
+| Neumorphism | Soft dashboards, experimental UI, visual demos |
+| Retrofuturism | Futuristic product pages, portfolios, technology showcases |
+| Brutalism | Bold landing pages, anti-template websites, creative brands |
+| Cyberpunk | Security, gaming, encryption, developer demos, nightlife/tech branding |
+| Y2K | Nostalgic, playful, music/fashion/event sites |
+| Retro Glass | Futuristic premium apps, glass dashboards, hero sections |
+Use `data-mode="contrast"` for high-contrast variants and pair it with semantic HTML for best accessibility outcomes.
+
+
+## Visual regression baseline
+
+The repository includes optional Playwright visual smoke checks:
+
+```bash
+npm install
+npm run test:visual
+```
+
+Run visual tests before major releases or after large CSS refactors.

package/docs/TOKENS.md

@@ -0,0 +1,71 @@
+# Token Contract
+
+Each UI style uses its own prefix, but the token shape is intentionally consistent.
+
+## Prefixes
+
+| UI style | Prefix |
+|---|---:|
+| Minimal SaaS | `saas` |
+| Bento UI | `bento` |
+| Maximalist / Playful | `max` |
+| Bauhaus / Swiss Modern | `bau` |
+| Skeuomorphic / Tactile | `tactile` |
+| Neumorphism | `neo` |
+| Retrofuturism | `retro` |
+| Brutalism | `brutal` |
+| Cyberpunk | `cyber` |
+| Y2K | `y2k` |
+| Retro Glass | `rg` |
+
+## Stable token families
+
+Replace `<prefix>` with the style prefix:
+
+```css
+--<prefix>-bg
+--<prefix>-surface
+--<prefix>-surface-strong
+--<prefix>-surface-soft
+--<prefix>-text
+--<prefix>-text-muted
+--<prefix>-border
+--<prefix>-primary
+--<prefix>-primary-hover
+--<prefix>-primary-text
+--<prefix>-secondary
+--<prefix>-secondary-hover
+--<prefix>-secondary-text
+--<prefix>-accent
+--<prefix>-success
+--<prefix>-warning
+--<prefix>-danger
+--<prefix>-link
+--<prefix>-focus
+```
+
+Most systems also expose RGB source tokens such as:
+
+```css
+--<prefix>-primary-rgb
+--<prefix>-border-rgb
+--<prefix>-focus-rgb
+```
+
+These are useful for custom alpha effects:
+
+```css
+.my-component {
+  border-color: rgb(var(--saas-primary-rgb) / 0.35);
+}
+```
+
+## Override example
+
+```css
+/* Consumer CSS is unlayered, so it overrides the library's layered rules cleanly. */
+[data-ui="minimal-saas"][data-theme="arctic-indigo"] {
+  --saas-radius-md: 1rem;
+  --saas-primary-rgb: 72 91 255;
+}
+```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-style-kit-css",
-  "version": "1.2.1",
-  "description": "A CSS-only UI style and color theme kit with 11 visual systems, 10 shared color schemes, light/dark/contrast modes, and accessibility-focused native HTML coverage. Designed for easy integration into any web project, it provides a comprehensive set of styles and themes to create visually stunning and accessible user interfaces without the need for JavaScript.",
+  "version": "1.2.2",
+  "description": "CSS theme and UI style preset library for accessible websites, dashboards, admin interfaces, and client-facing pages.",
   "style": "dist/ui-style-kit.css",
   "main": "dist/ui-style-kit.css",
   "unpkg": "dist/ui-style-kit.min.css",
@@ -9,80 +9,106 @@
   "files": [
     "dist",
     "styles",
-    "index.html",
+    "demo",
+    "docs",
     "README.md",
     "LICENSE",
     "CHANGELOG.md",
-    "CODE_OF_CONDUCT.md"
+    "STYLE-MAP.md",
+    "CONTRIBUTING.md",
+    "SECURITY.md"
   ],
   "keywords": [
     "css",
     "ui",
     "themes",
+    "theme-system",
     "style-kit",
     "design-system",
+    "css-library",
     "accessibility",
     "color-themes",
+    "dark-mode",
+    "light-mode",
+    "high-contrast",
+    "dashboard",
+    "admin-panel",
+    "web-design",
+    "responsive-design",
+    "css-variables",
+    "custom-properties",
     "bento",
-    "saas",
+    "minimal-saas",
     "glassmorphism",
+    "skeuomorphism",
     "neumorphism",
     "cyberpunk",
     "y2k",
     "brutalism",
-    "retrofuturism"
+    "retrofuturism",
+    "bauhaus"
   ],
-  "scripts": {
-    "build": "node scripts/build-css.js",
-    "lint": "npm run lint:css",
-    "lint:css": "stylelint \"styles/**/*.css\"",
-    "lint:css:fix": "stylelint \"styles/**/*.css\" --fix",
-    "prepublishOnly": "npm run lint && npm run build && npm run test:unit",
-    "test": "npm run test:unit",
-    "test:ci": "npm run lint && npm run build && npm run test:unit && npm run test:e2e",
-    "test:e2e": "node scripts/playwright-cli.js test",
-    "test:e2e:headed": "node scripts/playwright-cli.js test --headed",
-    "test:e2e:install": "node scripts/playwright-cli.js install chromium",
-    "test:e2e:install:ci": "node scripts/playwright-cli.js install --with-deps chromium",
-    "test:e2e:ui": "node scripts/playwright-cli.js test --ui",
-    "test:unit": "node --test tests/package-integrity.test.js",
-    "verify": "npm run lint && npm run build && npm run test:unit && npm run test:e2e"
-  },
   "license": "MIT",
-  "engines": {
-    "node": ">=18.18.0"
-  },
   "sideEffects": [
     "*.css"
   ],
   "exports": {
     ".": "./dist/ui-style-kit.css",
     "./css": "./dist/ui-style-kit.css",
+    "./css.css": "./dist/ui-style-kit.css",
     "./min": "./dist/ui-style-kit.min.css",
+    "./min.css": "./dist/ui-style-kit.min.css",
+    "./dist/ui-style-kit.css": "./dist/ui-style-kit.css",
+    "./dist/ui-style-kit.min.css": "./dist/ui-style-kit.min.css",
+    "./package.json": "./package.json",
     "./styles/minimal-saas": "./styles/minimal-saas.css",
+    "./styles/minimal-saas.css": "./styles/minimal-saas.css",
     "./minimal-saas": "./styles/minimal-saas.css",
+    "./minimal-saas.css": "./styles/minimal-saas.css",
     "./styles/bento": "./styles/bento.css",
+    "./styles/bento.css": "./styles/bento.css",
     "./bento": "./styles/bento.css",
+    "./bento.css": "./styles/bento.css",
     "./styles/maximalist": "./styles/maximalist.css",
+    "./styles/maximalist.css": "./styles/maximalist.css",
     "./maximalist": "./styles/maximalist.css",
+    "./maximalist.css": "./styles/maximalist.css",
     "./styles/bauhaus": "./styles/bauhaus.css",
+    "./styles/bauhaus.css": "./styles/bauhaus.css",
     "./bauhaus": "./styles/bauhaus.css",
+    "./bauhaus.css": "./styles/bauhaus.css",
     "./styles/tactile": "./styles/tactile.css",
+    "./styles/tactile.css": "./styles/tactile.css",
     "./tactile": "./styles/tactile.css",
+    "./tactile.css": "./styles/tactile.css",
     "./styles/neumorphism": "./styles/neumorphism.css",
+    "./styles/neumorphism.css": "./styles/neumorphism.css",
     "./neumorphism": "./styles/neumorphism.css",
+    "./neumorphism.css": "./styles/neumorphism.css",
     "./styles/retrofuturism": "./styles/retrofuturism.css",
+    "./styles/retrofuturism.css": "./styles/retrofuturism.css",
     "./retrofuturism": "./styles/retrofuturism.css",
+    "./retrofuturism.css": "./styles/retrofuturism.css",
     "./styles/brutalism": "./styles/brutalism.css",
+    "./styles/brutalism.css": "./styles/brutalism.css",
     "./brutalism": "./styles/brutalism.css",
+    "./brutalism.css": "./styles/brutalism.css",
     "./styles/cyberpunk": "./styles/cyberpunk.css",
+    "./styles/cyberpunk.css": "./styles/cyberpunk.css",
     "./cyberpunk": "./styles/cyberpunk.css",
+    "./cyberpunk.css": "./styles/cyberpunk.css",
     "./styles/y2k": "./styles/y2k.css",
+    "./styles/y2k.css": "./styles/y2k.css",
     "./y2k": "./styles/y2k.css",
+    "./y2k.css": "./styles/y2k.css",
     "./styles/retro-glass": "./styles/retro-glass.css",
+    "./styles/retro-glass.css": "./styles/retro-glass.css",
     "./retro-glass": "./styles/retro-glass.css",
+    "./retro-glass.css": "./styles/retro-glass.css",
     "./styles/interactive-surface-bridge": "./styles/interactive-surface-bridge.css",
-    "./interactive-surface-bridge": "./styles/interactive-surface-bridge.css"
+    "./styles/interactive-surface-bridge.css": "./styles/interactive-surface-bridge.css",
+    "./interactive-surface-bridge": "./styles/interactive-surface-bridge.css",
+    "./interactive-surface-bridge.css": "./styles/interactive-surface-bridge.css"
   },
   "repository": {
     "type": "git",
@@ -92,110 +118,34 @@
     "url": "https://github.com/Foscat/ui-style-kit-css/issues"
   },
   "homepage": "https://github.com/Foscat/ui-style-kit-css#readme",
+  "engines": {
+    "node": ">=20"
+  },
+  "type": "module",
   "devDependencies": {
-    "@playwright/test": "^1.54.0",
-    "lightningcss": "^1.30.2",
+    "@playwright/test": "^1.60.0",
     "stylelint": "^17.12.0"
   },
-  "dependencies": {
-    "ajv": "~8.20.0",
-    "ansi-regex": "~5.0.1",
-    "ansi-styles": "~4.3.0",
-    "argparse": "~2.0.1",
-    "array-union": "~2.1.0",
-    "astral-regex": "~2.0.0",
-    "balanced-match": "~2.0.0",
-    "braces": "~3.0.3",
-    "cacheable": "~2.3.5",
-    "callsites": "~3.1.0",
-    "color-convert": "~2.0.1",
-    "color-name": "~1.1.4",
-    "colord": "~2.9.3",
-    "cosmiconfig": "~9.0.1",
-    "css-functions-list": "~3.3.3",
-    "css-tree": "~3.2.1",
-    "cssesc": "~3.0.0",
-    "debug": "~4.4.3",
-    "dir-glob": "~3.0.1",
-    "emoji-regex": "~8.0.0",
-    "env-paths": "~2.2.1",
-    "error-ex": "~1.3.4",
-    "fast-deep-equal": "~3.1.3",
-    "fast-glob": "~3.3.3",
-    "fast-uri": "~3.1.2",
-    "fastest-levenshtein": "~1.0.16",
-    "fastq": "~1.20.1",
-    "file-entry-cache": "~11.1.3",
-    "fill-range": "~7.1.1",
-    "flat-cache": "~6.1.22",
-    "flatted": "~3.4.2",
-    "glob-parent": "~5.1.2",
-    "global-modules": "~2.0.0",
-    "global-prefix": "~3.0.0",
-    "globby": "~11.1.0",
-    "globjoin": "~0.1.4",
-    "has-flag": "~4.0.0",
-    "hashery": "~1.5.1",
-    "hookified": "~1.15.1",
-    "html-tags": "~3.3.1",
-    "ignore": "~7.0.5",
-    "import-fresh": "~3.3.1",
-    "imurmurhash": "~0.1.4",
-    "ini": "~1.3.8",
-    "is-arrayish": "~0.2.1",
-    "is-extglob": "~2.1.1",
-    "is-fullwidth-code-point": "~3.0.0",
-    "is-glob": "~4.0.3",
-    "is-number": "~7.0.0",
-    "is-plain-object": "~5.0.0",
-    "isexe": "~2.0.0",
-    "js-tokens": "~4.0.0",
-    "js-yaml": "~4.1.1",
-    "json-parse-even-better-errors": "~2.3.1",
-    "json-schema-traverse": "~1.0.0",
-    "keyv": "~5.6.0",
-    "kind-of": "~6.0.3",
-    "known-css-properties": "~0.37.0",
-    "lines-and-columns": "~1.2.4",
-    "lodash.truncate": "~4.4.2",
-    "mathml-tag-names": "~2.1.3",
-    "mdn-data": "~2.27.1",
-    "meow": "~13.2.0",
-    "merge2": "~1.4.1",
-    "micromatch": "~4.0.8",
-    "ms": "~2.1.3",
-    "nanoid": "~3.3.12",
-    "normalize-path": "~3.0.0",
-    "parent-module": "~1.0.1",
-    "parse-json": "~5.2.0",
-    "path-type": "~4.0.0",
-    "picocolors": "~1.1.1",
-    "picomatch": "~2.3.2",
-    "postcss": "~8.5.15",
-    "postcss-resolve-nested-selector": "~0.1.6",
-    "postcss-safe-parser": "~7.0.1",
-    "postcss-selector-parser": "~7.1.1",
-    "postcss-value-parser": "~4.2.0",
-    "qified": "~0.10.1",
-    "queue-microtask": "~1.2.3",
-    "require-from-string": "~2.0.2",
-    "resolve-from": "~5.0.0",
-    "reusify": "~1.1.0",
-    "run-parallel": "~1.2.0",
-    "signal-exit": "~4.1.0",
-    "slash": "~3.0.0",
-    "slice-ansi": "~4.0.0",
-    "source-map-js": "~1.2.1",
-    "string-width": "~4.2.3",
-    "strip-ansi": "~6.0.1",
-    "supports-color": "~7.2.0",
-    "supports-hyperlinks": "~3.2.0",
-    "svg-tags": "~1.0.0",
-    "table": "~6.9.0",
-    "to-regex-range": "~5.0.1",
-    "util-deprecate": "~1.0.2",
-    "which": "~1.3.1",
-    "write-file-atomic": "~5.0.1"
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "lint": "stylelint \"styles/**/*.css\"",
+    "check:contrast": "node scripts/check-contrast.mjs",
+    "check:package": "node scripts/check-package.mjs",
+    "test": "npm run test:unit",
+    "test:unit": "node --test tests/package-integrity.test.js",
+    "test:e2e": "playwright test --config playwright.config.js",
+    "test:e2e:install:ci": "playwright install --with-deps chromium",
+    "check": "npm run build && npm run lint && npm run test:unit && npm run check:contrast && npm run check:package",
+    "pack:dry-run": "npm pack --dry-run",
+    "prepack": "npm run check",
+    "prepublishOnly": "npm run check",
+    "release:patch": "npm version patch && npm publish",
+    "release:minor": "npm version minor && npm publish",
+    "release:major": "npm version major && npm publish",
+    "test:visual": "playwright test --config playwright.config.mjs tests/demo-visual.spec.mjs"
   },
-  "author": "Foscat"
+  "author": "Kyle Foster",
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/styles/bauhaus.css

@@ -10,6 +10,8 @@
    <body data-ui="bauhaus" data-theme="cyber-lime" data-mode="contrast">
 ========================================================= */
 
+
+@layer ui-style-kit.bauhaus {
 :root {
   --bau-font-sans: Helvetica Neue, Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
   --bau-font-display: Helvetica Neue, Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
@@ -90,7 +92,7 @@
   --bau-border-rgb: 214 200 165;
   --bau-primary-rgb: 184 135 47;
   --bau-primary-hover-rgb: 148 104 31;
-  --bau-primary-text-rgb: 255 255 255;
+  --bau-primary-text-rgb: 16 16 16;
   --bau-secondary-rgb: 34 49 79;
   --bau-secondary-hover-rgb: 23 36 60;
   --bau-secondary-text-rgb: 255 255 255;
@@ -618,7 +620,7 @@
   --bau-border-rgb: 198 216 179;
   --bau-primary-rgb: 95 159 31;
   --bau-primary-hover-rgb: 73 125 23;
-  --bau-primary-text-rgb: 255 255 255;
+  --bau-primary-text-rgb: 16 16 16;
   --bau-secondary-rgb: 20 127 134;
   --bau-secondary-hover-rgb: 14 98 104;
   --bau-secondary-text-rgb: 255 255 255;
@@ -976,3 +978,4 @@
   [data-ui="bauhaus"] * { box-shadow: none !important; text-shadow: none !important; }
   [data-ui="bauhaus"] a { color: #000 !important; text-decoration: underline; }
 }
+}

package/styles/bento.css

@@ -10,6 +10,8 @@
    <body data-ui="bento" data-theme="cyber-lime" data-mode="contrast">
 ========================================================= */
 
+
+@layer ui-style-kit.bento {
 :root {
   --bento-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --bento-font-display: Inter, ui-sans-serif, system-ui, sans-serif;
@@ -90,7 +92,7 @@
   --bento-border-rgb: 214 200 165;
   --bento-primary-rgb: 184 135 47;
   --bento-primary-hover-rgb: 148 104 31;
-  --bento-primary-text-rgb: 255 255 255;
+  --bento-primary-text-rgb: 16 16 16;
   --bento-secondary-rgb: 34 49 79;
   --bento-secondary-hover-rgb: 23 36 60;
   --bento-secondary-text-rgb: 255 255 255;
@@ -618,7 +620,7 @@
   --bento-border-rgb: 198 216 179;
   --bento-primary-rgb: 95 159 31;
   --bento-primary-hover-rgb: 73 125 23;
-  --bento-primary-text-rgb: 255 255 255;
+  --bento-primary-text-rgb: 16 16 16;
   --bento-secondary-rgb: 20 127 134;
   --bento-secondary-hover-rgb: 14 98 104;
   --bento-secondary-text-rgb: 255 255 255;
@@ -977,3 +979,4 @@
   [data-ui="bento"] * { box-shadow: none !important; text-shadow: none !important; }
   [data-ui="bento"] a { color: #000 !important; text-decoration: underline; }
 }
+}

package/styles/brutalism.css

@@ -11,6 +11,8 @@
    <body data-ui="brutalism" data-theme="midnight-gold" data-mode="contrast">
 ========================================================= */
 
+
+@layer ui-style-kit.brutalism {
 :root {
   --brutal-radius-xs: 0.25rem;
   --brutal-radius-sm: 0.5rem;
@@ -111,7 +113,7 @@
   --brutal-border-rgb: 214 200 165;
   --brutal-primary-rgb: 184 135 47;
   --brutal-primary-hover-rgb: 148 104 31;
-  --brutal-primary-text-rgb: 255 255 255;
+  --brutal-primary-text-rgb: 16 16 16;
   --brutal-secondary-rgb: 34 49 79;
   --brutal-secondary-hover-rgb: 23 36 60;
   --brutal-secondary-text-rgb: 255 255 255;
@@ -671,7 +673,7 @@
   --brutal-border-rgb: 198 216 179;
   --brutal-primary-rgb: 95 159 31;
   --brutal-primary-hover-rgb: 73 125 23;
-  --brutal-primary-text-rgb: 255 255 255;
+  --brutal-primary-text-rgb: 16 16 16;
   --brutal-secondary-rgb: 20 127 134;
   --brutal-secondary-hover-rgb: 14 98 104;
   --brutal-secondary-text-rgb: 255 255 255;
@@ -909,3 +911,82 @@
 
 [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; } }
+
+/* =========================================================
+   Native HTML Coverage + CSS Accessibility Layer
+========================================================= */
+
+.brutal-sr-only,
+.brutal-visually-hidden { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
+.brutal-skip-link { position: fixed; inset-block-start: 1rem; inset-inline-start: 1rem; z-index: 10000; transform: translateY(-150%); padding: .75rem 1rem; background: var(--brutal-primary); color: var(--brutal-primary-text); border: 3px solid var(--brutal-border); border-radius: var(--brutal-radius-sm); box-shadow: var(--brutal-shadow-md); font-weight: 900; text-decoration: none; }
+.brutal-skip-link:focus { transform: translateY(0); }
+.brutal-divider { width: 100%; height: 1px; border: 0; margin: 1.5rem 0; background: var(--brutal-border); }
+
+[data-ui="brutalism"] :where(h1, h2, h3, h4, h5, h6) { color: var(--brutal-text); font-family: var(--brutal-font-display); line-height: 1.15; margin: 0 0 .65em; text-wrap: balance; }
+[data-ui="brutalism"] :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); }
+[data-ui="brutalism"] :where(h2) { font-size: clamp(1.55rem, 3vw, 2.35rem); }
+[data-ui="brutalism"] :where(h3) { font-size: clamp(1.25rem, 2vw, 1.65rem); }
+[data-ui="brutalism"] :where(p) { margin: 0 0 1rem; color: var(--brutal-text-muted); line-height: 1.7; }
+[data-ui="brutalism"] :where(a) { color: var(--brutal-link); text-decoration-thickness: .08em; text-underline-offset: .18em; }
+[data-ui="brutalism"] :where(a:hover) { color: var(--brutal-primary-hover); }
+[data-ui="brutalism"] :where(ul, ol) { margin: 0 0 1rem; padding-left: 1.35rem; color: var(--brutal-text-muted); }
+[data-ui="brutalism"] :where(li) { margin-block: .25rem; }
+[data-ui="brutalism"] :where(blockquote) { margin: 1.25rem 0; padding: 1rem 1.25rem; color: var(--brutal-text); background: var(--brutal-surface-soft); border-left: .35rem solid var(--brutal-primary); border-radius: var(--brutal-radius-md); }
+[data-ui="brutalism"] :where(code, kbd, samp) { font-family: var(--brutal-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace); font-size: .92em; background: var(--brutal-surface-soft); color: var(--brutal-text); border: 1px solid rgb(var(--brutal-border-rgb) / .45); border-radius: var(--brutal-radius-xs); padding: .15em .35em; }
+[data-ui="brutalism"] :where(pre) { overflow: auto; margin: 1rem 0; padding: 1rem; background: var(--brutal-surface-soft); color: var(--brutal-text); border: 1px solid var(--brutal-border); border-radius: var(--brutal-radius-md); }
+[data-ui="brutalism"] :where(pre code) { display: block; padding: 0; border: 0; background: transparent; }
+[data-ui="brutalism"] :where(hr) { height: 1px; border: 0; margin: 2rem 0; background: var(--brutal-border); }
+[data-ui="brutalism"] :where(mark) { background: rgb(var(--brutal-warning-rgb) / .32); color: var(--brutal-text); border-radius: .2em; padding-inline: .15em; }
+[data-ui="brutalism"] :where(small) { color: var(--brutal-text-muted); }
+[data-ui="brutalism"] :where(abbr[title]) { text-decoration: underline dotted var(--brutal-primary); text-underline-offset: .18em; cursor: help; }
+[data-ui="brutalism"] :where(img, picture, video, canvas, svg, iframe) { max-width: 100%; height: auto; }
+[data-ui="brutalism"] :where(figure) { margin: 1.25rem 0; }
+[data-ui="brutalism"] :where(figcaption) { margin-top: .5rem; color: var(--brutal-text-muted); font-size: .9rem; }
+[data-ui="brutalism"] :where(fieldset) { min-inline-size: 0; margin: 0 0 1rem; padding: 1rem; border: 3px solid var(--brutal-border); border-radius: var(--brutal-radius-md); }
+[data-ui="brutalism"] :where(legend) { padding-inline: .35rem; color: var(--brutal-text); font-weight: 900; }
+[data-ui="brutalism"] :where(label) { color: var(--brutal-text); font-weight: 750; }
+[data-ui="brutalism"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select) { width: 100%; min-height: 2.75rem; padding: .72rem .95rem; background: var(--brutal-surface-soft); color: var(--brutal-text); border: 3px solid var(--brutal-border); border-radius: var(--brutal-radius-md); font: inherit; }
+[data-ui="brutalism"] :where(textarea) { resize: vertical; min-height: 7rem; }
+[data-ui="brutalism"] :where(input, textarea, select, button) { font: inherit; }
+[data-ui="brutalism"] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) { min-height: 2.75rem; padding: .7rem 1rem; background: var(--brutal-primary); color: var(--brutal-primary-text); border: 3px solid var(--brutal-primary); border-radius: var(--brutal-radius-md); font-weight: 850; cursor: pointer; }
+[data-ui="brutalism"] :where(button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover) { background: var(--brutal-primary-hover); border-color: var(--brutal-primary-hover); }
+[data-ui="brutalism"] :where(input[type="checkbox"], input[type="radio"]) { inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--brutal-primary); }
+[data-ui="brutalism"] :where(input[type="range"]) { width: 100%; accent-color: var(--brutal-primary); }
+[data-ui="brutalism"] :where(input[type="color"]) { inline-size: 3rem; block-size: 2.4rem; padding: .2rem; background: var(--brutal-surface-soft); border: 3px solid var(--brutal-border); border-radius: var(--brutal-radius-sm); }
+[data-ui="brutalism"] :where(input[type="file"]) { color: var(--brutal-text-muted); }
+[data-ui="brutalism"] :where(input[type="file"]::file-selector-button) { margin-inline-end: .75rem; padding: .55rem .8rem; border: 3px solid var(--brutal-primary); border-radius: var(--brutal-radius-sm); background: var(--brutal-primary); color: var(--brutal-primary-text); font-weight: 800; cursor: pointer; }
+[data-ui="brutalism"] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) { opacity: .55; cursor: not-allowed; }
+[data-ui="brutalism"] :where(input:invalid, textarea:invalid, select:invalid, [aria-invalid="true"]) { border-color: var(--brutal-danger); }
+[data-ui="brutalism"] :where(table) { width: 100%; border-collapse: collapse; margin: 1rem 0; background: var(--brutal-surface); border: 3px solid var(--brutal-border); border-radius: var(--brutal-radius-md); overflow: hidden; }
+[data-ui="brutalism"] :where(caption) { caption-side: bottom; padding: .75rem; color: var(--brutal-text-muted); font-size: .9rem; }
+[data-ui="brutalism"] :where(th, td) { padding: .8rem .9rem; text-align: left; border-bottom: 1px solid var(--brutal-border); }
+[data-ui="brutalism"] :where(th) { color: var(--brutal-text); background: rgb(var(--brutal-primary-rgb) / .08); }
+[data-ui="brutalism"] :where(td) { color: var(--brutal-text-muted); }
+[data-ui="brutalism"] :where(details) { margin: 1rem 0; padding: .9rem 1rem; background: var(--brutal-surface); border: 3px solid var(--brutal-border); border-radius: var(--brutal-radius-md); }
+[data-ui="brutalism"] :where(summary) { color: var(--brutal-text); font-weight: 900; cursor: pointer; }
+[data-ui="brutalism"] :where(dialog) { max-width: min(92vw, 42rem); padding: 0; background: var(--brutal-surface-strong); color: var(--brutal-text); border: 3px solid var(--brutal-border); border-radius: var(--brutal-radius-lg); box-shadow: 0 30px 80px rgb(0 0 0 / .42); }
+[data-ui="brutalism"] :where(dialog::backdrop) { background: rgb(0 0 0 / .62); }
+[data-ui="brutalism"] :where(progress, meter) { width: 100%; min-height: .9rem; accent-color: var(--brutal-primary); }
+[data-ui="brutalism"] :where(:focus-visible) { outline: 3px solid var(--brutal-focus); outline-offset: 3px; box-shadow: 0 0 0 4px rgb(var(--brutal-focus-rgb) / .28); }
+[data-ui="brutalism"] :where(:target) { scroll-margin-top: 6rem; outline: 3px solid var(--brutal-focus); outline-offset: .35rem; }
+[data-ui="brutalism"] :where([aria-current="page"]) { font-weight: 900; }
+[data-ui="brutalism"] :where([aria-busy="true"]) { cursor: progress; }
+[data-ui="brutalism"] :where([hidden]) { display: none !important; }
+[data-ui="brutalism"] ::selection { background: var(--brutal-primary); color: var(--brutal-primary-text); }
+
+@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; }
+}
+@media (prefers-contrast: more) {
+  [data-ui="brutalism"] { --brutal-border-alpha: 1; }
+}
+@media (forced-colors: active) {
+  [data-ui="brutalism"] * { forced-color-adjust: auto; }
+  [data-ui="brutalism"] :where(:focus-visible) { outline: 3px solid CanvasText; box-shadow: none; }
+}
+@media print {
+  [data-ui="brutalism"] { background: #fff !important; color: #000 !important; }
+  [data-ui="brutalism"] * { box-shadow: none !important; text-shadow: none !important; }
+  [data-ui="brutalism"] a { color: #000 !important; text-decoration: underline; }
+}
+}