@higinio/design-mcp 0.2.0 → 0.2.1

package/assets/salvia/framework.css

@@ -1,16 +1,13 @@
-/* ==========================================================================
-   SALVIA SERENA — Framework CSS v1.0
+/* ============================================================
+   Salvia Serena — Design Tokens v1.0
    Sistema de diseño de Higinio Sosa · light-first
    Fuente de verdad: DESIGN-salvia-serena.md
-   Uso: enlazar este archivo antes de cualquier estilo propio y aplicar
-   la clase .salvia-reset al <body>. Tema: data-theme="light|dark" en <html>.
-   ========================================================================== */
+   Uso: importar ANTES de cualquier estilo propio.
+   Los componentes consumen SOLO aliases semánticos, nunca hex.
+   ============================================================ */
 
 @import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,600;0,700;1,600&family=Nunito+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Source+Code+Pro:wght@400;500&display=swap");
 
-/* --------------------------------------------------------------------------
-   1. TOKENS (§13)
-   -------------------------------------------------------------------------- */
 :root {
   /* == Primitivos: primario (Salvia) == */
   --primary-50: #e2eadf; --primary-100: #d4e0d1; --primary-200: #b8cbb7;
@@ -49,12 +46,6 @@
   --accent-soft: var(--primary-50);
   --accent-soft-strong: var(--primary-100);
   --link: var(--primary-600); /* AA 7.00:1 sobre --surface — texto de links y ghost */
-  --overlay: rgba(44, 54, 48, .5);
-  --tooltip-bg: var(--neutral-900);
-  --tooltip-text: var(--neutral-0);
-  --focus-color: var(--accent);       /* contorno de foco de teclado */
-  --text-on-danger: var(--neutral-0); /* texto del botón destructivo */
-  --border-hover: var(--neutral-500); /* borde de campos en hover */
 
   /* == Tipografía == */
   --font-display: "Lora", Georgia, serif;
@@ -93,7 +84,6 @@
   /* == Focus == */
   --ring: 0 0 0 3px rgba(79,107,88,.25);
   --ring-color: rgba(79,107,88,.25);
-  --ring-danger: 0 0 0 3px rgba(181,82,63,.22);
 
   /* == Motion (pausado: nada urge) == */
   --duration-instant: 100ms; --duration-fast: 150ms; --duration-base: 220ms;
@@ -105,9 +95,48 @@
   --stagger-step: 30ms;
 
   color-scheme: light;
-}
 
-/* Modo oscuro (§15, extendido con aliases derivados) */
+  --overlay: rgba(44, 54, 48, .5);
+  --tooltip-bg: var(--neutral-900);
+  --tooltip-text: var(--neutral-0);
+  --focus-color: var(--accent);
+  --text-on-danger: var(--neutral-0);
+  --border-hover: var(--neutral-500);
+  --ring-danger: 0 0 0 3px rgba(181,82,63,.22);
+
+  --action-bg: var(--accent);
+  --action-hover: var(--accent-hover);
+  --action-active: var(--accent-active);
+  --text-on-action: var(--text-on-primary);
+  --control-border: var(--border-strong);
+  --placeholder: var(--text-muted);
+  --selection-bg: var(--action-bg);
+  --selection-text: var(--text-on-action);
+  --font-ui-heading: var(--font-body);
+  --text-ui-title: 2rem;
+  --touch-target: 44px;
+  --text-display-fluid: clamp(2.5rem, 1.8rem + 2.4vw, 4.5rem);
+
+  /* Series categóricas: orden estable; acompañar con etiqueta o forma. */
+  --chart-1: #549864;
+  --chart-2: #8d4226;
+  --chart-3: #179a8e;
+  --chart-4: #81416d;
+  --chart-5: #8a8b39;
+  --chart-6: #195f91;
+  --chart-7: #996f18;
+  /* Ritmo de contenido y formularios. */
+  --field-gap: 6px;
+  --heading-gap: var(--space-2);
+  --content-gap: var(--space-4);
+  --card-content-gap: var(--space-4);
+  --card-group-gap: var(--space-8);
+
+}
+
+/* == Modo oscuro (variante) — alternar data-theme en <html> ==
+   Casi sin sombras: las capas se separan por superficie y borde, y solo
+   los overlays (lg/xl) conservan una sombra tenue. */
 [data-theme="dark"] {
   --bg: #151a17;
   --surface: #1d231f;
@@ -126,30 +155,49 @@
   --text-on-primary: #151a17;
   --text-on-primary-solid: #b5d2bc;
   --link: #b5d2bc;
-  --overlay: rgba(0, 0, 0, .6);
-  --tooltip-bg: #e3e8e2;
-  --tooltip-text: #2c3630;
-  --focus-color: var(--accent);
-  --text-on-danger: #151a17;
-  --border-hover: #a6b0a8;
   --success-500: #6cc3ac; --success-100: #14271f; --success-text: #8ad3bf;
   --warning-500: #d9a94f; --warning-100: #2a2213; --warning-text: #e6c17e;
   --danger-500: #d9806d;  --danger-100: #2c1814;  --danger-text: #e9a597;
   --info-500: #8fb0c9;    --info-100: #18222b;    --info-text: #a9c4d8;
   --ring: 0 0 0 3px rgba(159,194,168,.3);
   --ring-color: rgba(159,194,168,.3);
-  --ring-danger: 0 0 0 3px rgba(217,128,109,.25);
   --shadow-xs: none;
   --shadow-sm: none;
   --shadow-md: none;
   --shadow-lg: 0 8px 24px rgba(8,10,9,.3);
   --shadow-xl: 0 16px 32px rgba(8,10,9,.35);
   color-scheme: dark;
+
+  --overlay: rgba(0, 0, 0, .6);
+  --tooltip-bg: #e3e8e2;
+  --tooltip-text: #2c3630;
+  --focus-color: var(--accent);
+  --text-on-danger: #151a17;
+  --border-hover: #a6b0a8;
+  --ring-danger: 0 0 0 3px rgba(217,128,109,.25);
+
+  --selection-bg: var(--action-bg);
+  --selection-text: var(--text-on-action);
+
+  /* Series categóricas: orden estable; acompañar con etiqueta o forma. */
+  --chart-1: #60a46f;
+  --chart-2: #a85a3f;
+  --chart-3: #2da79b;
+  --chart-4: #9b5986;
+  --chart-5: #818230;
+  --chart-6: #3678ac;
+  --chart-7: #946b10;
+}
+
+/* == Accesibilidad del movimiento == */
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms;
+    --duration-slow: 0ms; --duration-page: 0ms; --stagger-step: 0ms;
+  }
 }
 
-/* --------------------------------------------------------------------------
-   2. BASE (§6, §11.5, §13)
-   -------------------------------------------------------------------------- */
 *, *::before, *::after { box-sizing: border-box; }
 
 /* Focus ring global de teclado — especificidad cero vía :where() */
@@ -191,17 +239,10 @@
 .salvia-reset h6 { font-size: var(--text-base); line-height: var(--leading-base); }
 .salvia-reset p { max-width: var(--measure); margin: 0 0 1em; }
 .salvia-reset table { font-variant-numeric: tabular-nums; }
-.salvia-reset ::placeholder { color: var(--text-disabled); }
+.salvia-reset ::placeholder { color: var(--placeholder); }
 .salvia-reset ::selection { background: var(--ring-color); }
 
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-}
+
 
 /* --------------------------------------------------------------------------
    3. LAYOUT — contenedor, grid 12 col (§14)
@@ -249,12 +290,12 @@
 /* Gating de hover (§11.5): los hover que mueven/elevan (transform, box-shadow) van
    dentro de @media (hover: hover) and (pointer: fine) — en touch el tap dispara
    hovers falsos que se quedan pegados. Los hover de solo color/fondo quedan fuera. */
-.btn--primary { background: var(--accent); color: var(--text-on-primary); }
-.btn--primary:hover:not(:disabled) { background: var(--accent-hover); }
+.btn--primary { background: var(--action-bg); color: var(--text-on-action); }
+.btn--primary:hover:not(:disabled) { background: var(--action-hover); }
 @media (hover: hover) and (pointer: fine) {
   .btn--primary:hover:not(:disabled) { box-shadow: var(--shadow-sm); }
 }
-.btn--primary:active:not(:disabled) { background: var(--accent-active); box-shadow: none; }
+.btn--primary:active:not(:disabled) { background: var(--action-active); box-shadow: none; }
 .btn--primary:disabled { background: var(--border); color: var(--text-disabled); box-shadow: none; }
 
 .btn--secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text-primary); }
@@ -321,7 +362,7 @@
 .input, .textarea, .select {
   width: 100%; font-family: var(--font-body); font-size: var(--text-base);
   color: var(--text-primary); background: var(--surface);
-  border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-sm);
+  border: var(--border-width) solid var(--control-border); border-radius: var(--radius-sm);
   transition: border-color var(--duration-fast) var(--ease-out),
               box-shadow var(--duration-fast) var(--ease-out);
 }
@@ -419,7 +460,7 @@
 }
 .checkbox__box {
   width: 20px; height: 20px; flex: none; display: grid; place-items: center;
-  background: var(--surface); border: 2px solid var(--border-strong); border-radius: 4px;
+  background: var(--surface); border: 2px solid var(--control-border); border-radius: 4px;
   transition: background-color var(--duration-fast) var(--ease-out),
               border-color var(--duration-fast) var(--ease-out);
 }
@@ -429,7 +470,7 @@
   stroke-dasharray: 20; stroke-dashoffset: 20;
   transition: stroke-dashoffset var(--duration-base) var(--ease-spring);
 }
-.checkbox:hover .checkbox__box { border-color: var(--primary-400); }
+.checkbox:hover .checkbox__box { border-color: var(--focus-color); }
 .checkbox input:checked ~ .checkbox__box { background: var(--accent); border-color: var(--accent); }
 .checkbox input:checked ~ .checkbox__box svg { stroke-dashoffset: 0; }
 .checkbox input:focus-visible ~ .checkbox__box { box-shadow: var(--ring); }
@@ -446,7 +487,7 @@
 
 .radio__dot {
   width: 20px; height: 20px; flex: none; display: grid; place-items: center;
-  background: var(--surface); border: 2px solid var(--border-strong); border-radius: var(--radius-full);
+  background: var(--surface); border: 2px solid var(--control-border); border-radius: var(--radius-full);
   transition: background-color var(--duration-fast) var(--ease-out),
               border-color var(--duration-fast) var(--ease-out);
 }
@@ -455,7 +496,7 @@
   background: var(--text-on-primary); transform: scale(0);
   transition: transform var(--duration-base) var(--ease-spring);
 }
-.radio:hover .radio__dot { border-color: var(--primary-400); }
+.radio:hover .radio__dot { border-color: var(--focus-color); }
 .radio input:checked ~ .radio__dot { background: var(--accent); border-color: var(--accent); }
 .radio input:checked ~ .radio__dot::after { transform: scale(1); }
 .radio input:focus-visible ~ .radio__dot { box-shadow: var(--ring); }
@@ -789,10 +830,14 @@
   background: var(--surface); border: var(--border-width) solid var(--border);
   border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
   opacity: 0; transform: translateY(-4px); pointer-events: none;
-  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
+  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
+
+  visibility: hidden;
+
+  display: none;
 }
 .menu--right { left: auto; right: 0; }
-.menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
+.menu.is-open { opacity: 1; transform: none; pointer-events: auto;  visibility: visible;  display: block; }
 .menu__item {
   display: flex; align-items: center; gap: 10px; width: 100%;
   padding: 9px 12px; border: 0; border-radius: var(--radius-sm);
@@ -1067,7 +1112,7 @@ button.metric-chip:focus-visible { outline: 2px solid var(--focus-color); outlin
   width: 100%; height: var(--control-height-md); padding: 0 14px;
   font-family: var(--font-body); font-size: var(--text-base);
   color: var(--text-primary); background: var(--surface);
-  border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-sm);
+  border: var(--border-width) solid var(--control-border); border-radius: var(--radius-sm);
   transition: border-color var(--duration-fast) var(--ease-out),
               box-shadow var(--duration-fast) var(--ease-out);
 }
@@ -1109,7 +1154,7 @@ button.metric-chip:focus-visible { outline: 2px solid var(--focus-color); outlin
   width: 100%; height: var(--control-height-md); padding: 0 40px;
   font-family: var(--font-body); font-size: var(--text-base);
   color: var(--text-primary); background: var(--surface);
-  border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-sm);
+  border: var(--border-width) solid var(--control-border); border-radius: var(--radius-sm);
   transition: border-color var(--duration-fast) var(--ease-out),
               box-shadow var(--duration-fast) var(--ease-out);
 }
@@ -1177,8 +1222,12 @@ button.metric-chip:focus-visible { outline: 2px solid var(--focus-color); outlin
   transform-origin: top left; opacity: 0; transform: scale(.96); pointer-events: none;
   transition: opacity var(--duration-base) var(--ease-out),
               transform var(--duration-base) var(--ease-out);
+
+  visibility: hidden;
+
+  display: none;
 }
-.popover.is-open .popover__panel { opacity: 1; transform: none; pointer-events: auto; }
+.popover.is-open .popover__panel { opacity: 1; transform: none; pointer-events: auto;  visibility: visible;  display: block; }
 .popover--right .popover__panel { left: auto; right: 0; transform-origin: top right; }
 
 /* ButtonGroup (§10.31) */
@@ -1203,7 +1252,7 @@ button.metric-chip:focus-visible { outline: 2px solid var(--focus-color); outlin
   width: 100%; height: var(--control-height-md); padding: 0 40px 0 14px;
   font-family: var(--font-body); font-size: var(--text-base);
   color: var(--text-primary); background: var(--surface);
-  border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-sm);
+  border: var(--border-width) solid var(--control-border); border-radius: var(--radius-sm);
   transition: border-color var(--duration-fast) var(--ease-out),
               box-shadow var(--duration-fast) var(--ease-out);
 }
@@ -1222,8 +1271,12 @@ button.metric-chip:focus-visible { outline: 2px solid var(--focus-color); outlin
   transform-origin: top left; opacity: 0; transform: scale(.96); pointer-events: none;
   transition: opacity var(--duration-base) var(--ease-out),
               transform var(--duration-base) var(--ease-out);
+
+  visibility: hidden;
+
+  display: none;
 }
-.datepicker.is-open .datepicker__calendar { opacity: 1; transform: none; pointer-events: auto; }
+.datepicker.is-open .datepicker__calendar { opacity: 1; transform: none; pointer-events: auto;  visibility: visible;  display: block; }
 .datepicker--right .datepicker__calendar { left: auto; right: 0; transform-origin: top right; }
 
 .calendar { width: 15.75rem; }
@@ -1368,3 +1421,168 @@ button.metric-chip:focus-visible { outline: 2px solid var(--focus-color); outlin
 .u-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
 .u-muted { color: var(--text-muted); }
 .u-measure { max-width: var(--measure); }
+
+/* CONTRATOS COMPARTIDOS GENERADOS */
+/* Contratos comunes de interacción; la identidad y los valores viven en tokens.css. */
+.grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+.grid > *, .field, .card { min-inline-size: 0; }
+.stack, .card__content, .form-stack, .text-group { display: flex; flex-direction: column; align-items: stretch; }
+.stack, .card__content { gap: var(--content-gap); }
+.stack--tight, .text-group { gap: var(--heading-gap); }
+.stack--cards { gap: var(--card-group-gap); }
+.form-stack { gap: var(--form-gap); }
+.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
+.card { display: flex; flex-direction: column; gap: var(--card-content-gap); }
+.field { gap: var(--field-gap); }
+.field__label, .field__help, .field__error, .field > :is(label, p, span, div) { margin-block: 0; }
+:where(.field + .field, .field + .btn, .field + .cluster) { margin-block-start: var(--form-gap); }
+:where(.card + .card) { margin-block-start: var(--card-group-gap); }
+.stack > *, .card__content > *, .form-stack > *, .text-group > *, .grid > .card,
+.card > :is(h1, h2, h3, h4, h5, h6, p), .text-group > :is(h1, h2, h3, h4, h5, h6, p),
+.stack > :is(h1, h2, h3, h4, h5, h6, p) { margin-block: 0; }
+.form-stack > .field { margin-block: 0; }
+.btn {
+  block-size: auto;
+  min-block-size: var(--control-height-md);
+  max-inline-size: 100%;
+  white-space: normal;
+  line-height: 1.35;
+  text-align: center;
+}
+.btn--sm { min-block-size: var(--control-height-sm, 36px); }
+.btn--lg { min-block-size: var(--control-height-lg, 52px); }
+.btn--primary, .icon-btn--primary, .calendar__day--selected, .pagination__btn.is-active {
+  background: var(--action-bg);
+  color: var(--text-on-action);
+}
+.btn--primary:hover:not(:disabled), .icon-btn--primary:hover:not(:disabled) { background: var(--action-hover); color: var(--text-on-action); }
+.btn--primary:active:not(:disabled), .icon-btn--primary:active:not(:disabled) { background: var(--action-active); color: var(--text-on-action); }
+.input, .textarea, .select, .combobox__input, .search__input, .datepicker__input {
+  max-inline-size: 100%;
+  caret-color: var(--focus-color);
+}
+.input, .select, .combobox__input, .search__input, .datepicker__input {
+  block-size: auto; min-block-size: var(--control-height-md);
+  padding-block: var(--space-2); line-height: 1.5;
+}
+:is(.input, .textarea, .select, .combobox__input, .search__input, .datepicker__input):not(.input--error, .input--success, .textarea--error, [aria-invalid="true"]) { border-color: var(--control-border); }
+.input:hover:not(:disabled):not(:focus):not(.input--error, .input--success, [aria-invalid="true"]), .textarea:hover:not(:disabled):not(:focus):not(.textarea--error, [aria-invalid="true"]),
+.select:hover:not(:disabled):not(:focus), .combobox__input:hover:not(:disabled):not(:focus),
+.search__input:hover:not(:focus), .datepicker__input:hover:not(:disabled):not(:focus) { border-color: var(--border-hover); }
+.input:focus-visible, .textarea:focus-visible, .select:focus-visible,
+.combobox__input:focus-visible, .search__input:focus-visible, .datepicker__input:focus-visible {
+  outline: 2px solid var(--focus-color);
+  outline-offset: 2px;
+}
+.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger-text, var(--danger)); }
+.input.input--error, .textarea.textarea--error,
+.input.input--error:hover:not(:disabled):not(:focus), .textarea.textarea--error:hover:not(:disabled):not(:focus),
+:is(.input, .textarea, .select, .combobox__input, .search__input, .datepicker__input)[aria-invalid="true"]:hover:not(:disabled):not(:focus) {
+  border-color: var(--danger-text, var(--danger));
+}
+.input.input--success, .input.input--success:hover:not(:disabled):not(:focus) { border-color: var(--success-text, var(--success)); }
+.pagination { max-inline-size: 100%; flex-wrap: wrap; row-gap: var(--space-2); }
+.pagination__ellipsis { color: var(--text-muted); }
+.step--current .step__marker { color: var(--link); border-color: var(--focus-color); }
+.checkbox input:focus-visible ~ .checkbox__box,
+.radio input:focus-visible ~ .radio__dot,
+.switch input:focus-visible ~ .switch__track {
+  outline: 2px solid var(--focus-color);
+  outline-offset: 2px;
+}
+input.checkbox, input.radio { border-color: var(--control-border); }
+input.checkbox:hover, input.radio:hover { border-color: var(--focus-color); }
+input.checkbox:checked, input.checkbox:indeterminate, input.radio:checked { border-color: var(--focus-color); }
+.switch__track { background: var(--control-border); }
+.tabs { max-inline-size: 100%; overflow-x: auto; }
+.tabs__tab { flex-shrink: 0; }
+.segmented { max-inline-size: 100%; block-size: auto; min-block-size: var(--control-height-md); overflow-x: auto; }
+.segmented label { padding-block: var(--space-2); }
+.stat__row, .breadcrumbs, .check-row { flex-wrap: wrap; row-gap: var(--space-2); }
+.progress-row, .slider-row { flex-wrap: wrap; gap: var(--space-2); }
+.stat__value { max-inline-size: 100%; white-space: normal; overflow-wrap: anywhere; }
+.file-upload, .file-upload__label { min-inline-size: 0; max-inline-size: 100%; }
+.file-upload__button { max-inline-size: 100%; white-space: normal; text-align: center; }
+.file-upload__hint { overflow-wrap: anywhere; }
+.table-scroll { max-inline-size: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
+.popover__panel, .datepicker__calendar, .combobox__list {
+  max-inline-size: calc(100vw - 2rem);
+  max-block-size: min(32rem, 70dvh);
+  overflow: auto;
+}
+.file-upload__input:focus-visible + .file-upload__label { outline: 2px solid var(--focus-color); outline-offset: 2px; }
+.calendar { max-inline-size: calc(100vw - 2rem); }
+.ui-title, :is(h1, h2, h3, h4, h5, h6).ui-title, [data-mode="operate"] :is(h1, h2, h3) {
+  font-family: var(--font-ui-heading);
+  letter-spacing: 0;
+  line-height: 1.3;
+  font-weight: var(--weight-semibold);
+}
+.ui-title, :is(h1, h2, h3, h4, h5, h6).ui-title, [data-mode="operate"] h1 { font-size: var(--text-ui-title); }
+[data-mode="operate"] h2 { font-size: var(--text-xl); }
+[data-mode="operate"] h3 { font-size: var(--text-lg); }
+.display, .reading-title, :is(h1, h2, h3, h4, h5, h6):is(.display, .reading-title) {
+  font-family: var(--font-display);
+  font-size: var(--text-display-fluid);
+  line-height: 1.08;
+  letter-spacing: var(--tracking-display);
+  text-wrap: balance;
+}
+:where(.celeste-reset, .salvia-reset, .bruma-reset, .nocturna-reset, body[data-system]) {
+  scrollbar-color: var(--control-border) var(--bg);
+}
+::selection,
+.celeste-reset ::selection, .salvia-reset ::selection, .bruma-reset ::selection {
+  background: var(--selection-bg); color: var(--selection-text);
+}
+::placeholder { color: var(--placeholder); opacity: 1; }
+:where(a) { text-underline-offset: .2em; text-decoration-thickness: .08em; }
+.skip-link {
+  position: fixed; inset-block-start: var(--space-2); inset-inline-start: var(--space-2);
+  z-index: 1000; padding: var(--space-3) var(--space-4);
+  background: var(--action-bg); color: var(--text-on-action);
+  border-radius: var(--radius-sm); transform: translateY(-180%);
+}
+.skip-link:focus { transform: none; outline: 2px solid var(--focus-color); outline-offset: 2px; }
+[data-tooltip]::before, [data-tooltip]::after { display: none; }
+[data-tooltip]:focus-visible::before, [data-tooltip]:focus-visible::after { display: block; }
+.has-tooltip .tooltip { display: none; }
+.has-tooltip:has(:focus-visible) .tooltip { display: block; opacity: 1; transform: translate(-50%, 0); }
+@media (hover: hover) and (pointer: fine) {
+  [data-tooltip]:hover::before, [data-tooltip]:hover::after { display: block; }
+  .has-tooltip:hover .tooltip { display: block; }
+}
+@media (pointer: coarse) {
+  .btn, .icon-btn, .segmented label, .pagination button,
+  .tag__close, .search__clear, .toast__close, .check-row,
+  .checkbox:not(input), .radio:not(input), .switch:not(input) {
+    min-block-size: var(--touch-target);
+    min-inline-size: var(--touch-target);
+  }
+}
+@media (max-width: 479px) {
+  .btn-group { flex-wrap: wrap; }
+  .modal { max-inline-size: calc(100vw - 2rem); }
+  .stepper { flex-direction: column; align-items: stretch; gap: var(--space-4); }
+  .step { flex-direction: row; align-items: center; gap: var(--space-3); text-align: start; min-inline-size: 0; }
+  .step__label { overflow-wrap: anywhere; }
+  .step__connector { display: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+  html, html:focus-within { scroll-behavior: auto; }
+  .spinner, .skeleton, .skeleton::after,
+  .progress--indeterminate .progress__bar, .alert.is-leaving, .toast.is-leaving { animation: none; }
+  .progress--indeterminate .progress__bar { transform: none; }
+  .btn, .icon-btn, .card--interactive, .slider::-webkit-slider-thumb { transform: none; }
+  .btn:active:not(:disabled), .icon-btn:active:not(:disabled), .card--interactive:hover { transform: none; }
+  .btn, .icon-btn { transition: background-color 80ms linear, color 80ms linear; }
+  .menu, .popover__panel, .datepicker__calendar, .link::after { transition: none; }
+  .progress__bar, .progress-ring__value, .accordion__content, .accordion__body { transition: none; }
+}
+@media (forced-colors: active) {
+  input.switch, .switch__track { border: 1px solid CanvasText; background: Canvas; }
+  input.switch::after, .switch__track::after { background: CanvasText; }
+  input.switch:checked, .switch input:checked ~ .switch__track { border-color: Highlight; }
+  input.switch:checked::after, .switch input:checked ~ .switch__track::after { background: Highlight; }
+  .checkbox__box, .radio__dot { border-color: CanvasText; }
+}