maquina-components 0.5.1 → 0.6.0

data/app/assets/stylesheets/form.css

@@ -4,614 +4,714 @@
    Usage: Add data-component="..." to Rails form helpers
    =================================================================== */
 
-/* ===================================================================
-   FORM CONTAINER
-   Usage: <%= form_with model: @user, data: { component: "form" } do |f| %>
-   =================================================================== */
-[data-component="form"] {
-  @apply grid gap-6;
-}
+/* -------------------------------------------------------------------
+   Cascade contract (identical in every engine stylesheet)
+
+   Everything below lives in `@layer components` and every selector is
+   flattened to specificity 0,1,0 by pushing variant / size / state /
+   ancestor qualifiers into `:where()`. Two consequences, both deliberate:
+
+     * A caller's Tailwind utility (the `css_classes:` parameter) wins,
+       because `@layer utilities` is defined to beat `@layer components`.
+       A consumer's own unlayered override CSS wins too, whatever its
+       specificity.
+     * Nothing here can be resolved by specificity any more, so SOURCE
+       ORDER is the only tie-breaker. Rules must be written in this order:
+
+         1. base      [data-component="x"]
+         2. sizes     [data-component="x"]:where([data-size="…"])
+         3. variants  [data-component="x"]:where([data-variant="…"])
+         4. states    [data-component="x"]:where(:hover, :focus-visible,
+                                                 :disabled, [aria-invalid], …)
+         5. dark      — none; dark-mode differences are tokens, see
+                        app/assets/tailwind/maquina_components_engine/tokens.css
+
+   States come last so a state always beats a variant, which is what
+   "state" means. Cross-file order is fixed in engine.css — do not
+   re-alphabetize the imports.
+   ------------------------------------------------------------------- */
+
+@layer components {
+  /* ===================================================================
+     FORM CONTAINER
+     Usage: <%= form_with model: @user, data: { component: "form" } do |f| %>
+     =================================================================== */
+  [data-component="form"] {
+    @apply grid gap-6;
+    /* Pack rows at the start so a stretched/height-constrained parent does not
+       distribute leftover height between implicit rows. */
+    align-content: start;
+  }
 
-/* Form Group - wraps label + input + help/error text */
-[data-form-part="group"] {
-  @apply grid gap-2;
-}
+  /* Form Group - wraps label + input + help/error text */
+  [data-form-part="group"] {
+    @apply grid gap-2;
+    align-content: start;
+  }
 
-/* Inline form group (horizontal layout) */
-[data-form-part="group"][data-layout="inline"] {
-  @apply flex items-center gap-3;
-}
+  /* Inline form group (horizontal layout) */
+  [data-form-part="group"]:where([data-layout="inline"]) {
+    @apply flex items-center gap-3;
+  }
 
-/* ===================================================================
-   LABEL
-   Usage: <%= f.label :email, data: { component: "label" } %>
-   =================================================================== */
-[data-component="label"] {
-  @apply flex items-center gap-2;
-  @apply text-sm leading-none font-medium select-none;
-  color: var(--foreground);
-}
+  /* ===================================================================
+     LABEL
+     Usage: <%= f.label :email, data: { component: "label" } %>
+     =================================================================== */
+  [data-component="label"] {
+    @apply flex items-center gap-2;
+    @apply text-sm leading-none select-none;
+    font-weight: var(--label-weight, 500);
+    color: var(--foreground);
+  }
 
-/* Label disabled state (when used with peer) */
-[data-component="label"]:has(+ :disabled),
-:disabled + [data-component="label"] {
-  @apply cursor-not-allowed opacity-50;
-}
+  /* Required indicator */
+  [data-component="label"]:where([data-required])::after {
+    content: "*";
+    @apply ml-0.5;
+    color: var(--destructive);
+  }
 
-/* Required indicator */
-[data-component="label"][data-required]::after {
-  content: "*";
-  @apply ml-0.5;
-  color: var(--destructive);
-}
+  /* Label disabled state (when used with peer) */
+  [data-component="label"]:where(:has(+ :disabled)),
+  :where(:disabled) + [data-component="label"] {
+    @apply cursor-not-allowed opacity-50;
+  }
 
-/* ===================================================================
-   INPUT
-   Usage: <%= f.text_field :email, data: { component: "input" } %>
-   Matches: h-9 w-full min-w-0 rounded-md border border-input bg-transparent
-            px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none
-            md:text-sm placeholder:text-muted-foreground
-            focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]
-            disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50
-            aria-invalid:ring-destructive/20 aria-invalid:border-destructive
-   =================================================================== */
-[data-component="input"] {
-  @apply h-9 w-full min-w-0;
-  @apply rounded-md border px-3 py-1;
-  @apply text-base md:text-sm;
-  @apply outline-none;
-  @apply transition-[color,box-shadow];
-
-  background-color: transparent;
-  border-color: var(--input);
-  color: var(--foreground);
-  box-shadow: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
-}
+  /* ===================================================================
+     INPUT
+     Usage: <%= f.text_field :email, data: { component: "input" } %>
+     Matches: h-9 w-full min-w-0 rounded-md border border-input bg-transparent
+              px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none
+              md:text-sm placeholder:text-muted-foreground
+              focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]
+              disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50
+              aria-invalid:ring-destructive/20 aria-invalid:border-destructive
+     Shape, focus ring and elevation route through the engine tokens; see
+     app/assets/tailwind/maquina_components_engine/tokens.css.
+     =================================================================== */
+  [data-component="input"] {
+    @apply h-9 w-full min-w-0;
+    @apply border px-3 py-1;
+    @apply text-base md:text-sm;
+    @apply outline-none;
+    @apply transition-[color,box-shadow,outline-color];
+
+    border-radius: var(--input-radius, var(--control-radius, 0.375rem));
+    background-color: var(--control-fill, var(--maquina-control-fill-default, transparent));
+    border-color: var(--input);
+    color: var(--foreground);
+    box-shadow: var(--elevation-control, var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
+  }
 
-/* Placeholder */
-[data-component="input"]::placeholder {
-  color: var(--muted-foreground);
-}
+  /* Placeholder */
+  [data-component="input"]::placeholder {
+    color: var(--muted-foreground);
+  }
 
-/* Selection */
-[data-component="input"]::selection {
-  background-color: var(--primary);
-  color: var(--primary-foreground);
-}
+  /* Selection */
+  [data-component="input"]::selection {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+  }
 
-/* Focus state */
-[data-component="input"]:focus,
-[data-component="input"]:focus-visible {
-  border-color: var(--ring);
-  box-shadow:
-    var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05)),
-    0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
-}
+  /* ----- Sizes ----- */
+  [data-component="input"]:where([data-size="sm"]) {
+    @apply h-8 px-2.5 text-xs;
+  }
 
-/* Disabled state */
-[data-component="input"]:disabled {
-  @apply pointer-events-none cursor-not-allowed opacity-50;
-}
+  [data-component="input"]:where([data-size="lg"]) {
+    @apply h-11 px-4 text-base;
+  }
 
-/* Invalid/error state */
-[data-component="input"][aria-invalid="true"],
-[data-component="input"]:invalid:not(:placeholder-shown) {
-  border-color: var(--destructive);
-  box-shadow:
-    var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05)),
-    0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
-}
+  /* ----- Type variants ----- */
+  [data-component="input"]:where([type="file"]) {
+    @apply py-1.5;
+  }
 
-/* File input */
-[data-component="input"][type="file"] {
-  @apply py-1.5;
-}
+  [data-component="input"]:where([type="file"])::file-selector-button {
+    @apply inline-flex h-7 items-center border-0 bg-transparent;
+    @apply text-sm;
+    font-weight: var(--label-weight, 500);
+    color: var(--foreground);
+  }
 
-[data-component="input"][type="file"]::file-selector-button {
-  @apply inline-flex h-7 items-center border-0 bg-transparent;
-  @apply text-sm font-medium;
-  color: var(--foreground);
-}
+  /* ----- States ----- */
 
-/* Input sizes */
-[data-component="input"][data-size="sm"] {
-  @apply h-8 px-2.5 text-xs;
-}
+  /* Focus state — keyboard only. The bare :focus used to ring on mouse click. */
+  [data-component="input"]:where(:focus-visible) {
+    border-color: var(--ring);
+    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
+             var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
+    outline-offset: var(--focus-ring-offset, 0px);
+  }
 
-[data-component="input"][data-size="lg"] {
-  @apply h-11 px-4 text-base;
-}
+  /* Disabled state */
+  [data-component="input"]:where(:disabled) {
+    @apply pointer-events-none cursor-not-allowed opacity-50;
+  }
 
-/* Dark mode */
-.dark [data-component="input"] {
-  background-color: color-mix(in oklch, var(--input) 30%, transparent);
-}
+  /* Invalid/error state — the destructive halo is themeable through
+     --focus-ring-color, which the :focus-visible rule above also reads. */
+  [data-component="input"]:where([aria-invalid="true"], :invalid:not(:placeholder-shown)) {
+    --focus-ring-color: color-mix(in oklch, var(--destructive) 20%, transparent);
+    border-color: var(--destructive);
+    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
+             var(--focus-ring-color, color-mix(in oklch, var(--destructive) 20%, transparent));
+    outline-offset: var(--focus-ring-offset, 0px);
+  }
 
-/* ===================================================================
-   TEXTAREA
-   Usage: <%= f.text_area :bio, data: { component: "textarea" } %>
-   Matches: min-h-[60px] w-full rounded-md border border-input bg-transparent
-            px-3 py-2 text-base shadow-xs outline-none md:text-sm
-            placeholder:text-muted-foreground
-            focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]
-            disabled:cursor-not-allowed disabled:opacity-50
-            aria-invalid:ring-destructive/20 aria-invalid:border-destructive
-   =================================================================== */
-[data-component="textarea"] {
-  @apply w-full min-w-0 min-h-16;
-  @apply rounded-md border px-3 py-2;
-  @apply text-base md:text-sm;
-  @apply outline-none resize-y;
-  @apply transition-[color,box-shadow];
-
-  background-color: transparent;
-  border-color: var(--input);
-  color: var(--foreground);
-  box-shadow: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
-}
+  /* ===================================================================
+     TEXTAREA
+     Usage: <%= f.text_area :bio, data: { component: "textarea" } %>
+     Matches: min-h-[60px] w-full rounded-md border border-input bg-transparent
+              px-3 py-2 text-base shadow-xs outline-none md:text-sm
+              placeholder:text-muted-foreground
+              focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]
+              disabled:cursor-not-allowed disabled:opacity-50
+              aria-invalid:ring-destructive/20 aria-invalid:border-destructive
+     Shape, focus ring and elevation route through the engine tokens; see
+     app/assets/tailwind/maquina_components_engine/tokens.css.
+     =================================================================== */
+  [data-component="textarea"] {
+    @apply w-full min-w-0 min-h-16;
+    @apply border px-3 py-2;
+    @apply text-base md:text-sm;
+    @apply outline-none resize-y;
+    @apply transition-[color,box-shadow,outline-color];
+
+    border-radius: var(--textarea-radius, var(--control-radius, 0.375rem));
+    background-color: var(--control-fill, var(--maquina-control-fill-default, transparent));
+    border-color: var(--input);
+    color: var(--foreground);
+    box-shadow: var(--elevation-control, var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
+  }
 
-[data-component="textarea"]::placeholder {
-  color: var(--muted-foreground);
-}
+  [data-component="textarea"]::placeholder {
+    color: var(--muted-foreground);
+  }
 
-[data-component="textarea"]:focus,
-[data-component="textarea"]:focus-visible {
-  border-color: var(--ring);
-  box-shadow:
-    var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05)),
-    0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
-}
+  /* ----- States ----- */
+  [data-component="textarea"]:where(:focus-visible) {
+    border-color: var(--ring);
+    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
+             var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
+    outline-offset: var(--focus-ring-offset, 0px);
+  }
 
-[data-component="textarea"]:disabled {
-  @apply cursor-not-allowed opacity-50;
-}
+  [data-component="textarea"]:where(:disabled) {
+    @apply cursor-not-allowed opacity-50;
+  }
 
-[data-component="textarea"][aria-invalid="true"],
-[data-component="textarea"]:invalid:not(:placeholder-shown) {
-  border-color: var(--destructive);
-  box-shadow:
-    var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05)),
-    0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
-}
+  [data-component="textarea"]:where([aria-invalid="true"], :invalid:not(:placeholder-shown)) {
+    --focus-ring-color: color-mix(in oklch, var(--destructive) 20%, transparent);
+    border-color: var(--destructive);
+    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
+             var(--focus-ring-color, color-mix(in oklch, var(--destructive) 20%, transparent));
+    outline-offset: var(--focus-ring-offset, 0px);
+  }
 
-/* Dark mode */
-.dark [data-component="textarea"] {
-  background-color: color-mix(in oklch, var(--input) 30%, transparent);
-}
+  /* ===================================================================
+     SELECT (Native)
+     Usage: <%= f.select :country, options, {}, data: { component: "select" } %>
+     =================================================================== */
+  [data-component="select"] {
+    @apply h-9 w-full min-w-0;
+    @apply border px-3 py-1 pr-8;
+    @apply text-base md:text-sm;
+    @apply outline-none appearance-none cursor-pointer;
+    @apply transition-[color,box-shadow,outline-color];
+
+    border-radius: var(--select-radius, var(--control-radius, 0.375rem));
+    background-color: var(--control-fill, var(--maquina-select-fill-default, var(--background)));
+    border-color: var(--input);
+    color: var(--foreground);
+    box-shadow: var(--elevation-control, var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
+
+    /* Chevron icon.
+       var() cannot be interpolated into url() and a data URI is a separate SVG
+       document, so currentColor never resolves inside it — the whole image is
+       exposed as an overridable property instead, with ready-made second and
+       third inks below. */
+    background-image: var(--select-chevron-image,
+      var(--maquina-select-chevron-default,
+        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")));
+    background-position: right 0.5rem center;
+    background-repeat: no-repeat;
+    background-size: 1.25rem 1.25rem;
+  }
 
-/* ===================================================================
-   SELECT (Native)
-   Usage: <%= f.select :country, options, {}, data: { component: "select" } %>
-   =================================================================== */
-[data-component="select"] {
-  @apply h-9 w-full min-w-0;
-  @apply rounded-md border px-3 py-1 pr-8;
-  @apply text-base md:text-sm;
-  @apply outline-none appearance-none cursor-pointer;
-  @apply transition-[color,box-shadow];
-
-  background-color: var(--background);
-  border-color: var(--input);
-  color: var(--foreground);
-  box-shadow: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
-
-  /* Chevron icon */
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
-  background-position: right 0.5rem center;
-  background-repeat: no-repeat;
-  background-size: 1.25rem 1.25rem;
-}
+  /* ----- Mark inks -----
+     Declared on the control, so they beat both the engine's inherited default
+     and a consumer's :root override — an explicit opt-in should win over a
+     global default. Works in dark mode too, now that the dark ink is an
+     inherited default rather than a rule on the control. */
+  [data-component="select"]:where([data-mark="dark"]) {
+    --select-chevron-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  }
 
-[data-component="select"]:focus,
-[data-component="select"]:focus-visible {
-  border-color: var(--ring);
-  box-shadow:
-    var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05)),
-    0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
-}
+  [data-component="select"]:where([data-mark="light"]) {
+    --select-chevron-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  }
 
-[data-component="select"]:disabled {
-  @apply pointer-events-none cursor-not-allowed opacity-50;
-}
+  /* ----- States ----- */
+  [data-component="select"]:where(:focus-visible) {
+    border-color: var(--ring);
+    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
+             var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
+    outline-offset: var(--focus-ring-offset, 0px);
+  }
 
-[data-component="select"][aria-invalid="true"] {
-  border-color: var(--destructive);
-}
+  [data-component="select"]:where(:disabled) {
+    @apply pointer-events-none cursor-not-allowed opacity-50;
+  }
 
-/* Dark mode */
-.dark [data-component="select"] {
-  background-color: color-mix(in oklch, var(--input) 30%, transparent);
-}
+  [data-component="select"]:where([aria-invalid="true"]) {
+    --focus-ring-color: color-mix(in oklch, var(--destructive) 20%, transparent);
+    border-color: var(--destructive);
+  }
 
-/* ===================================================================
-   CHECKBOX
-   Usage: <%= f.check_box :terms, data: { component: "checkbox" } %>
-   Matches: peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs
-            transition-shadow outline-none
-            data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground
-            data-[state=checked]:border-primary
-            focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]
-            disabled:cursor-not-allowed disabled:opacity-50
-            aria-invalid:ring-destructive/20 aria-invalid:border-destructive
-   =================================================================== */
-[data-component="checkbox"] {
-  @apply size-4 shrink-0;
-  @apply rounded-[4px] border;
-  @apply cursor-pointer appearance-none;
-  @apply transition-shadow;
-
-  border-color: var(--input);
-  background-color: transparent;
-  box-shadow: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
-}
+  /* ===================================================================
+     CHECKBOX
+     Usage: <%= f.check_box :terms, data: { component: "checkbox" } %>
+     Matches: peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs
+              transition-shadow outline-none
+              data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground
+              data-[state=checked]:border-primary
+              focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]
+              disabled:cursor-not-allowed disabled:opacity-50
+              aria-invalid:ring-destructive/20 aria-invalid:border-destructive
+     Shape, focus ring and elevation route through the engine tokens; see
+     app/assets/tailwind/maquina_components_engine/tokens.css.
+     =================================================================== */
+  [data-component="checkbox"] {
+    @apply size-4 shrink-0;
+    @apply border;
+    @apply cursor-pointer appearance-none;
+    @apply transition-shadow;
+
+    border-radius: var(--checkbox-radius, var(--mark-radius, 4px));
+    border-color: var(--input);
+    background-color: var(--control-fill, var(--maquina-control-fill-default, transparent));
+    box-shadow: var(--elevation-control, var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
+  }
 
-[data-component="checkbox"]:focus,
-[data-component="checkbox"]:focus-visible {
-  @apply outline-none;
-  border-color: var(--ring);
-  box-shadow:
-    var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05)),
-    0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
-}
+  /* Dark ink — one attribute fixes a light --primary */
+  [data-component="checkbox"]:where([data-mark="dark"]) {
+    --checkbox-mark-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+    --checkbox-indeterminate-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='3' y='7' width='10' height='2' rx='1'/%3e%3c/svg%3e");
+  }
 
-[data-component="checkbox"]:checked {
-  background-color: var(--primary);
-  border-color: var(--primary);
+  /* ----- States ----- */
+  [data-component="checkbox"]:where(:checked) {
+    background-color: var(--primary);
+    border-color: var(--primary);
+
+    /* Checkmark icon.
+       Marks are overridable images, not masks: mask-image would mask the whole
+       element (box, border and shadow included), appearance:none inputs cannot
+       carry ::before/::after reliably, and neither currentColor nor var()
+       resolves inside a data URI. A light --primary makes the white ink measure
+       1.15:1, so ship a second ink rather than baking one in.
+
+       The default is the fallback rather than a declaration on the control,
+       because an element's own custom property beats an inherited one — so
+       declaring it here would put it out of reach of :root. Setting it at :root
+       retints every control; the data-mark attributes below still win, since an
+       explicit opt-in should beat a global default. */
+    background-image: var(--checkbox-mark-image,
+      url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"));
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
 
-  /* Checkmark icon */
-  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-}
+  [data-component="checkbox"]:where(:indeterminate) {
+    background-color: var(--primary);
+    border-color: var(--primary);
+    background-image: var(--checkbox-indeterminate-image,
+      url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='3' y='7' width='10' height='2' rx='1'/%3e%3c/svg%3e"));
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
 
-[data-component="checkbox"]:disabled {
-  @apply cursor-not-allowed opacity-50;
-}
+  [data-component="checkbox"]:where(:focus-visible) {
+    border-color: var(--ring);
+    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
+             var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
+    outline-offset: var(--focus-ring-offset, 0px);
+  }
 
-[data-component="checkbox"][aria-invalid="true"] {
-  border-color: var(--destructive);
-  box-shadow:
-    var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05)),
-    0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
-}
+  [data-component="checkbox"]:where(:disabled) {
+    @apply cursor-not-allowed opacity-50;
+  }
 
-[data-component="checkbox"]:indeterminate {
-  background-color: var(--primary);
-  border-color: var(--primary);
-  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='3' y='7' width='10' height='2' rx='1'/%3e%3c/svg%3e");
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-}
+  [data-component="checkbox"]:where([aria-invalid="true"]) {
+    --focus-ring-color: color-mix(in oklch, var(--destructive) 20%, transparent);
+    border-color: var(--destructive);
+    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
+             var(--focus-ring-color, color-mix(in oklch, var(--destructive) 20%, transparent));
+    outline-offset: var(--focus-ring-offset, 0px);
+  }
 
-/* Dark mode */
-.dark [data-component="checkbox"]:not(:checked) {
-  background-color: color-mix(in oklch, var(--input) 30%, transparent);
-}
+  /* ===================================================================
+     RADIO
+     Usage: <%= f.radio_button :plan, "basic", data: { component: "radio" } %>
+     =================================================================== */
+  [data-component="radio"] {
+    @apply size-4 shrink-0;
+    @apply border;
+    @apply cursor-pointer appearance-none;
+    @apply transition-shadow;
+
+    border-radius: var(--radio-radius, var(--pill-radius, calc(infinity * 1px)));
+    border-color: var(--input);
+    background-color: var(--control-fill, var(--maquina-control-fill-default, transparent));
+    box-shadow: var(--elevation-control, var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05)));
+
+    /* Inner dot — overridable image, see the checkbox note above */
+  }
 
-/* ===================================================================
-   RADIO
-   Usage: <%= f.radio_button :plan, "basic", data: { component: "radio" } %>
-   =================================================================== */
-[data-component="radio"] {
-  @apply size-4 shrink-0;
-  @apply rounded-full border;
-  @apply cursor-pointer appearance-none;
-  @apply transition-shadow;
-
-  border-color: var(--input);
-  background-color: transparent;
-  box-shadow: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
-}
+  [data-component="radio"]:where([data-mark="dark"]) {
+    --radio-mark-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+  }
 
-[data-component="radio"]:focus,
-[data-component="radio"]:focus-visible {
-  @apply outline-none;
-  border-color: var(--ring);
-  box-shadow:
-    var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05)),
-    0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
-}
+  /* ----- States ----- */
+  [data-component="radio"]:where(:checked) {
+    border-color: var(--primary);
+    background-color: var(--primary);
+
+    /* Inner dot */
+    background-image: var(--radio-mark-image,
+      url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"));
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
 
-[data-component="radio"]:checked {
-  border-color: var(--primary);
-  background-color: var(--primary);
+  [data-component="radio"]:where(:focus-visible) {
+    border-color: var(--ring);
+    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
+             var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
+    outline-offset: var(--focus-ring-offset, 0px);
+  }
 
-  /* Inner dot */
-  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-}
+  [data-component="radio"]:where(:disabled) {
+    @apply cursor-not-allowed opacity-50;
+  }
 
-[data-component="radio"]:disabled {
-  @apply cursor-not-allowed opacity-50;
-}
+  /* ===================================================================
+     SWITCH (Toggle)
+     Usage: <%= f.check_box :notifications, data: { component: "switch" } %>
+     =================================================================== */
+  [data-component="switch"] {
+    @apply h-5 w-9 shrink-0;
+    @apply border-2 border-transparent;
+    @apply cursor-pointer appearance-none;
+    @apply transition-all duration-200;
+
+    border-radius: var(--switch-radius, var(--pill-radius, calc(infinity * 1px)));
+    background-color: var(--input);
+
+    /* Thumb — overridable image, see the checkbox note above.
+       The thumb slides via background-position, so these must stay longhands:
+       the background shorthand would reset the position on every state change. */
+    background-image: var(--switch-thumb-image,
+      url("data:image/svg+xml,%3csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='10' cy='10' r='8' fill='%23ffffff'/%3e%3c/svg%3e"));
+    background-position: left 2px center;
+    background-repeat: no-repeat;
+    background-size: 16px 16px;
+  }
 
-/* Dark mode */
-.dark [data-component="radio"]:not(:checked) {
-  background-color: color-mix(in oklch, var(--input) 30%, transparent);
-}
+  [data-component="switch"]:where([data-mark="dark"]) {
+    --switch-thumb-image: url("data:image/svg+xml,%3csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='10' cy='10' r='8' fill='%23000000'/%3e%3c/svg%3e");
+  }
 
-/* ===================================================================
-   SWITCH (Toggle)
-   Usage: <%= f.check_box :notifications, data: { component: "switch" } %>
-   =================================================================== */
-[data-component="switch"] {
-  @apply h-5 w-9 shrink-0;
-  @apply rounded-full border-2 border-transparent;
-  @apply cursor-pointer appearance-none;
-  @apply transition-all duration-200;
-
-  background-color: var(--input);
-
-  /* Thumb */
-  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='10' cy='10' r='8' fill='white'/%3e%3c/svg%3e");
-  background-position: left 2px center;
-  background-repeat: no-repeat;
-  background-size: 16px 16px;
-}
+  /* ----- States ----- */
+  [data-component="switch"]:where(:checked) {
+    background-color: var(--primary);
+    background-position: right 2px center;
+  }
 
-[data-component="switch"]:focus,
-[data-component="switch"]:focus-visible {
-  @apply outline-none;
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
-}
+  [data-component="switch"]:where(:focus-visible) {
+    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
+             var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
+    outline-offset: var(--focus-ring-offset, 0px);
+  }
 
-[data-component="switch"]:checked {
-  background-color: var(--primary);
-  background-position: right 2px center;
-}
+  [data-component="switch"]:where(:disabled) {
+    @apply cursor-not-allowed opacity-50;
+  }
 
-[data-component="switch"]:disabled {
-  @apply cursor-not-allowed opacity-50;
-}
+  /* ===================================================================
+     BUTTON
+     Usage:
+       <%= f.submit "Save", data: { component: "button", variant: "primary" } %>
+       <%= button_to "Delete", path, data: { component: "button", variant: "destructive" } %>
+       <%= link_to "Cancel", path, data: { component: "button", variant: "outline" } %>
+     Matches: inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md
+              text-sm font-medium transition-colors outline-none
+              focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+              disabled:pointer-events-none disabled:opacity-50
+              [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0
+     Shape, focus ring and elevation route through the engine tokens; see
+     app/assets/tailwind/maquina_components_engine/tokens.css.
+     =================================================================== */
+
+  /* ----- Base: every button, no exceptions -----
+     The un-varianted default treatment used to be folded into this selector,
+     which meant a theme's own `[data-component="button"]` rule at 0,1,0 beat
+     un-varianted buttons but lost to every explicitly-varianted one. The
+     default treatment now lives with the other variants, keyed off
+     :not([data-variant]). */
+  [data-component="button"] {
+    @apply inline-flex items-center justify-center gap-2;
+    @apply whitespace-nowrap;
+    border-radius: var(--button-radius, var(--control-radius, 0.375rem));
+    @apply text-sm;
+    font-weight: var(--label-weight, 500);
+    @apply h-9 px-4 py-2;
+    @apply cursor-default;
+    @apply outline-none;
+    @apply transition-colors;
+    @apply select-none;
+
+    /* SVG icons inside buttons */
+    & svg {
+      @apply pointer-events-none size-4 shrink-0;
+    }
+  }
 
-/* ===================================================================
-   BUTTON
-   Usage:
-     <%= f.submit "Save", data: { component: "button", variant: "primary" } %>
-     <%= button_to "Delete", path, data: { component: "button", variant: "destructive" } %>
-     <%= link_to "Cancel", path, data: { component: "button", variant: "outline" } %>
-   Matches: inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md
-            text-sm font-medium transition-colors outline-none
-            focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
-            disabled:pointer-events-none disabled:opacity-50
-            [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0
-   =================================================================== */
+  /* ----- Sizes ----- */
 
-/* Base button styles */
-[data-component="button"] {
-  @apply inline-flex items-center justify-center gap-2;
-  @apply whitespace-nowrap rounded-md;
-  @apply text-sm font-medium;
-  @apply h-9 px-4 py-2;
-  @apply cursor-default;
-  @apply outline-none;
-  @apply transition-colors;
-  @apply select-none;
-
-  /* SVG icons inside buttons */
-  & svg {
-    @apply pointer-events-none size-4 shrink-0;
+  [data-component="button"]:where([data-size="sm"]) {
+    @apply h-8 px-3 text-xs;
   }
-}
-
-/* Disabled state - applies to all variants */
-[data-component="button"]:disabled,
-[data-component="button"][aria-disabled="true"] {
-  @apply pointer-events-none opacity-50;
-}
 
-/* Focus ring - applies to all variants */
-[data-component="button"]:focus-visible {
-  box-shadow:
-    0 0 0 2px var(--background),
-    0 0 0 4px var(--ring);
-}
+  [data-component="button"]:where([data-size="lg"]) {
+    @apply h-10 px-8;
+  }
 
-/* ----- Variants ----- */
+  [data-component="button"]:where([data-size="icon"]) {
+    @apply size-9 p-0;
+  }
 
-/* Default (Primary) */
-[data-component="button"],
-[data-component="button"][data-variant="default"],
-[data-component="button"][data-variant="primary"] {
-  background-color: var(--primary);
-  color: var(--primary-foreground);
-  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
-}
+  [data-component="button"]:where([data-size="icon-sm"]) {
+    @apply size-8 p-0;
+  }
 
-[data-component="button"]:hover,
-[data-component="button"][data-variant="default"]:hover,
-[data-component="button"][data-variant="primary"]:hover {
-  background-color: color-mix(in oklch, var(--primary) 90%, black);
-}
+  [data-component="button"]:where([data-size="icon-lg"]) {
+    @apply size-10 p-0;
+  }
 
-/* Destructive */
-[data-component="button"][data-variant="destructive"] {
-  background-color: var(--destructive);
-  color: var(--destructive-foreground);
-  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
-}
+  /* ----- Variants ----- */
 
-[data-component="button"][data-variant="destructive"]:hover {
-  background-color: color-mix(in oklch, var(--destructive) 90%, black);
-}
+  /* Default (Primary) — :not([data-variant]) covers the un-varianted case */
+  [data-component="button"]:where(:not([data-variant]), [data-variant="default"], [data-variant="primary"]) {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    box-shadow: var(--elevation-raised, var(--shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)));
+  }
 
-[data-component="button"][data-variant="destructive"]:focus-visible {
-  box-shadow:
-    0 0 0 2px var(--background),
-    0 0 0 4px var(--destructive);
-}
+  /* Destructive */
+  [data-component="button"]:where([data-variant="destructive"]) {
+    background-color: var(--destructive);
+    color: var(--destructive-foreground);
+    box-shadow: var(--elevation-raised, var(--shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)));
+  }
 
-/* Outline */
-[data-component="button"][data-variant="outline"] {
-  background-color: var(--background);
-  color: var(--foreground);
-  border: 1px solid var(--input);
-  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
-}
+  /* Outline */
+  [data-component="button"]:where([data-variant="outline"]) {
+    /* transparent, not --background: an outline button has to work on top of a
+       card or popover, where painting the page background makes it a light box */
+    background-color: transparent;
+    color: var(--foreground);
+    border: 1px solid var(--input);
+    box-shadow: var(--elevation-raised, var(--shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)));
+  }
 
-[data-component="button"][data-variant="outline"]:hover {
-  background-color: var(--accent);
-  color: var(--accent-foreground);
-}
+  /* Secondary */
+  [data-component="button"]:where([data-variant="secondary"]) {
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+    box-shadow: var(--elevation-raised, var(--shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)));
+  }
 
-/* Secondary */
-[data-component="button"][data-variant="secondary"] {
-  background-color: var(--secondary);
-  color: var(--secondary-foreground);
-  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
-}
+  /* Ghost */
+  [data-component="button"]:where([data-variant="ghost"]) {
+    background-color: transparent;
+    color: var(--foreground);
+    box-shadow: var(--elevation-none, none);
+  }
 
-[data-component="button"][data-variant="secondary"]:hover {
-  background-color: color-mix(in oklch, var(--secondary) 80%, black);
-}
+  /* Link — deliberately after the sizes: a link button has no box, so it must
+     win over the height and padding of whatever size it was given */
+  [data-component="button"]:where([data-variant="link"]) {
+    background-color: transparent;
+    color: var(--primary);
+    text-decoration-line: underline;
+    text-underline-offset: 4px;
+    box-shadow: var(--elevation-none, none);
+    @apply h-auto px-0 py-0;
+  }
 
-/* Ghost */
-[data-component="button"][data-variant="ghost"] {
-  background-color: transparent;
-  color: var(--foreground);
-  box-shadow: none;
-}
+  /* ----- States ----- */
 
-[data-component="button"][data-variant="ghost"]:hover {
-  background-color: var(--accent);
-  color: var(--accent-foreground);
-}
+  [data-component="button"]:where(:not([data-variant]):hover, [data-variant="default"]:hover, [data-variant="primary"]:hover) {
+    /* Tokenize the outcome, not the recipe: darkening is wrong in dark mode,
+       where --primary is already light. */
+    background-color: var(--primary-hover, color-mix(in oklch, var(--primary) 90%, black));
+  }
 
-/* Link */
-[data-component="button"][data-variant="link"] {
-  background-color: transparent;
-  color: var(--primary);
-  text-decoration-line: underline;
-  text-underline-offset: 4px;
-  box-shadow: none;
-  @apply h-auto px-0 py-0;
-}
+  [data-component="button"]:where([data-variant="destructive"]:hover) {
+    background-color: var(--destructive-hover, color-mix(in oklch, var(--destructive) 90%, black));
+  }
 
-[data-component="button"][data-variant="link"]:hover {
-  text-decoration-line: underline;
-}
+  [data-component="button"]:where([data-variant="outline"]:hover) {
+    background-color: var(--accent-hover, var(--accent));
+    color: var(--accent-foreground);
+  }
 
-/* ----- Sizes ----- */
+  [data-component="button"]:where([data-variant="secondary"]:hover) {
+    background-color: var(--secondary-hover, color-mix(in oklch, var(--secondary) 80%, black));
+  }
 
-[data-component="button"][data-size="sm"] {
-  @apply h-8 px-3 text-xs rounded-md;
-}
+  [data-component="button"]:where([data-variant="ghost"]:hover) {
+    background-color: var(--accent-hover, var(--accent));
+    color: var(--accent-foreground);
+  }
 
-[data-component="button"][data-size="lg"] {
-  @apply h-10 px-8 rounded-md;
-}
+  [data-component="button"]:where([data-variant="link"]:hover) {
+    text-decoration-line: underline;
+  }
 
-[data-component="button"][data-size="icon"] {
-  @apply size-9 p-0;
-}
+  /* Focus ring.
+   * outline, not box-shadow. The ring no longer collides with the elevation each
+   * variant declares, so a single selector suffices and no variant can clobber
+   * it; it also survives forced-colors mode and overflow-hidden ancestors, and
+   * needs no knowledge of the backdrop color.
+   */
+  [data-component="button"]:where(:focus-visible) {
+    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
+             var(--focus-ring-color, var(--ring));
+    outline-offset: var(--focus-ring-offset, 0px);
+  }
 
-[data-component="button"][data-size="icon-sm"] {
-  @apply size-8 p-0;
-}
+  /* Destructive keeps its own red ring. This only sets a custom property, so it
+     competes with nothing but other --focus-ring-color declarations; the shared
+     outline above resolves it at computed-value time. */
+  [data-component="button"]:where([data-variant="destructive"]:focus-visible) {
+    --focus-ring-color: var(--destructive);
+  }
 
-[data-component="button"][data-size="icon-lg"] {
-  @apply size-10 p-0;
-}
+  /* Disabled - applies to all variants */
+  [data-component="button"]:where(:disabled, [aria-disabled="true"]) {
+    @apply pointer-events-none opacity-50;
+  }
 
-/* ===================================================================
-   HELP TEXT / DESCRIPTION
-   Usage: <p data-form-part="description">We'll never share your email.</p>
-   =================================================================== */
-[data-form-part="description"] {
-  @apply text-sm;
-  color: var(--muted-foreground);
-}
+  /* ===================================================================
+     HELP TEXT / DESCRIPTION
+     Usage: <p data-form-part="description">We'll never share your email.</p>
+     =================================================================== */
+  [data-form-part="description"] {
+    @apply text-sm;
+    color: var(--muted-foreground);
+  }
 
-/* ===================================================================
-   ERROR TEXT / MESSAGE
-   Usage: <p data-form-part="error">Email is required</p>
-   =================================================================== */
-[data-form-part="error"] {
-  @apply text-sm font-medium;
-  color: var(--destructive-foreground);
-}
+  /* ===================================================================
+     ERROR TEXT / MESSAGE
+     Usage: <p data-form-part="error">Email is required</p>
+     =================================================================== */
+  [data-form-part="error"] {
+    @apply text-sm;
+    font-weight: var(--label-weight, 500);
+    color: var(--destructive-foreground);
+  }
 
-/* Rails error wrapper compatibility */
-.field_with_errors {
-  @apply contents;
-}
+  /* Rails error wrapper compatibility */
+  .field_with_errors {
+    @apply contents;
+  }
 
-.field_with_errors [data-component="input"],
-.field_with_errors [data-component="textarea"],
-.field_with_errors [data-component="select"] {
-  border-color: var(--destructive);
-  box-shadow:
-    var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05)),
-    0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
-}
+  :where(.field_with_errors) [data-component="input"],
+  :where(.field_with_errors) [data-component="textarea"],
+  :where(.field_with_errors) [data-component="select"] {
+    --focus-ring-color: color-mix(in oklch, var(--destructive) 20%, transparent);
+    border-color: var(--destructive);
+    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
+             var(--focus-ring-color, color-mix(in oklch, var(--destructive) 20%, transparent));
+    outline-offset: var(--focus-ring-offset, 0px);
+  }
 
-/* ===================================================================
-   FORM ACTIONS (Submit area)
-   Usage: <div data-form-part="actions">
-   =================================================================== */
-[data-form-part="actions"] {
-  @apply flex items-center gap-3 pt-4;
-}
+  /* ===================================================================
+     FORM ACTIONS (Submit area)
+     Usage: <div data-form-part="actions">
+     =================================================================== */
+  [data-form-part="actions"] {
+    @apply flex items-center gap-3 pt-4;
+  }
 
-[data-form-part="actions"][data-align="end"] {
-  @apply justify-end;
-}
+  [data-form-part="actions"]:where([data-align="end"]) {
+    @apply justify-end;
+  }
 
-[data-form-part="actions"][data-align="between"] {
-  @apply justify-between;
-}
+  [data-form-part="actions"]:where([data-align="between"]) {
+    @apply justify-between;
+  }
 
-/* ===================================================================
-   FIELDSET & LEGEND
-   =================================================================== */
-[data-component="fieldset"] {
-  @apply space-y-4 rounded-lg border p-4;
-  border-color: var(--border);
-}
+  /* ===================================================================
+     FIELDSET & LEGEND
+     =================================================================== */
+  [data-component="fieldset"] {
+    @apply space-y-4 border p-4;
+    border-radius: var(--fieldset-radius, var(--surface-radius, 0.5rem));
+    border-color: var(--border);
+  }
 
-[data-component="legend"],
-[data-component="fieldset"] > legend {
-  @apply px-2 text-sm font-medium;
-  color: var(--foreground);
-}
+  [data-component="legend"],
+  :where([data-component="fieldset"]) > legend {
+    @apply px-2 text-sm;
+    font-weight: var(--label-weight, 500);
+    color: var(--foreground);
+  }
 
-/* ===================================================================
-   INPUT GROUP (Prefix/Suffix support)
-   =================================================================== */
-[data-component="input-group"] {
-  @apply relative flex items-center;
-}
+  /* ===================================================================
+     INPUT GROUP (Prefix/Suffix support)
+     Declared after the input sizes on purpose: the prefix/suffix padding has
+     to win over both the base px-3 and the data-size paddings.
+     =================================================================== */
+  [data-component="input-group"] {
+    @apply relative flex items-center;
+  }
 
-[data-component="input-group"] [data-component="input"] {
-  @apply flex-1;
-}
+  :where([data-component="input-group"]) [data-component="input"] {
+    @apply flex-1;
+  }
 
-[data-input-group-part="prefix"],
-[data-input-group-part="suffix"] {
-  @apply absolute flex items-center justify-center;
-  @apply h-full px-3;
-  @apply text-sm;
-  color: var(--muted-foreground);
-  pointer-events: none;
-}
+  [data-input-group-part="prefix"],
+  [data-input-group-part="suffix"] {
+    @apply absolute flex items-center justify-center;
+    @apply h-full px-3;
+    @apply text-sm;
+    color: var(--muted-foreground);
+    pointer-events: none;
+  }
 
-[data-input-group-part="prefix"] {
-  @apply left-0;
-}
+  [data-input-group-part="prefix"] {
+    @apply left-0;
+  }
 
-[data-input-group-part="suffix"] {
-  @apply right-0;
-}
+  [data-input-group-part="suffix"] {
+    @apply right-0;
+  }
 
-/* Adjust input padding when prefix/suffix present */
-[data-component="input-group"]:has([data-input-group-part="prefix"]) [data-component="input"] {
-  @apply pl-9;
-}
+  /* Adjust input padding when prefix/suffix present */
+  :where([data-component="input-group"]:has([data-input-group-part="prefix"])) [data-component="input"] {
+    @apply pl-9;
+  }
 
-[data-component="input-group"]:has([data-input-group-part="suffix"]) [data-component="input"] {
-  @apply pr-9;
+  :where([data-component="input-group"]:has([data-input-group-part="suffix"])) [data-component="input"] {
+    @apply pr-9;
+  }
 }